@charset "utf-8";

/* PPPX 테마 — 기업 사이트 레이아웃 */

:root {
  --navy: #0b1b3a;
  --navy-2: #13294f;
  --ink: #14171c;
  --muted: #6b7480;
  --line: #e3e6ea;
  --bg-soft: #f5f7f9;
  --cyan: #00b8c4;
  --white: #fff;
  --head-h: 84px;
  --sans: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

img { border: 0; vertical-align: middle; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
dl, dd, dt { margin: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
hr { display: none; }

.sound_only, .skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip: auto;
  background: var(--navy);
  color: #fff;
  z-index: 999;
}

/* ── 버튼 ───────────────────────────── */
/* 그누보드 기본 CSS 의 a.btn 규칙보다 우선하도록 선택자를 맞춘다. */
a.btn,
button.btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  line-height: 1.4;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
a.btn-line, .btn-line { border-color: rgba(255,255,255,.6); color: #fff; }
a.btn-line:hover, .btn-line:hover { background: #fff; color: var(--navy); }
a.btn-white, .btn-white { background: #fff; color: var(--navy); }
a.btn-white:hover, .btn-white:hover { background: var(--cyan); color: #fff; }
a.btn-dark, .btn-dark { background: var(--navy); color: #fff; border-color: var(--navy); }
a.btn-dark:hover, .btn-dark:hover { background: var(--cyan); border-color: var(--cyan); }
a.btn-line-dark, .btn-line-dark { border-color: var(--line); color: var(--ink); }
a.btn-line-dark:hover, .btn-line-dark:hover { border-color: var(--navy); }

/* 게시판 스킨이 쓰는 작은 버튼들은 위 .btn 크기 규칙에서 되돌린다.
   (스킨 style.css 가 pppx.css 보다 먼저 실려 덮이기 때문) */
a.btn_b01, button.btn_b01,
a.btn_b02, button.btn_b02,
a.btn_admin, button.btn_admin,
a.btn_cancel, button.btn_cancel,
a.btn_bo_sch, button.btn_bo_sch,
a.btn_more_opt, button.btn_more_opt {
  min-height: 0;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
}
.btn_bo_user > li > .btn,
.btn_bo_adm > li > .btn {
  width: 100%;
  padding: 0;
}

/* ── 헤더 ───────────────────────────── */
#ph {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--head-h);
  transition: background .3s, border-color .3s, height .3s;
  border-bottom: 1px solid transparent;
}
#ph.ph-over { background: transparent; color: #fff; }
#ph.ph-solid,
#ph.is-stuck,
#ph.is-open {
  background: #fff;
  color: var(--ink);
  border-bottom-color: var(--line);
}

.ph-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  height: var(--head-h);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.ph-logo { justify-self: start; font-size: 0; }
.ph-logo a { display: flex; align-items: center; gap: 10px; }
.ph-logo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #001630; }
.ph-logo span {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .115em;
}

.ph-gnb { justify-self: center; min-width: 0; max-width: 100%; }
.ph-gnb-1d { display: flex; justify-content: center; flex-wrap: nowrap; gap: 28px; }
.ph-gnb-1d > li { position: relative; }
.ph-gnb-1d > li > a {
  display: flex;
  align-items: center;
  height: var(--head-h);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.ph-gnb-1d > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .25s;
}
.ph-gnb-1d > li:hover > a::after { transform: scaleX(1); }

.ph-gnb-2d {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 190px;
  padding: 14px 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(11,27,58,.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}
.ph-gnb-1d > li:hover .ph-gnb-2d {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.ph-gnb-2d a {
  display: block;
  padding: 9px 22px;
  color: var(--muted);
  font-size: 15px;
}
.ph-gnb-2d a:hover { color: var(--navy); background: var(--bg-soft); }

.ph-util { display: flex; align-items: center; justify-self: end; flex-shrink: 0; gap: 12px; white-space: nowrap; }
#ph.is-in .ph-gnb-1d { gap: 24px; }
#ph.is-in .ph-util { gap: 10px; }
#ph.is-in .ph-auth { gap: 12px; }
@media (min-width: 1025px) {
  .ph-auth-wallet { display: none; }
}

.ph-lang { position: relative; }
.ph-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .85;
  box-sizing: border-box;
}
.ph-lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 88px;
  background: #fff;
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.ph-lang:hover .ph-lang-list,
.ph-lang.is-open .ph-lang-list { opacity: 1; visibility: visible; }
.ph-lang-list a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.ph-lang-list a:hover { background: var(--bg-soft); }

.ph-wallet {
  display: none;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.ph-auth { display: flex; gap: 14px; font-size: 14px; opacity: .85; }
.ph-auth a:hover { text-decoration: underline; }
.ph-admin { font-weight: 700; }

.ph-all-txt { display: none; }
.ph-all-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
}
.ph-all-bars { display: block; width: 22px; }
.ph-all-bars i {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
  transition: transform .25s, opacity .25s;
}
#ph.is-open .ph-all-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ph.is-open .ph-all-bars i:nth-child(2) { opacity: 0; }
#ph.is-open .ph-all-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ph-allmenu {
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.ph-allmenu-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 44px 40px 56px;
}
.ph-allmenu-col strong {
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--navy);
  font-size: 17px;
}
.ph-allmenu-col li a {
  display: block;
  padding: 6px 0;
  color: var(--muted);
  font-size: 15px;
}
.ph-allmenu-col li a:hover { color: var(--cyan); }
.ph-allmenu-account {
  display: none;
  gap: 10px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px 28px;
}
.ph-allmenu-account a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.ph-allmenu-account a.is-out {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
html.pppx-menu-open,
html.pppx-menu-open body {
  overflow: hidden;
}

/* ── 본문 래퍼 ──────────────────────── */
/* 그누보드 기본 CSS 의 고정폭(#container 930px, #wrapper min-width 1200px)을 무력화한다. */
#hd, #wrapper, #ft { min-width: 0; }
#wrapper { width: 100%; }
#ft_wr, #ft_copy { width: 100%; }
#container_wr { width: 100%; margin: 0; }
#container {
  width: 100%;
  float: none;
  margin: 0;
  min-height: 0;
  font-size: 1em;
}
#wrapper.is-sub { padding-top: var(--head-h); }
#wrapper.is-index #container { padding: 0; }

.sub-head {
  padding: 60px 40px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  text-align: center;
}
#container_title { font-size: 34px; }

#wrapper.is-sub #container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 100px;
}
#aside { display: none; }

/* ── 내용 페이지 본문 ─────────────────── */
.doc { max-width: 900px; margin: 0 auto; }
.doc > p { margin: 0 0 18px; color: #3d444e; }
.doc h3 {
  margin: 46px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--cyan);
  font-size: 22px;
  line-height: 1.4;
}
.doc h3:first-child { margin-top: 0; }
.doc h4 { margin: 28px 0 8px; font-size: 17px; }
.doc ul { margin: 0 0 18px; padding-left: 20px; color: #3d444e; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--navy-2); text-decoration: underline; }
.doc .lede {
  padding: 22px 24px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 17px;
}
.doc .mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  word-break: break-all;
}
.doc-table {
  width: 100%;
  margin: 0 0 18px;
  border-top: 2px solid var(--navy);
  border-collapse: collapse;
}
.doc-table th,
.doc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}
.doc-table th {
  width: 190px;
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 700;
}
.doc .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.doc .btn-row a {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.doc .btn-row a:hover { background: var(--navy); color: #fff; }
.doc .btn-row a.is-fill { background: var(--navy); color: #fff; }
.doc .btn-row a.is-fill:hover { background: var(--navy-2); }
.doc .swatch { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; }
.doc .swatch div {
  flex: 1 1 160px;
  padding: 58px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
/* 채워야 하는 항목 표시 */
.need {
  padding: 1px 7px;
  border-radius: 4px;
  background: #fff3cd;
  color: #7a5b00;
  font-size: 13px;
  font-weight: 700;
  /* 좁은 화면에서 줄바꿈되도록 두되, 줄마다 배경·모서리를 유지한다. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 640px) {
  .doc-table th, .doc-table td { display: block; width: 100%; }
  .doc-table th { border-bottom: 0; }
}

/* ── 히어로 ───────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: var(--head-h) 40px 120px;
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,14,30,.86) 0%, rgba(6,14,30,.55) 55%, rgba(6,14,30,.35) 100%),
    linear-gradient(180deg, rgba(6,14,30,.6) 0%, transparent 40%);
}
.hero-body {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.hero-eyebrow {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--cyan);
}
.hero-title {
  margin: 0 0 26px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.28;
  font-weight: 800;
}
.hero-lede {
  margin: 0 0 40px;
  max-width: 40em;
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(255,255,255,.82);
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  color: rgba(255,255,255,.7);
  text-align: center;
}
.hero-scroll i {
  display: block;
  width: 1px;
  height: 46px;
  margin: 0 auto 10px;
  background: rgba(255,255,255,.5);
  animation: heroLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes heroLine {
  0%, 100% { transform: scaleY(.3); opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ── 공통 섹션 ──────────────────────── */
.sec { padding: 120px 40px; }
.sec-inner { max-width: 1500px; margin: 0 auto; }

.sec-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 30px;
  margin-bottom: 56px;
}
.sec-kicker {
  width: 100%;
  margin: 0 0 6px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.sec-kicker.light { color: rgba(255,255,255,.75); }
.sec-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.3;
}
.sec-more {
  margin-left: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.sec-more:hover { color: var(--navy); }

[data-io] { opacity: 0; transform: translateY(28px); transition: opacity .8s, transform .8s; }
[data-io].is-in { opacity: 1; transform: none; }

/* 사업분야 */
.biz-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.biz-list li {
  padding: 48px 40px 44px;
  background: #fff;
  transition: background .3s;
}
.biz-list li:hover { background: var(--bg-soft); }
.biz-list em {
  display: block;
  margin-bottom: 26px;
  color: var(--cyan);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .16em;
}
.biz-list h3 { margin-bottom: 14px; font-size: 26px; }
.biz-list p { margin: 0 0 28px; color: var(--muted); }
.biz-list li > a {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.biz-list li > a::after { content: " →"; }

/* 신뢰 배너 */
.sec-csv {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #1d3d6d 100%);
  color: #fff;
  text-align: center;
}
.csv-title {
  margin: 0 0 20px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.35;
}
.csv-desc {
  margin: 0 auto 40px;
  max-width: 44em;
  color: rgba(255,255,255,.8);
}

/* 뉴스 */
.sec-news { background: var(--bg-soft); }
.news-list { border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a {
  display: flex;
  align-items: baseline;
  gap: 34px;
  padding: 30px 8px;
  transition: background .25s, padding-left .25s;
}
.news-list a:hover { background: #fff; padding-left: 22px; }
.news-date {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.news-subject { font-size: 19px; font-weight: 600; }
.news-empty {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

/* 토큰 */
.token-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.token-facts > div { padding: 30px 28px; background: #fff; }
.token-facts dt { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.token-facts dd {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.token-addr {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 26px;
  margin-bottom: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.token-addr-label { color: var(--muted); font-size: 14px; }
.token-addr code {
  flex: 1 1 320px;
  font-family: "Consolas", monospace;
  font-size: 15px;
  word-break: break-all;
}
.token-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 푸터 ───────────────────────────── */
#pf { background: var(--navy); color: rgba(255,255,255,.7); }
.pf-top { border-bottom: 1px solid rgba(255,255,255,.12); }
.pf-sitemap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 40px;
}
.pf-col strong {
  display: block;
  margin-bottom: 16px;
  color: #fff;
  font-size: 16px;
}
.pf-col li a { display: block; padding: 5px 0; font-size: 14px; }
.pf-col li a:hover { color: var(--cyan); }

.pf-bottom {
  max-width: 1500px;
  margin: 0 auto;
  padding: 44px 40px 60px;
}
.pf-links { display: flex; gap: 26px; margin-bottom: 24px; }
.pf-links a { color: #fff; font-size: 14px; font-weight: 600; }
.pf-links a:hover { color: var(--cyan); }
.pf-info p { margin: 0; font-size: 14px; line-height: 1.9; }
.pf-copy { margin-top: 18px !important; font-size: 13px; opacity: .6; }
.pf-family {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}
.pf-family span { color: rgba(255,255,255,.5); }
.pf-family a { color: #fff; font-weight: 600; }
.pf-family a:hover { color: var(--cyan); }

#pf-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s, background .25s;
}
#pf-top.is-on { opacity: 1; visibility: visible; }
#pf-top:hover { background: var(--cyan); }
#pf-top i {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
}

#pppx-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 200;
  padding: 13px 24px;
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transform: translateX(-50%);
}

/* ── 반응형 ─────────────────────────── */
@media (max-width: 1280px) {
  .ph-gnb-1d { gap: 28px; }
  .ph-inner { padding: 0 24px; }
}

@media (max-width: 1024px) {
  :root { --head-h: 68px; }
  .ph-inner {
    display: flex;
    gap: 12px;
  }
  .ph-logo { justify-self: start; }
  .ph-gnb { display: none; }
  .ph-util { margin-left: auto; }
  .ph-wallet { display: none; }
  .ph-util { gap: 2px; }
  #ph.is-in .ph-util { gap: 2px; }
  .ph-auth {
    display: flex;
    gap: 2px;
    opacity: 1;
  }
  #ph.is-in .ph-auth { gap: 2px; }
  .ph-lang-btn {
    height: 32px;
    padding: 0 10px;
  }
  .ph-auth a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .ph-auth a:hover { text-decoration: none; }
  .ph-auth li:has(.ph-admin) { display: none; }
  .ph-all-txt { display: none; }
  #ph.is-open {
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #ph.is-open .ph-inner { flex: 0 0 auto; }
  #ph.is-open .ph-allmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ph-allmenu-inner { grid-template-columns: repeat(2, 1fr); padding: 30px 24px 20px; }
  .ph-allmenu-account { display: flex; flex-wrap: wrap; }
  .sec { padding: 80px 24px; }
  .hero { padding: var(--head-h) 24px 100px; min-height: 84vh; }
  .biz-list, .token-facts, .pf-sitemap { grid-template-columns: repeat(2, 1fr); }
  /* 사업분야는 3개라 2단에서 빈 칸이 생긴다. 마지막 카드가 한 줄을 다 쓰게 한다. */
  .biz-list li:last-child { grid-column: 1 / -1; }
  .pf-sitemap, .pf-bottom { padding-left: 24px; padding-right: 24px; }
  .sub-head { padding: 40px 24px 30px; }
}

@media (max-width: 640px) {
  .ph-allmenu-inner, .biz-list, .token-facts { grid-template-columns: 1fr; }
  /* 푸터 사이트맵은 2단으로 둬야 모바일에서 지나치게 길어지지 않는다. */
  .pf-sitemap { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  /* 헤더 · 히어로 · 섹션의 좌우 여백을 20px 로 통일한다. */
  .ph-inner { gap: 12px; padding: 0 20px; }
  .ph-util { gap: 2px; }
  .ph-lang-btn { height: 32px; padding: 0 8px; font-size: 12px; }
  .ph-auth a { height: 32px; padding: 0 8px; font-size: 12px; }
  .hero { padding: var(--head-h) 20px 100px; }
  .ph-allmenu-inner { padding: 26px 20px 16px; }
  .ph-allmenu-account { padding: 0 20px 24px; }
  .pf-sitemap, .pf-bottom { padding-left: 20px; padding-right: 20px; }
  .sub-head { padding: 34px 20px 26px; }
  .sec { padding: 64px 20px; }
  .sec-head { margin-bottom: 34px; }
  .sec-more { margin-left: 0; }
  .biz-list li { padding: 34px 26px; }
  .news-list a { flex-direction: column; gap: 8px; padding: 22px 4px; }
  .news-subject { font-size: 17px; }
  .hero-scroll { display: none; }
  .token-addr { padding: 18px; }

  /* 게시판 목록: 좁은 화면에서는 제목이 읽히도록 글쓴이·조회 열을 감춘다. */
  #bo_list .th_name,
  #bo_list .th_hit,
  #bo_list .th_good,
  #bo_list .td_name,
  #bo_list .td_num { display: none; }
  #bo_list .th_num,
  #bo_list .td_num2 { width: 42px; }
  #bo_list .th_date,
  #bo_list .td_datetime { width: 58px; }
  #bo_list .td_subject { padding-right: 6px; }
  #bo_list .bo_tit { line-height: 1.5; }
}