@charset "utf-8";
/* ============================================================
   한국수소산업협회 (KHIA) — 메인 테마
   레이아웃/타이포/섹션 리듬은 daontheme pro09 구성을 따른다.
   ============================================================ */

:root{
  --wrap: 1600px;
  --pad: 40px;
  --hd-h: 100px;
  --hd-h-sm: 68px;

  /* 섹션 배경 (pro09 팔레트) */
  --bg-light:  #f3f3f3;
  --bg-light2: #f0f0f0;
  --bg-dark:   #082839;
  --bg-navy:   #15172c;
  --bg-black:  #000000;

  /* 브랜드 (KHIA 로고 컬러) */
  --brand:      #1a3f8f;
  --brand-2:    #2f6fd0;
  --brand-accent:#e8453c;

  --text:      #333333;
  --text-sub:  #6b7280;
  --line:      #e2e5ea;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--text);
  font-family:'Poppins','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:18px; line-height:1.75; letter-spacing:-.01em;
  /* 한글은 어절(띄어쓰기) 단위로만 줄바꿈. 기본값이면 낱글자 중간에서 끊긴다. */
  word-break:keep-all; overflow-wrap:break-word;
  overflow-x:hidden;
}
img{ max-width:100%; border:0; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; cursor:pointer; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:10px; top:10px; z-index:9999; background:#fff; padding:10px 16px; border:2px solid var(--brand); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

/* ── 헤더 ─────────────────────────────────────────────── */
#header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  transition:background .3s, box-shadow .3s, height .3s;
}
/* 히어로 위에서는 구분선 없이 투명하게(선이 사진을 가로지르지 않도록) */
#header .util{ border-bottom:0; transition:border-color .3s; }
#header .util .wrap{ display:flex; justify-content:flex-end; align-items:center; gap:6px; height:40px; }
#header .util a{
  font-size:12.5px; color:rgba(255,255,255,.85); padding:0 11px; line-height:1;
  border-left:1px solid rgba(255,255,255,.22); transition:color .2s;
}
#header .util a:first-child{ border-left:0; }
#header .util a:hover{ color:#fff; }
#header .util .lang{ display:flex; align-items:center; gap:8px; margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.22); }
#header .util .lang a{ border:0; padding:0; font-size:12.5px; opacity:.7; }
#header .util .lang a.on{ opacity:1; font-weight:600; }
#header .util a.hi{ color:#fff; font-weight:600; }

#header .head{ display:flex; align-items:center; justify-content:space-between; height:var(--hd-h); transition:height .3s; }
#header .logo img{ height:36px; width:auto; display:block; transition:height .3s; }
#header .logo .lg-dark{ display:none; }

#gnb{ display:flex; align-items:stretch; }
#gnb > li > a{
  display:block; padding:0 34px; font-size:19.5px; font-weight:500; color:#fff;
  letter-spacing:-.02em; line-height:var(--hd-h); transition:color .2s, line-height .3s; white-space:nowrap;
}
#gnb > li:hover > a{ color:#7fc4ff; }

/* 중메뉴는 데스크톱에서 숨긴다 (모바일 미디어쿼리에서만 펼침).
   이 규칙이 없으면 대메뉴 li 안에서 그대로 렌더되어 대/중메뉴가 뒤섞인다. */
#gnb .mo-sub{ display:none; }

/* 드롭다운(커튼) — #header 의 자식이므로 항상 헤더 바로 아래에 붙는다 */
.curtain{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; box-shadow:0 16px 34px rgba(10,20,40,.12);
  height:0; overflow:hidden; border-top:0;
  transition:height .35s cubic-bezier(.22,.61,.36,1);
}
.curtain .wrap{ display:flex; justify-content:flex-end; padding-top:30px; padding-bottom:38px; }
.curtain .col{ flex:0 0 auto; padding:0 34px; }   /* 대메뉴 a 의 좌우 패딩과 동일 */
.curtain .col > strong{
  display:block; font-size:14px; font-weight:700; color:var(--brand);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
  letter-spacing:-.02em;
}
.curtain .col a{ display:block; font-size:16px; color:#5b6472; padding:6px 0; transition:color .18s, transform .18s; }
.curtain .col a:hover{ color:var(--brand); transform:translateX(4px); }

/* 스크롤/서브페이지 상태 = 흰 배경 헤더 */
#header.solid{ background:#fff; box-shadow:0 2px 14px rgba(10,20,40,.10); }
#header.solid .head{ height:var(--hd-h-sm); }
#header.solid .logo .lg-white{ display:none; }
#header.solid .logo .lg-dark{ display:block; }
#header.solid #gnb > li > a{ color:#111827; line-height:var(--hd-h-sm); }
#header.solid #gnb > li:hover > a{ color:var(--brand); }
#header.solid .util{ border-bottom:1px solid var(--line); }
#header.solid .util a{ color:#6b7280; border-left-color:var(--line); }
#header.solid .util a:hover{ color:var(--brand); }
#header.solid .util a.hi{ color:var(--brand); }
#header.solid .util .lang{ border-left-color:var(--line); }

/* 모바일 토글 */
.mo-btn{ display:none; width:44px; height:44px; background:none; border:0; padding:0; }
.mo-btn span{ display:block; height:2px; background:#fff; margin:6px auto; width:24px; transition:.25s; }
#header.solid .mo-btn span{ background:#111827; }

/* ── 섹션 공통 ────────────────────────────────────────── */
.sec{ padding:120px 0; position:relative; }
.sec.dark{ background:var(--bg-dark); color:#fff; }
.sec.navy{ background:var(--bg-navy); color:#fff; }
.sec.black{ background:var(--bg-black); color:#fff; }
.sec.light{ background:var(--bg-light); }
.sec.light2{ background:var(--bg-light2); }

.con_title{ text-align:center; margin-bottom:58px; }
.con_title h2{
  font-size:45px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  font-family:'Poppins','Pretendard','Noto Sans KR',sans-serif;
}
.con_title p{ margin-top:12px; font-size:18.5px; font-weight:400; letter-spacing:-.02em; color:var(--text-sub); }
.sec.dark .con_title p, .sec.navy .con_title p, .sec.black .con_title p{ color:rgba(255,255,255,.72); }

/* 스크롤 등장 */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

.btn-more{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border:1px solid currentColor; border-radius:999px;
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; transition:.22s;
}
.btn-more:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── 01 히어로 ────────────────────────────────────────── */
#hero{ position:relative; height:100vh; min-height:620px; color:#fff; overflow:hidden; }
#hero .slides{ position:absolute; inset:0; }
#hero .slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease;
  background-size:cover; background-position:center; transform:scale(1.06);
  filter:brightness(1.08) saturate(1.05) contrast(1.02);
}
#hero .slide.on{ opacity:1; transform:scale(1); transition:opacity 1s ease, transform 4.8s linear; }
#hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,16,32,.45) 0%, rgba(4,16,32,.16) 32%, rgba(4,16,32,.13) 60%, rgba(4,16,32,.54) 100%);
}
#hero .veil::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(720px 380px at 50% 52%, rgba(4,16,32,.42), rgba(4,16,32,0) 72%),
             radial-gradient(1100px 620px at 50% 42%, rgba(47,111,208,.12), transparent 70%);
}
#hero .inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
#hero .tag{
  font-size:14px; letter-spacing:.30em; font-weight:600; color:#8fd0ff;
  margin-bottom:22px;
}
#hero h2{ font-size:60px; font-weight:800; line-height:1.22; letter-spacing:-.03em; text-shadow:0 3px 16px rgba(0,6,16,.62), 0 1px 3px rgba(0,6,16,.50); }
#hero p{ margin-top:22px; font-size:19px; color:rgba(255,255,255,.94); letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,6,16,.55); }
#hero .hero-cta{ margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
#hero .hero-cta .btn-more{ background:rgba(255,255,255,.08); backdrop-filter:blur(4px); }
#hero .dots{ position:absolute; left:0; right:0; bottom:44px; z-index:3; display:flex; gap:10px; justify-content:center; }
#hero .dots button{
  width:34px; height:4px; border:0; padding:0; border-radius:2px;
  background:rgba(255,255,255,.35); transition:.25s;
}
#hero .dots button.on{ background:#fff; width:56px; }
#hero .scroll-hint{
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%); z-index:3;
  font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.6);
  animation:bob 2.1s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ── 02 ABOUT ─────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.about-grid .lead{ font-size:31px; font-weight:700; line-height:1.42; letter-spacing:-.03em; color:#0f2340; }
.about-grid .lead b{ color:var(--brand); }
.about-grid .body{ margin-top:24px; font-size:16px; color:#55606f; line-height:1.9; }
.about-grid .btn-more{ margin-top:34px; color:var(--brand); }
.about-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.about-stats li{
  background:#fff; border-radius:14px; padding:32px 26px; text-align:center;
  box-shadow:0 8px 26px rgba(15,35,64,.07);
}
.about-stats .n{ font-size:42px; font-weight:800; color:var(--brand); letter-spacing:-.03em; line-height:1.1; }
.about-stats .n small{ font-size:20px; font-weight:700; }
.about-stats .l{ margin-top:8px; font-size:14px; color:var(--text-sub); }

/* ── 03 BUSINESS ──────────────────────────────────────── */
.biz{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.biz li{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:44px 30px; transition:.3s;
}
.biz li:hover{ background:rgba(47,111,208,.20); border-color:rgba(127,196,255,.5); transform:translateY(-8px); }
.biz .ico{
  width:58px; height:58px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8); margin-bottom:24px;
}
.biz .ico svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.8; }
.biz h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.biz p{ margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.66); line-height:1.75; }
.biz .go{ margin-top:22px; font-size:13px; color:#8fd0ff; font-weight:600; }

/* ── 04 미디어(동영상) ────────────────────────────────── */
.media{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.media a{ display:block; background:#0e0e0e; border-radius:14px; overflow:hidden; transition:.3s; }
.media a:hover{ transform:translateY(-6px); }
.media .thumb{ position:relative; aspect-ratio:16/9; background:#151515 center/cover; }
.media .thumb::after{
  content:''; position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%; background:rgba(0,0,0,.55) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  border:2px solid rgba(255,255,255,.7);
}
.media .cap{ padding:20px 22px 24px; }
.media .cap strong{ display:block; font-size:16.5px; font-weight:600; letter-spacing:-.02em; }
.media .cap span{ display:block; margin-top:8px; font-size:13px; color:rgba(255,255,255,.5); }

/* ── 05 충전소 ────────────────────────────────────────── */
.station{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.station .map{
  border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 14px 40px rgba(15,35,64,.10);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
}
.station-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.station-list li{
  background:#fff; border-radius:12px; padding:20px 18px; text-align:center;
  box-shadow:0 6px 18px rgba(15,35,64,.06); transition:.25s;
}
.station-list li:hover{ transform:translateY(-5px); box-shadow:0 12px 26px rgba(15,35,64,.12); }
.station-list .n{ font-size:28px; font-weight:800; color:var(--brand); letter-spacing:-.03em; }
.station-list .l{ margin-top:4px; font-size:13.5px; color:var(--text-sub); }

/* ── 06 행사/포럼 ─────────────────────────────────────── */
.event{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.event li{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden; transition:.3s;
}
.event li:hover{ transform:translateY(-8px); border-color:rgba(127,196,255,.45); }
.event .ph{ aspect-ratio:16/9; background:#0f1120 center/cover; }
.event .tx{ padding:24px 26px 28px; }
.event .d{ font-size:12.5px; letter-spacing:.06em; color:#8fd0ff; font-weight:600; }
.event h3{ margin-top:10px; font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.5; }

/* ── 07 회원사 로고 ───────────────────────────────────── */
.partner-rows{ display:flex; flex-direction:column; gap:18px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee .track{ display:flex; gap:18px; width:max-content; animation:slide 60s linear infinite; }
.marquee.rev .track{ animation-direction:reverse; }
.marquee:hover .track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee .track a{
  flex:0 0 auto; width:190px; height:74px; background:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:10px 14px;
  filter:grayscale(1); opacity:.72; transition:.25s;
}
.marquee .track a:hover{ filter:none; opacity:1; transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.marquee .track img{ max-width:100%; max-height:100%; object-fit:contain; }
.partner-foot{ margin-top:44px; text-align:center; }
.partner-foot .cnt{ font-size:15px; color:rgba(255,255,255,.6); margin-bottom:20px; }
.partner-foot .cnt b{ color:#fff; font-size:20px; font-weight:700; }

/* ── 08 게시판 탭 ─────────────────────────────────────── */
.news-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:38px; flex-wrap:wrap; }
.news-tabs button{
  padding:11px 24px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:14.5px; font-weight:500; color:#5b6472; transition:.22s; letter-spacing:-.02em;
}
.news-tabs button.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.news-panel{ display:none; }
.news-panel.on{ display:block; }
.news-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px; }
.news-list li{ border-bottom:1px solid #e2e5ea; }
.news-list a{ display:flex; align-items:center; gap:18px; padding:19px 4px; transition:.2s; }
.news-list a:hover{ padding-left:12px; }
.news-list a:hover .t{ color:var(--brand); }
.news-list .t{ flex:1; font-size:15.5px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s; }
.news-list .d{ font-size:13px; color:#98a1ae; flex:0 0 auto; }
.news-empty{ padding:56px 0; text-align:center; color:#98a1ae; }
.news-foot{ margin-top:38px; text-align:center; }
.news-foot .btn-more{ color:var(--brand); }

/* ── 09 배너 3종 ──────────────────────────────────────── */
#mbnr{ background:linear-gradient(120deg,#0b1c34 0%,#123566 55%,#0d2445 100%); color:#fff; padding:0; }
.mbnr{ display:grid; grid-template-columns:repeat(3,1fr); }
.mbnr li{ padding:96px 44px; text-align:center; border-left:1px solid rgba(255,255,255,.13); transition:.3s; }
.mbnr li:first-child{ border-left:0; }
.mbnr li:hover{ background:rgba(255,255,255,.06); }
.mbnr .en{ font-size:13px; letter-spacing:.2em; color:#8fd0ff; font-weight:600; }
.mbnr h3{ margin-top:14px; font-size:27px; font-weight:700; letter-spacing:-.03em; }
.mbnr p{ margin-top:12px; font-size:15px; color:rgba(255,255,255,.68); }
.mbnr .btn-more{ margin-top:26px; }

/* ── 퀵메뉴 ───────────────────────────────────────────── */
.quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.quick a{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:#fff; border-radius:16px; padding:40px 20px; text-align:center;
  box-shadow:0 8px 24px rgba(15,35,64,.07); transition:.28s;
}
.quick a:hover{ transform:translateY(-8px); box-shadow:0 16px 34px rgba(15,35,64,.13); }
.quick .ico{
  width:62px; height:62px; border-radius:50%; background:#eef4ff;
  display:flex; align-items:center; justify-content:center;
}
.quick .ico svg{ width:28px; height:28px; stroke:var(--brand); fill:none; stroke-width:1.8; }
.quick strong{ font-size:16px; font-weight:600; letter-spacing:-.02em; }

/* ── 푸터 ─────────────────────────────────────────────── */
#footer{ background:#161b22; color:#9aa4b2; padding:56px 0 44px; font-size:15px; }
#footer .f-top{ display:flex; gap:20px; align-items:center; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.10); flex-wrap:wrap; }
#footer .f-top a{ font-size:13.5px; color:#c4cbd6; }
#footer .f-top a:hover{ color:#fff; }
#footer .f-top .sep{ opacity:.3; }
#footer .f-body{ display:flex; justify-content:space-between; gap:40px; padding-top:28px; flex-wrap:wrap; }
#footer .f-logo img{ height:34px; opacity:.9; margin-bottom:18px; }
#footer .f-info p{ line-height:1.9; }
#footer .f-copy{ margin-top:22px; font-size:12.5px; color:#6b7684; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:1400px){
  #gnb > li > a{ padding:0 24px; font-size:18px; }
  .con_title h2{ font-size:40px; }
}
@media (max-width:1200px){
  :root{ --pad:24px; }
  .biz, .media, .event, .quick{ grid-template-columns:repeat(2,1fr); }
  .about-grid, .station{ grid-template-columns:1fr; gap:44px; }
  .mbnr{ grid-template-columns:1fr; }
  .mbnr li{ padding:64px 30px; border-left:0; border-top:1px solid rgba(255,255,255,.13); }
  .mbnr li:first-child{ border-top:0; }
  #hero h2{ font-size:46px; }
}
@media (max-width:900px){
  :root{ --hd-h:64px; --hd-h-sm:64px; }
  #header{ background:#fff; box-shadow:0 2px 12px rgba(10,20,40,.10); }
  #header .util{ display:none; }
  #header .logo .lg-white{ display:none; }
  #header .logo .lg-dark{ display:block; }
  .mo-btn{ display:block; }
  #gnb{
    position:fixed; top:var(--hd-h); left:0; right:0; bottom:0; background:#fff;
    flex-direction:column; align-items:stretch; overflow-y:auto; padding:8px 24px 40px;
    transform:translateX(100%); transition:transform .3s; display:flex;
  }
  #header.mo-open #gnb{ transform:none; }
  #gnb > li > a{ color:#111827; line-height:1; padding:18px 0; font-size:18px; border-bottom:1px solid var(--line); }
  #gnb .mo-sub{ display:none; padding:6px 0 14px; }
  #gnb li.on .mo-sub{ display:block; }
  #gnb .mo-sub a{ display:block; padding:9px 12px; font-size:16px; color:#5b6472; }
  .curtain{ display:none; }
  .sec{ padding:76px 0; }
  .con_title{ margin-bottom:38px; }
  .con_title h2{ font-size:30px; }
  .con_title p{ font-size:16px; }
  #hero{ min-height:560px; }
  #hero h2{ font-size:32px; }
  #hero p{ font-size:16px; }
  .biz, .media, .event, .quick, .news-list, .station-list{ grid-template-columns:1fr; }
  .station-list{ grid-template-columns:repeat(3,1fr); }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .news-list{ gap:0; }
  .marquee .track a{ width:150px; height:62px; }
}

/* ── 서브페이지 ───────────────────────────────────────── */
.sub-hero{
  margin-top:calc(var(--hd-h-sm) + 40px);
  background:linear-gradient(120deg,#0b1c34 0%,#123566 60%,#0d2445 100%);
  color:#fff; padding:74px 0 66px; text-align:center; position:relative; overflow:hidden;
}
.sub-hero::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 380px at 50% 0%, rgba(47,111,208,.35), transparent 70%);
}
.sub-hero .wrap{ position:relative; z-index:1; }
.sub-hero h1{ font-size:42px; font-weight:800; letter-spacing:-.03em; }
.sub-hero .crumb{ margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.66); }
.sub-hero .crumb a{ color:rgba(255,255,255,.66); }
.sub-hero .crumb a:hover{ color:#fff; }
.sub-hero .crumb span{ margin:0 8px; opacity:.5; }
.sub-hero .crumb strong{ color:#fff; font-weight:600; }

.sub-nav{ background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(15,35,64,.04); }
.sub-nav ul{ display:flex; flex-wrap:wrap; justify-content:center; }
.sub-nav a{
  display:block; padding:19px 26px; font-size:17px; color:#5b6472;
  border-bottom:3px solid transparent; transition:.2s; letter-spacing:-.02em;
}
.sub-nav a:hover{ color:var(--brand); }
.sub-nav a.on{ color:var(--brand); font-weight:700; border-bottom-color:var(--brand); }

.sub-body{ padding:70px 0 110px; min-height:44vh; }
.sub-body h1{ font-size:30px; font-weight:700; letter-spacing:-.03em; margin-bottom:22px; }
.sub-body h2{ font-size:24px; font-weight:700; letter-spacing:-.02em; margin:38px 0 14px; }
.sub-body h3{ font-size:19px; font-weight:600; margin:28px 0 10px; }
.sub-body p{ margin:0 0 15px; font-size:18px; line-height:1.9; color:#4b5563; }
.sub-body .container, .sub-body .container.narrow{ padding:0 !important; max-width:none; }

/* 게시판 내부 요소는 main.css 를 쓰되 폭만 맞춘다 */
.sub-body table{ width:100%; border-collapse:collapse; }
.sub-body .post-body img, .sub-body .page-body img{ max-width:100%; height:auto; }

/* ── 회원사 로그인/가입 폼 ────────────────────────────── */
.auth-card{
  max-width:460px; margin:0 auto; background:#fff; border-radius:16px;
  padding:44px 40px; box-shadow:0 12px 36px rgba(15,35,64,.10); border:1px solid var(--line);
}
.auth-card.wide{ max-width:660px; }
.auth-card h2{ font-size:24px; font-weight:700; text-align:center; letter-spacing:-.03em; margin:0 0 8px; }
.auth-card .lead{ text-align:center; color:var(--text-sub); font-size:14px; margin-bottom:28px; }
.auth-card label{ display:block; margin-bottom:16px; font-size:13.5px; font-weight:600; color:#3f4855; }
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[type=email],.auth-card input[type=tel]{
  width:100%; margin-top:7px; padding:13px 14px; border:1px solid #d5dae2; border-radius:9px;
  font:inherit; font-size:15px; font-weight:400; color:#111827; background:#fff; transition:.18s;
}
.auth-card input:focus{ outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(47,111,208,.14); }
.auth-card .btn-submit{
  width:100%; margin-top:8px; padding:14px; border:0; border-radius:9px;
  background:var(--brand); color:#fff; font-size:16px; font-weight:700; letter-spacing:-.02em; transition:.2s;
}
.auth-card .btn-submit:hover{ background:#12306f; }
.auth-card .links{ margin-top:22px; text-align:center; font-size:13.5px; color:var(--text-sub); }
.auth-card .links a{ color:var(--brand); font-weight:600; }
.auth-card .links span{ margin:0 8px; opacity:.4; }
.auth-msg{ padding:12px 14px; border-radius:9px; font-size:14px; margin-bottom:20px; }
.auth-msg.err{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.auth-msg.ok{ background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.auth-note{ font-size:12.5px; color:#98a1ae; margin-top:-8px; margin-bottom:16px; }

@media (max-width:900px){
  .sub-hero{ margin-top:var(--hd-h); padding:48px 0 42px; }
  .sub-hero h1{ font-size:27px; }
  .sub-nav ul{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .sub-nav a{ padding:15px 16px; font-size:15.5px; white-space:nowrap; }
  .sub-body{ padding:44px 0 70px; }
  .auth-card{ padding:32px 24px; }
}
/* ── 히어로 배경 그래픽 (수소·청정에너지 모티프) ────────── */
.hero-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen; opacity:.62;
}
.hero-fx svg{ width:100%; height:100%; display:block; }

/* 에너지 흐름선 */
.hf-flow .hf-base{ stroke:#8fd0ff; stroke-opacity:.16; stroke-width:1.4; }
.hf-flow .hf-beam{
  stroke:url(#hfBeam); stroke-width:2.4; stroke-opacity:.85;
  stroke-dasharray:170 1900; stroke-dashoffset:2070;
  animation:hfBeamRun 15s linear infinite;
}
.hf-flow .hf-beam.b2{ animation-duration:19s; animation-delay:-6s; }
.hf-flow .hf-beam.b3{ animation-duration:23s; animation-delay:-12s; }
@keyframes hfBeamRun{ to{ stroke-dashoffset:0; } }

/* H₂ 분자 */
.hf-mols{ stroke:#a9dcff; stroke-opacity:.30; stroke-width:1.5; }
.hf-mols circle{ fill:#cfe9ff; fill-opacity:.10; }
.hf-mol{
  transform-box:fill-box; transform-origin:center;
  animation:hfFloat 22s ease-in-out infinite;
}
.hf-mol.d1{ animation-duration:26s; animation-delay:-4s; }
.hf-mol.d2{ animation-duration:19s; animation-delay:-9s; }
.hf-mol.d3{ animation-duration:29s; animation-delay:-14s; }
.hf-mol.d4{ animation-duration:24s; animation-delay:-2s; }
.hf-mol.d5{ animation-duration:21s; animation-delay:-17s; }
@keyframes hfFloat{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  33%    { transform:translate(12px,-16px) rotate(7deg); }
  66%    { transform:translate(-9px,-7px) rotate(-5deg); }
}

/* 피어오르는 입자 */
.hf-motes circle{
  fill:#dff0ff; fill-opacity:0;
  animation:hfRise 17s linear infinite;
}
.hf-motes circle:nth-child(2n){ animation-duration:22s; }
.hf-motes circle:nth-child(3n){ animation-duration:27s; }
.hf-motes circle:nth-child(1){ animation-delay:-1s }
.hf-motes circle:nth-child(2){ animation-delay:-4s }
.hf-motes circle:nth-child(3){ animation-delay:-7s }
.hf-motes circle:nth-child(4){ animation-delay:-10s }
.hf-motes circle:nth-child(5){ animation-delay:-13s }
.hf-motes circle:nth-child(6){ animation-delay:-2s }
.hf-motes circle:nth-child(7){ animation-delay:-16s }
.hf-motes circle:nth-child(8){ animation-delay:-6s }
.hf-motes circle:nth-child(9){ animation-delay:-19s }
.hf-motes circle:nth-child(10){ animation-delay:-11s }
.hf-motes circle:nth-child(11){ animation-delay:-22s }
.hf-motes circle:nth-child(12){ animation-delay:-8s }
@keyframes hfRise{
  0%  { transform:translateY(0);      fill-opacity:0; }
  12% { fill-opacity:.55; }
  85% { fill-opacity:.30; }
  100%{ transform:translateY(-980px); fill-opacity:0; }
}

/* 중앙 광원 */
.hf-halo{ opacity:.20; animation:hfBreath 11s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes hfBreath{
  0%,100%{ opacity:.14; transform:scale(1); }
  50%    { opacity:.26; transform:scale(1.08); }
}

/* 접근성: 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .hf-beam,.hf-mol,.hf-motes circle,.hf-halo,#hero .slide.on{ animation:none !important; }
  .hf-motes circle{ fill-opacity:.28; }
}

/* ── 히어로 카피 ──────────────────────────────────────── */
#hero .org{
  margin-top:18px; font-size:20px; font-weight:600; letter-spacing:.01em;
  color:#bfe0ff; text-shadow:0 2px 12px rgba(0,6,16,.55);
}
#hero .lead{ margin-top:30px; }
#hero .lead p{
  margin:0; font-size:18px; line-height:1.95; color:rgba(255,255,255,.92);
  letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,6,16,.55);
}
#hero .lead p:first-child{
  font-size:21px; font-weight:600; color:#fff; margin-bottom:4px;
}
@media (max-width:900px){
  .hero-fx{ opacity:.5; }
  #hero .org{ font-size:16px; margin-top:14px; }
  #hero .lead{ margin-top:22px; }
  #hero .lead p{ font-size:15px; line-height:1.85; }
  #hero .lead p:first-child{ font-size:17px; }
}

/* ── 상단 헤더(로고·메뉴) 영역 집중 암전 ─────────────────
   히어로 사진이 밝은 배너일 때 흰 글씨가 묻히는 것을 막는다.
   이미지 자체에도 상단 그라데이션을 구워 넣었고, 여기서 한 번 더 덮는다.
   모바일은 헤더가 이미 흰 배경이므로 PC에서만 적용. */
@media (min-width:901px){
  #hero .veil::before{
    content:''; position:absolute; left:0; right:0; top:0; height:190px;
    background:linear-gradient(180deg,
      rgba(2,10,22,.66) 0%,
      rgba(2,10,22,.45) 45%,
      rgba(2,10,22,.18) 78%,
      rgba(2,10,22,0)   100%);
    pointer-events:none;
  }
}

/* ── 히어로 카피: 크기 +3px · 행간 축소 ──────────────────── */
#hero .org{ font-size:23px; }
#hero .lead{ margin-top:26px; }
#hero .lead p{ font-size:21px; line-height:1.55; }
#hero .lead p:first-child{ font-size:24px; margin-bottom:6px; }

@media (max-width:900px){
  #hero .org{ font-size:18px; }
  #hero .lead p{ font-size:17px; line-height:1.5; }
  #hero .lead p:first-child{ font-size:19px; }
}

/* ── 최신게시물 위젯 (h2.or.kr 형식 탭 게시판) ───────────── */
.latest{ width:100%; }   /* 폭은 .wrap 이 결정한다 */

.latest .news-tabs{
  display:flex; align-items:flex-end; gap:4px; margin:0; padding:0;
  justify-content:flex-start; flex-wrap:wrap;
  border-bottom:2px solid var(--brand);
}
.latest .news-tabs button{
  margin:0; border:1px solid var(--line); border-bottom:0; background:#e9edf3;
  border-radius:8px 8px 0 0; padding:12px 26px;
  font-size:15px; font-weight:500; color:#5b6472; letter-spacing:-.02em; transition:.18s;
}
.latest .news-tabs button:hover{ background:#dfe6ef; color:var(--brand); }
.latest .news-tabs button.on{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700;
}
.latest .lt-plus{
  margin-left:auto; width:46px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0;
  background:#e9edf3; color:#6b7280; font-size:21px; line-height:1; transition:.18s;
}
.latest .lt-plus:hover{ background:#dfe6ef; color:var(--brand); }

.latest .news-panel{
  background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 12px 12px; padding:34px 38px 28px;
  box-shadow:0 8px 24px rgba(15,35,64,.06);
}

/* 대표글 */
.latest .lt-head{ display:block; padding-bottom:22px; border-bottom:1px solid var(--line); }
.latest .lt-head strong{
  display:block; font-size:19px; font-weight:700; color:#111827;
  letter-spacing:-.02em; line-height:1.5; transition:color .18s;
}
.latest .lt-head:hover strong{ color:var(--brand); }
.latest .lt-ex{
  margin-top:10px; font-size:16px; color:#6b7280; line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* 나머지 목록 */
.latest .lt-list{ margin-top:14px; }
.latest .lt-list li{ border-bottom:1px dashed #e8ebf0; }
.latest .lt-list li:last-child{ border-bottom:0; }
.latest .lt-list a{ display:flex; align-items:center; gap:16px; padding:13px 2px; transition:padding .18s; }
.latest .lt-list a:hover{ padding-left:8px; }
.latest .lt-list a:hover .t{ color:var(--brand); }
.latest .lt-list .t{
  flex:1; min-width:0; font-size:16.5px; color:#3f4855; transition:color .18s;
  position:relative; padding-left:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.latest .lt-list .t::before{
  content:'·'; position:absolute; left:2px; top:-1px; color:#9aa4b2; font-weight:700;
}
.latest .lt-list .d{ flex:0 0 auto; font-size:13px; color:#98a1ae; }

.latest .lt-new{
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; color:#e8453c;
}
.latest .lt-foot{ margin-top:18px; text-align:right; }
.latest .lt-foot a{ font-size:13.5px; font-weight:600; color:var(--brand); }
.latest .lt-foot a:hover{ text-decoration:underline; }
.latest .news-empty{ padding:52px 0; text-align:center; color:#98a1ae; }

@media (max-width:900px){
  .latest .news-tabs{ overflow-x:auto; flex-wrap:nowrap; }
  .latest .news-tabs button{ padding:10px 15px; font-size:13.5px; white-space:nowrap; }
  .latest .lt-plus{ display:none; }
  .latest .news-panel{ padding:22px 18px 20px; border-radius:0 0 10px 10px; }
  .latest .lt-head strong{ font-size:16.5px; }
  .latest .lt-ex{ font-size:13.5px; }
  .latest .lt-list .d{ display:none; }
}

/* ── 콘텐츠 폭 통일 ───────────────────────────────────────
   로고 시작점 ~ 메인메뉴 끝 지점(= .wrap 의 안쪽 폭)에 모든 콘텐츠를 맞춘다.
   .wrap 밖에 있던 마퀴·배너는 같은 최대폭/좌우 여백을 직접 부여한다. */

.partner-rows,
.mbnr{
  width:100%; max-width:var(--wrap);
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
}

/* ── 수소충전 가능지역 · 데일리 리포트 · 행사안내 캘린더 ── */
.sec.white{ background:#fff; }

.info3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.i3{
  display:flex; flex-direction:column;
  background:#f8fafc; border:1px solid #e6eaf0; border-radius:16px;
  padding:30px 28px 26px; transition:.28s;
}
.i3:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(15,35,64,.12); border-color:#cfdcef; }
.i3-hd h3{ font-size:21px; font-weight:700; letter-spacing:-.02em; color:#111827; }
.i3-hd p{ margin-top:8px; font-size:15.5px; color:var(--text-sub); line-height:1.65; }
.i3-bd{ flex:1; margin:22px 0 20px; }
.i3-empty{ padding:34px 0; text-align:center; color:#98a1ae; font-size:14px; }
.i3-btn{
  align-self:flex-start; font-size:13.5px; font-weight:700; color:var(--brand);
  padding:10px 20px; border:1px solid #cfdcef; border-radius:999px; background:#fff; transition:.2s;
}
.i3-btn:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ① 지도 */
.i3-map svg{ display:block; width:100%; max-height:236px; margin:0 auto; }

/* ② 데일리 리포트 */
.dr-date{
  display:flex; align-items:center; gap:9px; padding:12px 16px; border-radius:10px;
  background:#fff; border:1px solid #e6eaf0;
  font-size:14.5px; font-weight:700; color:#1f2937; letter-spacing:-.02em;
}
.dr-dot{ width:8px; height:8px; border-radius:50%; background:#e8453c; flex:0 0 auto; animation:drPulse 1.8s ease-in-out infinite; }
@keyframes drPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.35); } }
.dr-list{ margin-top:14px; }
.dr-list li{ border-bottom:1px dashed #e8ebf0; }
.dr-list li:last-child{ border-bottom:0; }
.dr-list a{ display:flex; align-items:center; gap:12px; padding:11px 2px; transition:.18s; }
.dr-list a:hover .t{ color:var(--brand); }
.dr-list .t{ flex:1; min-width:0; font-size:16px; color:#3f4855; transition:color .18s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-list .d{ flex:0 0 auto; font-size:12.5px; color:#98a1ae; }

/* ③ 캘린더 */
.cal-top{ text-align:center; margin-bottom:12px; }
.cal-top strong{ font-size:19px; font-weight:800; color:var(--brand); letter-spacing:.02em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.cal-wd{ font-size:11.5px; font-weight:700; color:#8b95a4; padding:6px 0 8px; }
.cal-wd.sun{ color:#e8453c; } .cal-wd.sat{ color:#2f6fd0; }
.cal-d{
  position:relative; font-size:13px; color:#3f4855; padding:8px 0 10px;
  border-radius:8px; line-height:1;
}
.cal-d.sun{ color:#e8453c; } .cal-d.sat{ color:#2f6fd0; }
.cal-d.empty{ visibility:hidden; }
.cal-d.today{ background:var(--brand); color:#fff; font-weight:700; }
.cal-d.has::after{
  content:''; position:absolute; left:50%; bottom:3px; width:4px; height:4px;
  margin-left:-2px; border-radius:50%; background:#e8453c;
}
.cal-d.today.has::after{ background:#fff; }
.cal-list{ margin-top:16px; padding-top:14px; border-top:1px solid #e6eaf0; }
.cal-list li + li{ margin-top:2px; }
.cal-list a{ display:flex; align-items:center; gap:10px; padding:7px 2px; transition:.18s; }
.cal-list a:hover .t{ color:var(--brand); }
.cal-list .dt{
  flex:0 0 auto; font-size:11.5px; font-weight:700; color:#fff; background:var(--brand-2);
  padding:3px 8px; border-radius:5px; letter-spacing:.02em;
}
.cal-list .t{ flex:1; min-width:0; font-size:15px; color:#3f4855; transition:color .18s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:1200px){ .info3{ grid-template-columns:1fr; } .i3-map svg{ max-height:280px; } }
@media (max-width:900px){ .i3{ padding:24px 20px 22px; } .i3-hd h3{ font-size:18px; } }

/* ── 02 섹션: 최신게시물 50 : 협회소개 50 ─────────────────── */
.news2{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch; }
.news2-l, .news2-r{ display:flex; flex-direction:column; min-width:0; }

.col-hd{ margin-bottom:22px; }
.col-hd h2{
  font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.15;
  font-family:'Poppins','Pretendard','Noto Sans KR',sans-serif;
}
.col-hd p{ margin-top:8px; font-size:16.5px; color:var(--text-sub); letter-spacing:-.02em; }

/* 절반 폭에 탭 5개가 들어가도록 압축 + 패널이 남는 높이를 채움 */
.news2 .latest{ flex:1; display:flex; flex-direction:column; }
.news2 .latest .news-tabs button{ padding:11px 14px; font-size:15px; }
.news2 .latest .news-panel{ padding:26px 26px 22px; }
.news2 .latest .news-panel.on{ display:flex; flex-direction:column; flex:1; }
.news2 .latest .lt-head strong{ font-size:19px; }
.news2 .latest .lt-foot{ margin-top:auto; padding-top:16px; }
.news2 .latest .news-empty{ padding:36px 0; }

/* ── 협회소개 카드 ────────────────────────────────────────── */
.abx{
  position:relative; flex:1; overflow:hidden; border-radius:18px; color:#fff;
  background:linear-gradient(145deg,#0b1c34 0%,#123566 52%,#0d2445 100%);
  padding:46px 44px 40px;
  box-shadow:0 18px 44px rgba(11,28,52,.28);
  display:flex; flex-direction:column; justify-content:center;
}
.abx-fx{ position:absolute; inset:0; pointer-events:none; }
.abx-fx svg{ position:absolute; right:-14%; top:-12%; width:124%; height:124%; }

.ab-glow{ transform-box:view-box; transform-origin:330px 120px; animation:abBreath 9s ease-in-out infinite; }
@keyframes abBreath{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.14); } }

.ab-hex{ transform-box:view-box; transform-origin:230px 230px; animation:abHex 30s linear infinite; }
@keyframes abHex{ to{ transform:rotate(360deg); } }

.ab-orbit{ transform-box:view-box; transform-origin:230px 230px; animation:abSpin 36s linear infinite; }
@keyframes abSpin{ to{ transform:rotate(360deg); } }

.abx-in{ position:relative; z-index:1; }
.abx-eyebrow{
  display:inline-block; margin-bottom:16px;
  font-size:12px; font-weight:700; letter-spacing:.22em; color:#8fd0ff;
}
.abx-in h3{ font-size:27px; font-weight:700; line-height:1.42; letter-spacing:-.03em; }
.abx-in h3 b{ color:#9ad4ff; }
.abx-in p{ margin-top:16px; font-size:16px; line-height:1.85; color:rgba(255,255,255,.76); }

.abx-stat{
  display:flex; align-items:flex-end; gap:26px; margin:28px 0 26px; padding:20px 0;
  border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16);
}
.abx-num strong{ font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }
.abx-num em{ font-style:normal; font-size:22px; font-weight:700; color:#8fd0ff; }
.abx-num span{ display:block; margin-top:6px; font-size:13px; color:rgba(255,255,255,.62); }
.abx-sig{ margin-left:auto; text-align:right; }
.abx-sig b{ display:block; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; color:rgba(143,208,255,.55); }
.abx-sig b sub{ font-size:.58em; }
.abx-sig span{ display:block; margin-top:7px; font-size:10.5px; letter-spacing:.12em; line-height:1.6; color:rgba(255,255,255,.42); }

.abx-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.abx-btn{
  padding:12px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.32);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; transition:.22s;
}
.abx-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.62); }
.abx-btn.primary{ background:#fff; color:var(--brand); border-color:#fff; }
.abx-btn.primary:hover{ background:#dbe9ff; }

@media (prefers-reduced-motion:reduce){
  .ab-glow,.ab-hex,.ab-orbit{ animation:none !important; }
}
@media (max-width:1200px){
  .news2{ grid-template-columns:1fr; gap:30px; }
  .abx{ padding:36px 30px 32px; }
}
@media (max-width:900px){
  .col-hd h2{ font-size:26px; }
  .abx-in h3{ font-size:21px; }
  .abx-num strong{ font-size:36px; }
  .abx-stat{ gap:16px; }
  .abx-sig b{ font-size:24px; }
}

/* ── 시·도 타일 지도 (수소충전 가능 지역) ─────────────────── */
.i3-map{ display:flex; align-items:center; justify-content:center; }
.kmap{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(8, 33px);
  gap:5px;
  width:100%; max-width:320px;
  padding:14px 12px;
  border-radius:14px;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(47,111,208,.10), transparent 65%),
    #eef3fa;
  border:1px solid #dde6f2;
}
.kmap a{
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  background:rgba(47,111,208,.12); border:1px solid rgba(47,111,208,.22);
  color:#2b4a7d; font-size:12.5px; font-weight:700; letter-spacing:-.04em;
  line-height:1.15; text-align:center; padding:2px;
  transition:background .18s, color .18s, transform .18s, box-shadow .18s, border-color .18s;
}
.kmap a span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.kmap a:hover{
  background:var(--brand-2); border-color:var(--brand-2); color:#fff;
  transform:translateY(-2px); box-shadow:0 6px 15px rgba(47,111,208,.30);
}
.kmap-cap{ margin-top:12px; text-align:center; font-size:12.5px; color:#8b95a4; }

@media (max-width:1200px){
  .kmap{ max-width:360px; grid-template-rows:repeat(8, 36px); }
}
@media (max-width:420px){
  .kmap{ grid-template-rows:repeat(8, 30px); }
  .kmap a{ font-size:11.5px; }
}

/* ── 동영상 카드 + 재생 레이어 ─────────────────────────────── */
.media > a, .media > button{
  display:block; width:100%; padding:0; border:0; text-align:left;
  background:#0e0e0e; border-radius:14px; overflow:hidden;
  color:inherit; font:inherit; cursor:pointer; transition:transform .3s, box-shadow .3s;
}
.media > a:hover, .media > button:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.media .thumb{ display:block; position:relative; aspect-ratio:16/9; background:#151515 center/cover; }
.media .thumb.no-vid::after{ display:none; }
.media .cap{ display:block; padding:20px 22px 24px; }
.media-empty{ padding:64px 0; text-align:center; color:rgba(255,255,255,.45); font-size:15px; }

.vbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }
.vbox[hidden]{ display:none; }
.vbox-bg{ position:absolute; inset:0; background:rgba(4,10,20,.88); backdrop-filter:blur(4px); }
.vbox-in{ position:relative; width:100%; max-width:1000px; }
.vbox-hd{ display:flex; align-items:center; gap:16px; margin-bottom:12px; color:#fff; }
.vbox-hd strong{ flex:1; min-width:0; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.vbox-x{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  font-size:26px; line-height:1; transition:.2s;
}
.vbox-x:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.7); }
.vbox-frame{
  position:relative; aspect-ratio:16/9; background:#000;
  border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.vbox-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){ .vbox{ padding:16px; } .vbox-hd strong{ font-size:14.5px; } }

/* ── 헤더 통합 로그인창 ───────────────────────────────────── */
.hlog-wrap{ position:relative; display:inline-flex; }
#header .util .hlog-toggle{
  display:inline-flex; align-items:center; gap:5px;
  padding:0 11px; line-height:1; cursor:pointer;
  font-size:12.5px; font-weight:600; color:#fff;
  background:none; border:0; border-left:1px solid rgba(255,255,255,.22);
  transition:color .2s;
}
.hlog-wrap:first-child .hlog-toggle{ border-left:0; }
#header .util .hlog-toggle i{ font-style:normal; font-size:9px; transition:transform .2s; }
#header .util .hlog-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }
#header.solid .util .hlog-toggle{ color:var(--brand); border-left-color:var(--line); }

.hlog{
  position:absolute; top:calc(100% + 12px); right:0; z-index:1200;
  width:272px; padding:18px; border-radius:12px; text-align:left;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(10,20,40,.20);
}
.hlog[hidden]{ display:none; }
.hlog::before{
  content:''; position:absolute; top:-7px; right:26px; width:12px; height:12px;
  background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.hlog input[type=text], .hlog input[type=password]{
  width:100%; margin-bottom:8px; padding:11px 12px;
  border:1px solid #d5dae2; border-radius:8px; background:#fff;
  font:inherit; font-size:13.5px; font-weight:400; color:#111827;
}
.hlog input:focus{ outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(47,111,208,.14); }
.hlog .hlog-go{
  width:100%; margin-top:2px; padding:11px; border:0; border-radius:8px;
  background:var(--brand); color:#fff; font-size:14px; font-weight:700; transition:.2s;
}
.hlog .hlog-go:hover{ background:#12306f; }
.hlog-links{ display:flex; justify-content:center; gap:12px; margin-top:12px; font-size:12px; }
.hlog-links a{ color:#6b7280; }
.hlog-links a:hover{ color:var(--brand); }

/* ── 협회갤러리 ──────────────────────────────────────────── */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:16px; }
.gal > a{
  position:relative; display:block; overflow:hidden; border-radius:14px;
  background:#151515; transition:box-shadow .3s;
}
.gal > a:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
.gal > a:nth-child(4){ grid-column:3 / 5; }
.gal > a:hover{ box-shadow:0 16px 34px rgba(0,0,0,.5); }

.gal-ph{
  position:absolute; inset:0; background:#151515 center/cover no-repeat;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.gal > a:hover .gal-ph{ transform:scale(1.07); }
.gal-ph.no-img{
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(47,111,208,.30), transparent 70%),
    #12203a;
}
.gal-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; display:block;
  padding:34px 20px 18px;
  background:linear-gradient(180deg, rgba(4,10,20,0) 0%, rgba(4,10,20,.55) 42%, rgba(4,10,20,.90) 100%);
}
.gal-cap strong{
  display:block; font-size:17px; font-weight:600; color:#fff; letter-spacing:-.02em;
  line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gal-cap span{ display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.6); }
.gal > a:nth-child(1) .gal-cap{ padding:44px 26px 24px; }
.gal > a:nth-child(1) .gal-cap strong{ font-size:20px; white-space:normal; }

@media (max-width:1200px){
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gal > a:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
  .gal > a:nth-child(4){ grid-column:auto; }
}
@media (max-width:640px){
  .gal{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .gal > a:nth-child(1){ grid-column:auto; grid-row:auto; }
  .gal > a:nth-child(1) .gal-cap strong{ font-size:17px; }
}

/* ── 어두운 섹션이 연달아 올 때 경계 만들기 ───────────────── */
.sec.dark + .sec.dark, .sec.navy + .sec.navy,
.sec.black + .sec.black, .sec.navy + .sec.black,
.sec.black + .sec.navy, .sec.dark + .sec.black,
.sec.black + .sec.dark{
  border-top:1px solid rgba(255,255,255,.10);
}

/* 글이 없어 비어 있는 섹션은 높이를 줄인다 */
.sec.sec-empty{ padding:82px 0; }
.sec.sec-empty .con_title{ margin-bottom:26px; }
.sec.sec-empty .media-empty{ padding:26px 0; }
.sec.sec-empty .news-foot{ margin-top:22px; }

/* ══ 협회소개(About) 페이지 ══════════════════════════════ */
.abt{ }

/* ① 스테이트먼트 밴드 */
.abt-band{
  position:relative; overflow:hidden; border-radius:20px; color:#fff;
  background:linear-gradient(135deg,#0b1c34 0%,#123566 55%,#0d2445 100%);
  padding:64px 60px; margin-bottom:80px;
  box-shadow:0 20px 48px rgba(11,28,52,.24);
}
.abt-band-fx{ position:absolute; inset:0; pointer-events:none; }
.abt-band-fx svg{ position:absolute; right:-6%; top:-30%; width:62%; height:180%; }
.abt-net line{ stroke:#8fd0ff; stroke-opacity:.22; stroke-width:1.2; }
.abt-net circle{ fill:#bfe4ff; fill-opacity:.22; stroke:#cfe9ff; stroke-opacity:.45; stroke-width:1.2; }
.abt-net .n1{ animation:abtPulse 4.5s ease-in-out infinite; }
.abt-net .n2{ animation:abtPulse 4.5s ease-in-out -1.5s infinite; }
.abt-net .n3{ animation:abtPulse 4.5s ease-in-out -3s infinite; }
@keyframes abtPulse{ 0%,100%{ fill-opacity:.18; r:9; } 50%{ fill-opacity:.5; r:13; } }
.abt-spin{ transform-box:view-box; transform-origin:300px 300px; animation:abtSpin 44s linear infinite; }
@keyframes abtSpin{ to{ transform:rotate(360deg); } }

.abt-band-in{ position:relative; z-index:1; max-width:760px; }
.abt-eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.24em; color:#8fd0ff; margin-bottom:18px; }
.abt-band h2{ font-size:38px; font-weight:800; line-height:1.35; letter-spacing:-.03em; }
.abt-band h2 b{ color:#9ad4ff; }
.abt-band p{ margin-top:20px; font-size:18px; line-height:1.9; color:rgba(255,255,255,.80); }

/* 공통 섹션 머리 */
.abt-hd{ margin-bottom:38px; }
.abt-hd span{ display:block; font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--brand-2); margin-bottom:10px; }
.abt-hd h3{ font-size:33px; font-weight:800; letter-spacing:-.03em; color:#0f172a; }
.abt-hd p{ margin-top:10px; font-size:17px; color:var(--text-sub); }
.abt-sec{ margin-bottom:80px; }

/* ② 활동취지 카드 */
.abt-purpose{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:pp; }
.abt-purpose > li{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:34px 30px 30px; transition:.28s; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:16px;
}
.abt-purpose > li::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--brand-2),#8fd0ff); transform:scaleX(0);
  transform-origin:left; transition:transform .35s;
}
.abt-purpose > li:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(15,35,64,.12); border-color:#cfdcef; }
.abt-purpose > li:hover::after{ transform:scaleX(1); }
.abt-purpose .np{
  position:absolute; right:24px; top:20px;
  font-size:40px; font-weight:800; color:#eef3fa; letter-spacing:-.04em; line-height:1;
}
.abt-purpose .ic{
  grid-column:1; grid-row:1; width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8);
}
.abt-purpose .ic svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.7; }
.abt-purpose h4{ position:relative; grid-column:2; grid-row:1; padding-right:52px; font-size:22px; font-weight:800; letter-spacing:-.03em; color:#0f172a; }
.abt-purpose ul{ grid-column:1 / -1; grid-row:2; margin-top:20px; }
.abt-purpose ul li{
  position:relative; padding-left:14px; margin-top:8px;
  font-size:16.5px; line-height:1.7; color:#55606f;
}
.abt-purpose ul li::before{
  content:''; position:absolute; left:0; top:9px; width:5px; height:5px;
  border-radius:50%; background:var(--brand-2);
}

/* ③ 협회 개요 */
.abt-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px; }
.abt-info > div{ display:flex; gap:20px; padding:18px 4px; border-bottom:1px solid var(--line); }
.abt-info dt{ flex:0 0 130px; font-size:16px; font-weight:700; color:#3f4855; }
.abt-info dd{ margin:0; flex:1; min-width:0; font-size:17px; color:#55606f; line-height:1.7; }
.abt-info dd a{ color:var(--brand); font-weight:600; }
.abt-info dd a:hover{ text-decoration:underline; }
.abt-info .full{ grid-column:1 / -1; }

@media (max-width:1200px){
  .abt-purpose{ grid-template-columns:repeat(2,1fr); }
  .abt-band-fx svg{ width:80%; opacity:.7; }
}
@media (max-width:900px){
  .abt-band{ padding:40px 26px; margin-bottom:56px; border-radius:16px; }
  .abt-band h2{ font-size:25px; }
  .abt-band p{ font-size:14.5px; }
  .abt-band-fx{ display:none; }
  .abt-hd h3{ font-size:23px; }
  .abt-sec{ margin-bottom:56px; }
  .abt-purpose{ grid-template-columns:1fr; }
  .abt-info{ grid-template-columns:1fr; gap:0; }
  .abt-info > div{ flex-direction:column; gap:6px; }
  .abt-info dt{ flex:none; }
}

/* ══ 줄바꿈 · 가독성 ═══════════════════════════════════════
   body 에 word-break:keep-all 을 걸어 한글이 어절 단위로만 끊기게 했다.
   일본어·중국어는 띄어쓰기가 없어 keep-all 이면 줄이 아예 안 바뀌므로 되돌린다. */
html[lang="ja"] body, html[lang="zh"] body{ word-break:normal; }

/* 제목: 마지막 줄에 한 단어만 남는 것을 막는다(지원 브라우저) */
#hero h2, .con_title h2, .col-hd h2, .abt-band h2, .abt-hd h3,
.sub-hero h1, .abt-purpose h4, .i3-hd h3, .abx-in h3{
  text-wrap:balance;
}
/* 본문: 고아 단어(orphan) 방지 */
.sub-body p, .sub-body li, .abt-band p, .abt-purpose ul li, .abt-info dd,
.i3-hd p, .con_title p, .col-hd p, .abx-in p, .latest .lt-ex{
  text-wrap:pretty;
}

/* 끊기면 어색한 짧은 단위는 통째로 유지 */
.sub-hero .crumb, .abt-info dt, .cal-list .dt, .lt-new,
.news-list .d, .lt-list .d, .dr-list .d{ white-space:nowrap; }

/* 표·긴 URL 이 레이아웃을 밀어내지 않도록 */
.sub-body table{ table-layout:auto; }
.sub-body td, .sub-body th, .post-body td, .post-body th{ word-break:break-word; }
.post-body a, .page-body a, .sub-body a{ overflow-wrap:anywhere; }

/* ── 협회소개: 소개 카드 ─────────────────────────────────── */
.abt-card{
  position:relative; border:2px solid var(--brand-2); border-radius:18px;
  padding:44px 44px 38px; margin-bottom:26px; background:#fff; text-align:center;
}
.abt-card > .cap{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:#fff; padding:0 22px; white-space:nowrap;
  font-size:26px; font-weight:800; color:var(--brand); letter-spacing:-.02em;
}
.abt-card h4{ font-size:24px; font-weight:800; color:#111827; letter-spacing:-.03em; }
.abt-card .sub{ margin-top:12px; font-size:17px; color:#55606f; line-height:1.8; }
.abt-card .sub b{ color:var(--brand); font-weight:700; }
.abt-card .div{ height:1px; background:var(--line); margin:30px auto; max-width:520px; }
.abt-card .pp{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
.abt-card .pp span{
  font-size:15.5px; color:#3f4855; background:#eef3fa;
  border:1px solid #dbe5f2; border-radius:999px; padding:8px 18px;
}

/* ── 협회소개: 중점 전략 ─────────────────────────────────── */
.abt-strat{ display:flex; flex-direction:column; gap:18px; }
.abt-strat > li{
  display:flex; align-items:stretch; gap:0;
  background:#f6f8fb; border-radius:999px 22px 22px 999px; overflow:hidden;
  transition:.28s;
}
.abt-strat > li:hover{ transform:translateX(6px); box-shadow:0 12px 28px rgba(15,35,64,.10); }
.abt-strat .badge{
  flex:0 0 172px; display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:50%; margin:8px; padding:14px;
  color:#fff; font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.03em;
  aspect-ratio:1/1;
}
.abt-strat > li:nth-child(odd)  .badge{ background:linear-gradient(140deg,#1c4a9c,#123566); }
.abt-strat > li:nth-child(even) .badge{ background:linear-gradient(140deg,#8dc63f,#6aa62c); }
.abt-strat .body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:26px 34px 26px 10px; }
.abt-strat .en{ font-size:21px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; }
.abt-strat > li:nth-child(odd)  .en{ color:var(--brand); }
.abt-strat > li:nth-child(even) .en{ color:#6aa62c; }
.abt-strat .body p{ font-size:16.5px; line-height:1.8; color:#4b5563; }

/* ── 협회소개: 추진 목표 ─────────────────────────────────── */
.abt-goal-top{ text-align:center; margin-bottom:8px; }
.abt-goal-top .chip{
  display:inline-block; padding:13px 34px; border-radius:999px;
  border:2px dotted var(--brand-2); color:var(--brand); background:#fff;
  font-size:20px; font-weight:800; letter-spacing:-.03em;
}
.abt-goal-arrow{ display:block; margin:14px auto 22px; width:46px; height:44px; fill:#cfe0f5; }
.abt-goal{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.abt-goal > li{ border:1px solid #cfdcef; border-radius:14px; overflow:hidden; background:#fff; }
.abt-goal .hd{
  background:linear-gradient(135deg,#1c4a9c,#123566); color:#fff;
  padding:15px 24px; font-size:18px; font-weight:700; letter-spacing:-.03em;
}
.abt-goal ul{ padding:22px 26px 24px; }
.abt-goal ul li{
  position:relative; padding-left:15px; margin-top:9px;
  font-size:16px; line-height:1.7; color:#4b5563;
}
.abt-goal ul li:first-child{ margin-top:0; }
.abt-goal ul li::before{
  content:''; position:absolute; left:0; top:10px; width:5px; height:5px;
  border-radius:50%; background:var(--brand-2);
}
.abt-goal .core{
  grid-column:1 / -1; display:flex; justify-content:center;
  border:0; background:none; border-radius:0;
}
.abt-goal .core svg{ width:196px; height:196px; }
.abt-goal .core .rot{ transform-box:view-box; transform-origin:100px 100px; animation:abtSpin 30s linear infinite; }
.abt-goal .core text{ font-weight:700; fill:#123566; }

@media (max-width:900px){
  .abt-card{ padding:36px 22px 30px; }
  .abt-card > .cap{ font-size:19px; padding:0 14px; white-space:normal; width:88%; text-align:center; }
  .abt-card h4{ font-size:19px; }
  .abt-card .sub{ font-size:15.5px; }
  .abt-strat > li{ flex-direction:column; border-radius:18px; }
  .abt-strat .badge{ flex:none; aspect-ratio:auto; width:auto; border-radius:14px; padding:16px; margin:10px 10px 0; }
  .abt-strat .body{ padding:18px 22px 22px; }
  .abt-strat .en{ font-size:18px; }
  .abt-goal{ grid-template-columns:1fr; }
  .abt-goal-top .chip{ font-size:16px; padding:11px 20px; }
}

/* ══ 인사말 ═══════════════════════════════════════════════ */
.gr-top{ display:grid; grid-template-columns:320px 1fr; gap:52px; align-items:start; }
.gr-photo{ border-radius:0; overflow:visible; box-shadow:none; }
.gr-photo img{ display:block; width:100%; height:auto; }
.gr-quote{ font-size:31px; font-weight:800; line-height:1.5; letter-spacing:-.035em; color:#0f2340; }
.gr-quote b{ color:var(--brand-2); }
.gr-quote::before{
  content:''; display:block; width:54px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand-2),#8fd0ff); margin-bottom:24px;
}
.gr-body p{ margin:0 0 17px; font-size:17px; line-height:1.95; color:#4b5563; }
.gr-body p strong{ color:#0f2340; font-weight:700; }
.gr-sign{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); text-align:right; }
.gr-sign span{ display:block; font-size:15px; color:var(--text-sub); }
.gr-sign b{ display:inline-block; margin-top:8px; font-size:22px; font-weight:800; color:#0f2340; letter-spacing:-.03em; }

/* ══ 협회조직 ═════════════════════════════════════════════ */
.org{ text-align:center; }
.org-row{ display:flex; justify-content:center; align-items:stretch; gap:14px; flex-wrap:wrap; }
.org-node{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:15px 34px; border-radius:999px; font-size:17px; font-weight:700; letter-spacing:-.03em;
  background:linear-gradient(135deg,#1c4a9c,#123566); color:#fff; min-width:150px;
}
.org-node.top{
  width:150px; height:150px; border-radius:50%; flex-direction:column; gap:4px;
  font-size:21px; padding:0; background:linear-gradient(140deg,#123566,#0b2547);
}
.org-node.top small{ font-size:11px; letter-spacing:.16em; opacity:.75; font-weight:600; }
.org-node.sky{ background:linear-gradient(135deg,#2f8fe0,#1c6fc4); }
.org-node.gray{ background:linear-gradient(135deg,#9aa4b2,#7c8794); }
.org-node.pale{ background:linear-gradient(135deg,#7fb4e8,#5f97d4); }
.org-line{ width:2px; height:34px; background:#c8d6e8; margin:0 auto; }
.org-aside{
  position:absolute; right:0; top:6px; text-align:center;
  border:2px solid var(--brand-2); border-radius:14px; padding:12px 22px; background:#fff;
}
.org-aside b{ display:block; font-size:16px; font-weight:700; color:var(--brand); }
.org-aside span{ display:block; margin-top:6px; font-size:14px; color:#55606f; }
.org-head{ position:relative; }
.org-branch{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:14px; text-align:left; }
.org-branch > div{ background:#f6f8fb; border:1px solid #dbe5f2; border-radius:14px; padding:22px 26px; }
.org-branch h4{ font-size:16px; font-weight:700; color:#fff; background:linear-gradient(135deg,#9aa4b2,#7c8794);
  display:inline-block; padding:8px 20px; border-radius:999px; margin-bottom:14px; }
.org-branch li{ position:relative; padding-left:14px; margin-top:7px; font-size:16px; color:#4b5563; }
.org-branch li::before{ content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--brand-2); }

/* ══ 협회운영방침 ═════════════════════════════════════════ */
.pol-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:64px; }
.pol-5 li{
  background:#fff; border:1px solid #cfdcef; border-radius:16px; padding:28px 20px; text-align:center;
  transition:.26s;
}
.pol-5 li:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(15,35,64,.12); }
.pol-5 .n{
  width:44px; height:44px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8); color:#fff; font-size:16px; font-weight:800;
}
.pol-5 h4{ font-size:19.5px; font-weight:800; color:#0f172a; letter-spacing:-.03em; }
.pol-5 p{ margin-top:10px; font-size:15px; line-height:1.65; color:#6b7280; }

.pol-task{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pol-task > div{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.pol-task .hd{ background:linear-gradient(135deg,#1c4a9c,#123566); color:#fff; padding:16px 24px; font-size:20px; font-weight:800; letter-spacing:-.03em; }
.pol-task ol{ padding:20px 24px 22px; counter-reset:t; }
.pol-task ol li{ position:relative; padding-left:30px; margin-top:10px; font-size:16px; line-height:1.7; color:#4b5563; }
.pol-task ol li:first-child{ margin-top:0; }
.pol-task ol li::before{
  counter-increment:t; content:counter(t);
  position:absolute; left:0; top:2px; width:21px; height:21px; border-radius:50%;
  background:#eef3fa; color:var(--brand); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ══ 오시는 길 ════════════════════════════════════════════ */
.loc{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:stretch; }
.loc-map{
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:#eef3fa; min-height:380px; position:relative;
}
.loc-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc-card{ background:#f6f8fb; border:1px solid #dbe5f2; border-radius:18px; padding:36px 34px; }
.loc-card h4{ font-size:22px; font-weight:800; color:#0f2340; letter-spacing:-.03em; margin-bottom:22px; }
.loc-card dl > div{ display:flex; gap:16px; padding:15px 0; border-top:1px solid #e2e8f2; }
.loc-card dl > div:first-of-type{ border-top:0; padding-top:0; }
.loc-card dt{ flex:0 0 74px; font-size:15px; font-weight:700; color:var(--brand); }
.loc-card dd{ margin:0; flex:1; min-width:0; font-size:16.5px; line-height:1.7; color:#3f4855; }

@media (max-width:1200px){
  .pol-5{ grid-template-columns:repeat(2,1fr); }
  .loc{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .gr-top{ grid-template-columns:1fr; gap:28px; }
  .gr-photo{ max-width:240px; }
  .gr-quote{ font-size:22px; }
  .gr-body p{ font-size:16px; }
  .org-node{ font-size:15px; padding:12px 20px; min-width:118px; }
  .org-node.top{ width:120px; height:120px; font-size:18px; }
  .org-aside{ position:static; margin:0 auto 20px; display:inline-block; }
  .org-branch{ grid-template-columns:1fr; gap:16px; }
  .pol-5{ grid-template-columns:1fr; }
  .pol-role{ padding:24px 22px; }
  .pol-task{ grid-template-columns:1fr; }
}

/* ══ 협회조직도 (SVG) ═════════════════════════════════════ */
.org2{ padding:8px 0 4px; }
.org-svg{ display:block; width:100%; max-width:950px; height:auto; margin:0 auto; }
.org-svg text{ font-family:'Pretendard','Noto Sans KR',sans-serif; letter-spacing:-.03em; }
.org-svg .t-w{ fill:#fff; font-weight:700; }
.org-svg .t-d{ fill:#4b5563; }
.org-svg .ln path{ stroke:#b9c7d9; stroke-width:2; fill:none; }

/* 좁은 화면에서는 SVG 글자가 읽히지 않으므로 목록으로 대체 */
.org-mo{ display:none; }
.org-mo-tree{ counter-reset:og; margin-bottom:26px; }
.org-mo-tree li{
  position:relative; padding:14px 16px 14px 52px; margin-bottom:10px;
  background:#f6f8fb; border:1px solid #dbe5f2; border-radius:12px;
}
.org-mo-tree li::before{
  counter-increment:og; content:counter(og);
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#1c4a9c,#123566); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.org-mo-tree li b{ font-size:17px; color:#0f2340; }
.org-mo-tree li span{ display:block; margin-top:4px; font-size:14.5px; color:#6b7280; }

@media (max-width:820px){
  .org-svg{ display:none; }
  .org-mo{ display:block; }
}

/* ══ 협회의 역할 — 타이틀 2개 + 각 설명 1줄 ═══════════════ */
.pol-role{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:64px; }
.pol-role .pr{
  position:relative; background:#f6f8fb; border:1px solid #dbe5f2;
  border-radius:18px; padding:34px 34px 30px; transition:.26s;
}
.pol-role .pr::before{
  content:''; position:absolute; left:0; top:26px; width:4px; height:38px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--brand-2),#1b4fa8);
}
.pol-role .pr:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(15,35,64,.10); border-color:#cfdcef; }
.pol-role .pr-hd{
  display:flex; align-items:flex-start; gap:12px;
  font-size:20px; font-weight:800; line-height:1.55; letter-spacing:-.03em; color:#0f172a;
}
.pol-role .dia{ flex:0 0 auto; margin-top:5px; width:22px; height:12px; }
.pol-role .dia svg{ display:block; width:22px; height:12px; fill:var(--brand-2); }
.pol-role .pr p{
  position:relative; margin:16px 0 0; padding:14px 0 0 16px;
  border-top:1px dashed #d5e0ee;
  font-size:17px; line-height:1.75; color:#55606f;
}
.pol-role .pr p::before{
  content:''; position:absolute; left:0; top:23px; width:6px; height:6px;
  background:#9bb6d8;
}

@media (max-width:1200px){ .pol-role{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .pol-role .pr{ padding:26px 22px 24px; }
  .pol-role .pr-hd{ font-size:17.5px; }
  .pol-role .pr p{ font-size:16px; }
}

/* ══ 회원가입안내 ═════════════════════════════════════════ */
.jg-hero{
  position:relative; overflow:hidden; border-radius:20px; color:#fff; text-align:center;
  background:linear-gradient(135deg,#0b1c34 0%,#123566 52%,#0d2445 100%);
  padding:62px 44px 58px; margin-bottom:60px;
  box-shadow:0 20px 48px rgba(11,28,52,.24);
}
.jg-hero-fx{ position:absolute; inset:0; pointer-events:none; opacity:.9; }
.jg-hero-fx svg{ position:absolute; inset:0; width:100%; height:100%; }
.jg-hero-fx .r1{ animation:jgRipple 6s ease-out infinite; }
.jg-hero-fx .r2{ animation:jgRipple 6s ease-out -2s infinite; }
.jg-hero-fx .r3{ animation:jgRipple 6s ease-out -4s infinite; }
@keyframes jgRipple{ 0%{ r:60; opacity:.55; } 100%{ r:260; opacity:0; } }
.jg-hero-in{ position:relative; z-index:1; }
.jg-hero .eb{ display:block; font-size:12px; font-weight:700; letter-spacing:.24em; color:#8fd0ff; margin-bottom:16px; }
.jg-hero h2{ font-size:36px; font-weight:800; line-height:1.38; letter-spacing:-.035em; }
.jg-hero h2 b{ color:#9ad4ff; }
.jg-hero p{ margin-top:18px; font-size:17px; line-height:1.85; color:rgba(255,255,255,.80); }

/* 회원의 자격 */
.jg-qual{
  position:relative; background:#fff; border:1px solid #cfdcef; border-radius:18px;
  padding:40px 44px; margin-bottom:26px;
}
.jg-qual .tag{
  display:inline-block; margin-bottom:18px; padding:7px 18px; border-radius:999px;
  background:#eef3fa; border:1px solid #dbe5f2;
  font-size:14px; font-weight:700; color:var(--brand); letter-spacing:-.02em;
}
.jg-qual p{ font-size:21px; font-weight:700; line-height:1.65; letter-spacing:-.03em; color:#0f172a; }

/* 연회비 카드 */
.jg-fee{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:26px; }
.jg-plan{
  position:relative; overflow:hidden; border-radius:20px; padding:38px 36px 34px;
  border:1px solid #cfdcef; background:#fff; transition:.28s;
}
.jg-plan::before{
  content:''; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,var(--brand-2),#8fd0ff);
}
.jg-plan.hi{ background:linear-gradient(150deg,#0d2445,#123566); border-color:#123566; color:#fff; }
.jg-plan.hi::before{ background:linear-gradient(90deg,#8fd0ff,#cfe9ff); }
.jg-plan:hover{ transform:translateY(-7px); box-shadow:0 20px 42px rgba(15,35,64,.16); }
.jg-plan .nm{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:#0f172a; }
.jg-plan.hi .nm{ color:#fff; }
.jg-plan .amt{ margin-top:14px; font-size:46px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--brand); }
.jg-plan.hi .amt{ color:#9ad4ff; }
.jg-plan .amt small{ font-size:19px; font-weight:700; margin-left:4px; }
.jg-plan .yr{ display:block; margin-top:8px; font-size:14px; color:var(--text-sub); }
.jg-plan.hi .yr{ color:rgba(255,255,255,.6); }
.jg-plan dl{ margin-top:26px; padding-top:22px; border-top:1px solid #e2e8f2; }
.jg-plan.hi dl{ border-top-color:rgba(255,255,255,.18); }
.jg-plan dl > div{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.jg-plan dt{ flex:0 0 96px; font-size:14.5px; font-weight:700; color:var(--brand-2); }
.jg-plan.hi dt{ color:#8fd0ff; }
.jg-plan dd{ margin:0; flex:1; min-width:0; font-size:16.5px; color:#3f4855; }
.jg-plan.hi dd{ color:rgba(255,255,255,.88); }

/* 납부 안내 */
.jg-note{ background:#f6f8fb; border:1px solid #dbe5f2; border-radius:18px; padding:32px 36px; margin-bottom:26px; }
.jg-note h4{ font-size:20px; font-weight:800; color:#0f172a; letter-spacing:-.03em; margin-bottom:14px; }
.jg-note li{ position:relative; padding-left:16px; margin-top:9px; font-size:17px; line-height:1.75; color:#4b5563; }
.jg-note li::before{ content:''; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--brand-2); }

/* 입금계좌 · 문의 */
.jg-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.jg-box{ border:1px solid #cfdcef; border-radius:18px; padding:32px 34px; background:#fff; }
.jg-box .ic{
  width:50px; height:50px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8);
}
.jg-box .ic svg{ width:25px; height:25px; stroke:#fff; fill:none; stroke-width:1.8; }
.jg-box h4{ font-size:20px; font-weight:800; color:#0f172a; letter-spacing:-.03em; margin-bottom:12px; }
.jg-box .big{ font-size:21px; font-weight:700; color:var(--brand); letter-spacing:-.02em; word-break:break-all; }
.jg-box .sm{ margin-top:8px; font-size:16px; color:#55606f; }
.jg-box .sm a{ color:var(--brand); font-weight:600; }
.jg-copy{
  margin-top:16px; padding:9px 18px; border-radius:999px; border:1px solid #cfdcef;
  background:#f6f8fb; font-size:14px; font-weight:700; color:var(--brand); transition:.2s;
}
.jg-copy:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.jg-copy.done{ background:#12803f; border-color:#12803f; color:#fff; }

.jg-cta{ margin-top:40px; text-align:center; }
.jg-cta a{
  display:inline-flex; align-items:center; gap:10px; padding:18px 44px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-2),#123566); color:#fff;
  font-size:19px; font-weight:800; letter-spacing:-.03em; transition:.25s;
  box-shadow:0 14px 30px rgba(28,74,156,.30);
}
.jg-cta a:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(28,74,156,.42); }

@media (max-width:900px){
  .jg-hero{ padding:40px 24px 38px; margin-bottom:44px; }
  .jg-hero h2{ font-size:24px; }
  .jg-hero p{ font-size:15.5px; }
  .jg-qual{ padding:28px 24px; }
  .jg-qual p{ font-size:17.5px; }
  .jg-fee, .jg-2{ grid-template-columns:1fr; }
  .jg-plan{ padding:30px 26px 28px; }
  .jg-plan .amt{ font-size:38px; }
  .jg-note{ padding:26px 22px; }
  .jg-cta a{ font-size:16.5px; padding:15px 30px; }
}

/* ══ 회원사 혜택 ══════════════════════════════════════════ */
.bf-hero{
  position:relative; overflow:hidden; border-radius:20px; color:#fff; text-align:center;
  background:linear-gradient(135deg,#0b1c34 0%,#123566 52%,#0d2445 100%);
  padding:58px 44px 54px; margin-bottom:56px; box-shadow:0 20px 48px rgba(11,28,52,.24);
}
.bf-hero-fx{ position:absolute; inset:0; pointer-events:none; }
.bf-hero-fx svg{ position:absolute; inset:0; width:100%; height:100%; }
.bf-hero-fx .hx{ animation:bfDrift 18s ease-in-out infinite; transform-box:view-box; transform-origin:center; }
.bf-hero-fx .hx2{ animation-duration:24s; animation-delay:-6s; }
.bf-hero-fx .hx3{ animation-duration:30s; animation-delay:-12s; }
@keyframes bfDrift{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-22px) rotate(9deg); } }
.bf-hero-in{ position:relative; z-index:1; }
.bf-hero .eb{ display:block; font-size:12px; font-weight:700; letter-spacing:.24em; color:#8fd0ff; margin-bottom:16px; }
.bf-hero h2{ font-size:36px; font-weight:800; line-height:1.38; letter-spacing:-.035em; }
.bf-hero h2 b{ color:#9ad4ff; }
.bf-hero p{ margin-top:18px; font-size:17px; line-height:1.85; color:rgba(255,255,255,.80); }

/* 방사형 다이어그램 */
.bf-wheel{ display:block; width:100%; max-width:720px; height:auto; margin:0 auto 64px; }
.bf-wheel text{ font-family:'Pretendard','Noto Sans KR',sans-serif; letter-spacing:-.03em; }
.bf-wheel .spoke{ stroke:#9bc3ea; stroke-width:2.5; fill:none; stroke-dasharray:10 12;
  animation:bfFlow 2.4s linear infinite; }
@keyframes bfFlow{ to{ stroke-dashoffset:-44; } }
.bf-wheel .nd circle{ transition:.3s; }
.bf-wheel .nd:hover circle.bg{ fill:#1c4a9c; }
.bf-wheel .pulse{ animation:bfPulse 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.bf-wheel .p2{ animation-delay:-.7s; } .bf-wheel .p3{ animation-delay:-1.4s; }
.bf-wheel .p4{ animation-delay:-2.1s; } .bf-wheel .p5{ animation-delay:-2.8s; }
@keyframes bfPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.07); opacity:.9; } }

/* 혜택 카드 */
.bf-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bf-list > li{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:34px 30px 30px; transition:.28s;
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:16px;
}
.bf-list > li::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--brand-2),#8fd0ff);
  transform:scaleX(0); transform-origin:left; transition:transform .38s;
}
.bf-list > li:hover{ transform:translateY(-7px); box-shadow:0 20px 40px rgba(15,35,64,.13); border-color:#cfdcef; }
.bf-list > li:hover::after{ transform:scaleX(1); }
.bf-list > li:hover .bf-ic svg{ transform:scale(1.12) rotate(-6deg); }
.bf-ic{
  grid-column:1; grid-row:1; width:56px; height:56px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8);
}
.bf-ic svg{ width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.7; transition:transform .35s; }
.bf-list h4{ grid-column:2; grid-row:1; font-size:21px; font-weight:800; color:#0f172a; letter-spacing:-.03em; }
.bf-list ul{ grid-column:1 / -1; grid-row:2; margin-top:20px; }
.bf-list ul li{ position:relative; padding-left:16px; margin-top:9px; font-size:16px; line-height:1.7; color:#4b5563; }
.bf-list ul li::before{
  content:''; position:absolute; left:0; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--brand-2);
}

@media (max-width:1200px){ .bf-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .bf-hero{ padding:38px 24px 36px; margin-bottom:40px; }
  .bf-hero h2{ font-size:24px; }
  .bf-hero p{ font-size:15.5px; }
  .bf-wheel{ margin-bottom:44px; }
  .bf-list{ grid-template-columns:1fr; }
  .bf-list > li{ padding:26px 22px 24px; }
  .bf-list h4{ font-size:18.5px; }
}

/* ══ 회원사 현황 ══════════════════════════════════════════ */
.ml-top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:32px; padding-bottom:24px; border-bottom:2px solid var(--brand);
}
.ml-count{ display:flex; align-items:baseline; gap:6px; }
.ml-count strong{ font-size:42px; font-weight:800; color:var(--brand); letter-spacing:-.04em; line-height:1; }
.ml-count em{ font-style:normal; font-size:22px; font-weight:800; color:var(--brand-2); }
.ml-count span{ margin-left:6px; font-size:17px; color:var(--text-sub); }

.ml-search{ position:relative; flex:0 0 320px; max-width:100%; }
.ml-search svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; stroke:#98a1ae; fill:none; stroke-width:2; stroke-linecap:round;
}
.ml-search input{
  width:100%; padding:13px 16px 13px 44px; border:1px solid #d5dae2; border-radius:999px;
  font:inherit; font-size:16px; color:#111827; background:#fff; transition:.18s;
}
.ml-search input:focus{ outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(47,111,208,.14); }

.ml-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.ml-grid > li[hidden]{ display:none; }
.ml-grid a, .ml-grid span.ml-logo{ display:block; }
.ml-grid > li > *{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  height:100%; padding:20px 16px 18px; background:#fff;
  border:1px solid var(--line); border-radius:14px; transition:.24s;
}
.ml-grid > li > a:hover{
  transform:translateY(-5px); border-color:var(--brand-2);
  box-shadow:0 14px 28px rgba(15,35,64,.13);
}
.ml-logo{
  display:flex !important; align-items:center; justify-content:center;
  width:100%; height:74px;
}
.ml-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.ml-name{
  font-size:14.5px; font-weight:600; color:#4b5563; text-align:center;
  line-height:1.4; letter-spacing:-.03em;
}
.ml-grid > li > a:hover .ml-name{ color:var(--brand); }
.ml-empty{ padding:70px 0; text-align:center; color:#98a1ae; font-size:17px; }

@media (max-width:1200px){ .ml-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){
  .ml-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .ml-count strong{ font-size:32px; }
  .ml-search{ flex:1 1 100%; }
  .ml-logo{ height:58px; }
  .ml-name{ font-size:13px; }
}
@media (max-width:560px){ .ml-grid{ grid-template-columns:repeat(2,1fr); } }

/* ══ 수소란? ══════════════════════════════════════════════ */
.hy .news-tabs{ display:flex; gap:0; margin:0 0 44px; border-bottom:2px solid var(--brand); flex-wrap:wrap; }
.hy .news-tabs button{
  margin:0; padding:16px 34px; border:1px solid var(--line); border-bottom:0;
  background:#f2f5f9; border-radius:10px 10px 0 0;
  font-size:17px; font-weight:700; color:#5b6472; letter-spacing:-.03em; transition:.2s;
}
.hy .news-tabs button + button{ margin-left:6px; }
.hy .news-tabs button:hover{ background:#e6edf6; color:var(--brand); }
.hy .news-tabs button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.hy-sec{ margin-bottom:60px; }
.hy-hd{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hy-hd .dia{ flex:0 0 auto; width:20px; height:11px; fill:var(--brand-2); }
.hy-hd h3{ font-size:26px; font-weight:800; color:#0f172a; letter-spacing:-.03em; }
.hy-sub{ margin:26px 0 14px; font-size:20px; font-weight:800; color:var(--brand); letter-spacing:-.03em; }

/* 원자 다이어그램 */
.hy-atom{ display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center; margin-bottom:16px; }
.hy-atom svg{ width:100%; height:auto; }
.hy-atom .orb{ transform-box:view-box; transform-origin:140px 140px; animation:hyOrb 9s linear infinite; }
.hy-atom .orb2{ animation-duration:13s; animation-direction:reverse; }
@keyframes hyOrb{ to{ transform:rotate(360deg); } }
.hy-atom .nuc{ animation:hyNuc 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes hyNuc{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }

/* 불릿 목록 */
.hy-ul li{ position:relative; padding-left:17px; margin-top:11px; font-size:17px; line-height:1.8; color:#4b5563; }
.hy-ul li:first-child{ margin-top:0; }
.hy-ul li::before{ content:''; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--brand-2); }
.hy-p{ font-size:17px; line-height:1.9; color:#4b5563; margin:0 0 15px; }

/* 정의형 카드 */
.hy-defs{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px; }
.hy-defs > div{ background:#f6f8fb; border:1px solid #dbe5f2; border-radius:14px; padding:24px 26px; }
.hy-defs dt{ font-size:18px; font-weight:800; color:var(--brand); letter-spacing:-.03em; margin-bottom:9px; }
.hy-defs dd{ margin:0; font-size:16.5px; line-height:1.75; color:#4b5563; }

/* 반응식 */
.hy-eq{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:14px 0; padding:16px 24px; border-radius:12px;
  background:linear-gradient(135deg,#0d2445,#123566); color:#fff;
}
.hy-eq b{ font-size:19px; font-weight:800; letter-spacing:.02em; font-family:'Poppins',sans-serif; }
.hy-eq span{ font-size:14.5px; color:rgba(255,255,255,.66); }

/* 데이터 표 */
.hy-tw{ overflow-x:auto; margin:6px 0 10px; border-radius:12px; border:1px solid var(--line); }
.hy-t{ width:100%; border-collapse:collapse; min-width:640px; background:#fff; }
.hy-t caption{ caption-side:top; text-align:left; padding:0 0 10px; font-size:16px; font-weight:700; color:var(--brand); }
.hy-t th, .hy-t td{ padding:13px 16px; border-bottom:1px solid #e8ecf3; font-size:15.5px; text-align:center; }
.hy-t thead th{ background:#eef3fa; color:#0f172a; font-weight:800; border-bottom:2px solid var(--brand-2); }
.hy-t tbody th{ background:#f8fafc; color:#3f4855; font-weight:700; text-align:center; }
.hy-t tbody tr:last-child th, .hy-t tbody tr:last-child td{ border-bottom:0; }
.hy-t tbody tr:hover td, .hy-t tbody tr:hover th{ background:#f2f7fd; }
.hy-src{ font-size:14px; color:#98a1ae; margin:6px 0 0; }

/* 공정 흐름 */
.hy-flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-top:10px; }
.hy-flow > li{
  flex:1 1 150px; position:relative; text-align:center;
  background:#fff; border:1px solid #cfdcef; border-radius:14px; padding:22px 16px 20px; margin:0 16px 14px 0;
}
.hy-flow > li:last-child{ margin-right:0; }
.hy-flow > li::after{
  content:''; position:absolute; right:-16px; top:50%; width:16px; height:2px; background:#cfdcef;
}
.hy-flow > li:last-child::after{ display:none; }
.hy-flow .n{
  width:34px; height:34px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),#1b4fa8); color:#fff; font-size:14px; font-weight:800;
}
.hy-flow h4{ font-size:17px; font-weight:800; color:#0f172a; letter-spacing:-.03em; }
.hy-flow p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:#6b7280; }

@media (max-width:1200px){ .hy-atom{ grid-template-columns:1fr; gap:28px; } .hy-defs{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .hy .news-tabs{ overflow-x:auto; flex-wrap:nowrap; }
  .hy .news-tabs button{ padding:13px 18px; font-size:14.5px; white-space:nowrap; }
  .hy-hd h3{ font-size:21px; }
  .hy-sub{ font-size:17.5px; }
  .hy-p, .hy-ul li{ font-size:16px; }
  .hy-eq{ padding:14px 18px; } .hy-eq b{ font-size:16px; }
  .hy-flow > li{ flex:1 1 100%; margin-right:0; }
  .hy-flow > li::after{ display:none; }
}

/* ══ 수소충전 가능 지역 ═══════════════════════════════════ */
.st-top{
  display:grid; grid-template-columns:minmax(300px,400px) 1fr; gap:44px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 36px; margin-bottom:34px;
}
.st-mapbox{ display:flex; justify-content:center; }
.st-map{ position:relative; width:100%; max-width:380px; }
.st-map img{ display:block; width:100%; height:auto; }
.st-hot{
  position:absolute; padding:0; border:0; background:transparent; border-radius:9px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.st-hot::after{
  content:''; position:absolute; inset:0; border-radius:9px;
  background:rgba(47,111,208,0); box-shadow:0 0 0 0 rgba(47,111,208,0); transition:background .15s, box-shadow .15s;
}
.st-hot:hover::after, .st-hot:focus-visible::after{ background:rgba(47,111,208,.20); box-shadow:0 0 0 2px var(--brand-2); }
.st-hot.on::after{ background:rgba(26,63,143,.30); box-shadow:0 0 0 2px var(--brand); }
.st-hot.off{ cursor:default; }
.st-hot.off::after{ background:transparent !important; box-shadow:none !important; }
.st-hn{
  position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); z-index:2;
  white-space:nowrap; background:#15172c; color:#fff; font-size:12.5px; font-weight:700; letter-spacing:-.03em;
  padding:4px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.st-hn b{ margin-left:3px; color:#7fc4ff; }
.st-hot:hover .st-hn, .st-hot:focus-visible .st-hn, .st-hot.on .st-hn{ opacity:1; }
.st-hot.off .st-hn{ opacity:0 !important; }

.st-bar{
  margin:0; padding:13px 18px; background:#f0f3f7; border-left:4px solid var(--brand); border-radius:0 8px 8px 0;
  font-size:20px; font-weight:800; color:#0f172a; letter-spacing:-.03em;
}
.st-guide{ margin:15px 2px 28px; font-size:16.5px; line-height:1.75; color:#55606f; word-break:keep-all; }
.st-lb{ margin:22px 2px 10px; font-size:16px; font-weight:700; color:#0f172a; }
.st-lb2{ margin-top:26px; }
.st-row{ display:flex; gap:8px; flex-wrap:wrap; }
.st-row select, .st-row input{
  flex:1 1 150px; min-width:0; height:46px; padding:0 14px; font-family:inherit; font-size:15.5px;
  color:#0f172a; background:#fff; border:1px solid #cfd8e3; border-radius:8px;
}
.st-row select:disabled{ background:#f4f6f9; color:#a8b0bb; }
.st-row select:focus, .st-row input:focus{ outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(47,111,208,.15); }
.st-btn{
  flex:0 0 auto; height:46px; padding:0 26px; border:0; border-radius:8px; background:var(--brand);
  color:#fff; font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer; transition:background .18s;
}
.st-btn:hover{ background:var(--brand-2); }
.st-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
}
.st-reset{
  height:40px; padding:0 20px; border:1px solid #cfd8e3; border-radius:999px; background:#fff;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--brand); cursor:pointer; transition:.18s;
}
.st-reset:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.st-count{ margin:0; font-size:16px; color:var(--text-sub); }
.st-count strong{ font-size:26px; font-weight:800; color:var(--brand); letter-spacing:-.03em; }

.st-t{ table-layout:fixed; min-width:1020px; }
.st-t th, .st-t td{ padding:12px 10px; font-size:15px; word-break:keep-all; }
.st-t thead th{ line-height:1.4; }
.st-sub{ display:block; margin-top:3px; font-size:12.5px; font-weight:600; color:#64748b; letter-spacing:-.04em; }
.st-t tbody tr[hidden]{ display:none; }
.st-t .st-no{ color:#98a1ae; font-size:14px; }
.st-t .st-rgc{ font-weight:600; }
.st-t .st-nm{ text-align:left; padding-left:14px; }
.st-t .st-ad{ text-align:left; padding-left:14px; font-size:14.5px; color:#55606f; }
.st-t .st-pr{ white-space:nowrap; font-weight:700; color:#0f172a; }
.st-t .st-hr{ font-size:14px; line-height:1.5; color:#55606f; }
.st-t .st-tel{ white-space:nowrap; font-size:14.5px; }
.st-t a{ color:var(--brand); font-weight:600; }
.st-t a:hover{ text-decoration:underline; }
.st-badge{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; }
.st-badge.ok{ background:#e8f6ed; color:#12803f; }
.st-badge.bus{ background:#eaf1fb; color:#1c4a9c; }
.st-badge.etc{ background:#f3f4f6; color:#6b7280; }

@media (max-width:1100px){
  .st-top{ grid-template-columns:1fr; gap:32px; padding:28px 24px; }
}
@media (max-width:900px){
  .st-bar{ font-size:18px; padding:11px 15px; }
  .st-guide{ margin:13px 2px 24px; font-size:15.5px; }
  .st-row select, .st-row input{ flex:1 1 100%; }
  .st-btn{ width:100%; }
}

/* ══ 유튜브 등 영상 임베드 ═══════════════════════════════ */
.yt-embed{
  position:relative; width:100%; max-width:980px; margin:8px auto 18px;
  aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden;
}
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@supports not (aspect-ratio:16/9){
  .yt-embed{ height:0; padding-bottom:56.25%; }
}
.yt-link{ margin:0 0 24px; text-align:center; font-size:15.5px; color:var(--text-sub); }
.yt-link a{ color:var(--brand); font-weight:600; word-break:break-all; }
.yt-link a:hover{ text-decoration:underline; }

/* ══ 게시판 목록 표 — 열 폭 고정 (번호·작성일이 두세 줄로 접히던 문제) ══ */
.board-tw{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.board-page .board-table{ table-layout:fixed; width:100%; min-width:880px; }
.board-page .board-table th,
.board-page .board-table td{ vertical-align:middle; }
.board-page .board-table .adm-col{ width:46px;  text-align:center; white-space:nowrap; }
.board-page .board-table .num-col{ width:86px;  text-align:center; white-space:nowrap; }
.board-page .board-table th.meta-col,
.board-page .board-table td.meta-col{ width:94px; text-align:center; white-space:nowrap; }
.board-page .board-table .date-col{ width:126px; }
.board-page .board-table .subj{
  width:auto; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.board-page .board-table .subj a{ display:inline; }
.board-page .board-table .subj .badge{ margin-left:6px; white-space:nowrap; }
@media (max-width:640px){
  .board-page .board-table{ min-width:720px; }
  .board-page .board-table .num-col{ width:70px; }
  .board-page .board-table th.meta-col,
  .board-page .board-table td.meta-col{ width:76px; }
  .board-page .board-table .date-col{ width:112px; }
}

/* ══ 콘텐츠 기본 글자 18px — 게시판까지 일괄 적용 ═══════════ */
/* main.css 가 게시판·본문에만 13~16px 을 따로 걸어둬서 본문 18px 이 적용되지 않았다. */
.board-page,
.post-view,
.container.board-page{ font-size:18px; }

/* 목록 표 */
.board-page .board-table th{ font-size:15.5px; letter-spacing:0; text-transform:none; }
.board-page .board-table td{ font-size:16.5px; }
.board-page .board-table .subj{ font-size:18px; }
.board-page .board-table .subj a{ font-size:18px; }
.board-page .badge{ font-size:13px; padding:2px 9px; }
.board-page .board-title{ font-size:32px; }
.board-page .board-desc{ font-size:18px; line-height:1.75; }
.board-page .search input, .board-page .search button{ font-size:16.5px; }
.board-page .pager a{ font-size:16.5px; }
.board-page .empty{ font-size:17px; }

/* 갤러리 카드 */
.photo-title{ font-size:17.5px; }
.photo-sub{ font-size:15px; }

/* 본문 보기 */
.post-view .crumbs{ font-size:15px; }
.post-view .post-head h1{ font-size:32px; line-height:1.35; }
.post-view .post-meta{ font-size:16px; }
.post-view .post-body{ font-size:18px; line-height:1.85; }
.post-view .post-body p,
.post-view .post-body li,
.post-view .post-body td,
.post-view .post-body div,
.post-view .post-body span{ font-size:inherit; }
.post-view .post-image figcaption{ font-size:15px; }
.post-view .attachments-block h3{ font-size:16px; letter-spacing:0; text-transform:none; }
.post-view .att-list li,
.post-view .att-list a{ font-size:16.5px; }
.post-view .comments li,
.post-view .comments p,
.post-view .comment-form input,
.post-view .comment-form textarea,
.post-view .comment-form button{ font-size:16.5px; }
.post-view .event-bar{ font-size:17px; }

/* 일정 달력 */
.calendar th{ font-size:15px; letter-spacing:0; text-transform:none; }
.calendar td .d{ font-size:15px; }
.cal-event{ font-size:13.5px; }

/* 글쓰기 화면 */
.write-form input[type="text"],
.write-form input[type="password"],
.write-form textarea,
.write-form select,
.write-form .cresc-editor{ font-size:17px; }
.write-form label{ font-size:16.5px; }

@media (max-width:640px){
  .board-page, .post-view{ font-size:17px; }
  .board-page .board-table td{ font-size:15.5px; }
  .board-page .board-table .subj,
  .board-page .board-table .subj a{ font-size:16.5px; }
  .post-view .post-body{ font-size:17px; }
  .post-view .post-head h1{ font-size:26px; }
}