/* ═══════════════════════════════════════════════════════════════
   X-ON · 플레이북 공통 스타일 (목록 · 상세)
   메인/AX/GEO 와 같은 색·글꼴. 다만 여기는 '한 화면 한 장' 엔진이
   아니라 평범하게 위아래로 읽는 게시판 구조다.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#031011; --ink:#F4EFE6;
  --soft:rgba(244,239,230,.58); --faint:rgba(244,239,230,.52);
  --line:rgba(244,239,230,.13); --panel:rgba(244,239,230,.045);
  --mint:#22BEC6; --mint-ink:#3ADCE4; --mark:#10595D;
  --pad:clamp(26px, 5.2vw, 96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Jost","Wanted Sans Variable","Pretendard Variable",Pretendard,
              system-ui,-apple-system,"Malgun Gothic",sans-serif;
  font-weight:300; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── 상단 고정 바 ───────────────────────────────────────────── */
/* 2026-09-10 · z-index 60 → 70. 메뉴(.nav, 65)가 열리면 상단 바가 그 아래로 깔려
   햄버거(X)를 누를 수 없었다. 메인/AX/GEO 의 .gnb 는 원래 70 이라 그쪽은 문제 없었다. */
.top{position:fixed; inset:0 0 auto 0; z-index:70; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); background:rgba(3,16,17,0); backdrop-filter:blur(0px);
  border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease}
.top.stuck{background:rgba(3,16,17,.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line)}
/* 모바일에서 아래로 내리면 감추고, 위로 올리면 다시 보인다 (2026-09-02) */
.top{transition:background .3s ease, border-color .3s ease,
     transform .3s cubic-bezier(.22,.7,.24,1)}
.top.hide{transform:translateY(-125%)}
.brand{display:flex; align-items:center; line-height:0; padding:12px 14px; margin:-12px -14px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.round{position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.round::before{content:""; position:absolute; inset:-10px; border-radius:18px}
.brand img{height:24px; width:auto}
.round{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--mint);
  background:transparent; cursor:pointer; padding:0; display:flex;
  align-items:center; justify-content:center; transition:background .25s ease}
.round:hover{background:rgba(34,190,198,.12)}
.round:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.burger{position:relative; width:19px; height:12px; display:block}
.burger i{position:absolute; left:0; width:100%; height:1.6px; background:var(--mint);
  border-radius:2px; transition:transform .32s cubic-bezier(.3,.8,.3,1), opacity .2s ease}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:5.2px; width:70%}
.burger i:nth-child(3){top:10.4px}
.round[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.round[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.round[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}
.nav{position:fixed; inset:0; z-index:65; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  background:rgba(3,16,17,.95); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0; pointer-events:none; transition:opacity .34s ease}
.nav.open{opacity:1; pointer-events:auto}
.nav a{font-family:"Syne","Wanted Sans Variable",sans-serif; font-weight:700;
  font-size:clamp(34px,5.4vw,68px); line-height:1.28; letter-spacing:.01em; color:#F4EFE6; text-decoration:none;
  padding:2px 10px; opacity:0; transform:translateY(20px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.22,.7,.24,1), color .2s ease}
.nav.open a{opacity:1; transform:none}
.nav.open a:nth-child(1){transition-delay:.10s}
.nav.open a:nth-child(2){transition-delay:.17s}
.nav.open a:nth-child(3){transition-delay:.24s}
.nav.open a:nth-child(4){transition-delay:.31s}
.nav.open a:nth-child(5){transition-delay:.38s}
.nav.open a:nth-child(6){transition-delay:.45s}
.nav.open a:nth-child(7){transition-delay:.52s}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:var(--mint)}
.nav .foot{margin-top:40px; font-family:"Jost",sans-serif; font-size:13px;
  letter-spacing:.22em; color:rgba(244,239,230,.52)}
.navclose{position:fixed; top:13px; right:var(--pad); z-index:70}

/* ── 공통 조판 ──────────────────────────────────────────────── */
.wrap{max-width:1240px; margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-family:"Jost",sans-serif; font-weight:400;
  font-size:clamp(12px,1.4vw,15px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--mint-ink); margin:0 0 18px}
h1{margin:0; font-weight:900; letter-spacing:-.03em; line-height:1.16;
  font-size:clamp(38px,7vw,76px)}
h2{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.3;
  font-size:clamp(24px,3.4vw,38px)}
.mark{background:var(--mark); padding:0 .14em; box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  border-radius:99px; background:var(--mint); color:#000000; text-decoration:none;
  font-weight:600; font-size:16px; letter-spacing:-.01em; border:0; cursor:pointer;
  font-family:inherit; transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(34,190,198,.28)}
.btn.ghost{background:transparent; color:var(--mint); border:1.5px solid var(--mint)}
.btn.ghost:hover{background:rgba(34,190,198,.12); box-shadow:none}
/* 본문(.art) 안에 놓인 CTA 버튼은 각 페이지의 `.art a{color:var(--mint-ink)}`
   (본문 링크 색) 가 선택자 우선순위에서 이겨, 민트 배경 위에 민트 글씨가 되어
   거의 보이지 않았다. 아래 두 줄이 그걸 되돌린다. 지우지 말 것. (2026-09-10) */
.art a.btn{color:#000000}
.art a.btn.ghost{color:var(--mint)}

/* ── 배지 · 메타 ────────────────────────────────────────────── */
.cat{display:inline-block; padding:5px 12px; border-radius:99px; font-size:12.5px;
  font-weight:600; letter-spacing:.02em; border:1px solid rgba(34,190,198,.42);
  color:var(--mint-ink); background:rgba(34,190,198,.09); white-space:nowrap}
.pdfbadge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:99px; font-size:12px; font-weight:600; background:var(--mint);
  color:#000000; white-space:nowrap}

/* ★ 2026-09-03 — 썸네일 위에 얹히는 배지는 그림이 밝으면 글씨가 묻힌다.
   그림 위(.thumb .tags)에 있을 때만 바탕을 어둡게 깔아 준다.
   카드 본문(.ctags)의 배지는 원래 색 그대로 둔다. */
.thumb .tags .cat{background:rgba(6,20,22,.78); backdrop-filter:blur(3px);
  border-color:rgba(34,190,198,.55)}
.thumb .tags .soonbadge{background:rgba(6,20,22,.78); backdrop-filter:blur(3px);
  color:rgba(233,244,242,.82); border-color:rgba(233,244,242,.22)}
.meta{display:flex; align-items:center; gap:9px; font-family:"Jost",sans-serif;
  font-size:13.5px; letter-spacing:.03em; color:var(--faint)}
.meta i{font-style:normal; opacity:.5}

/* ── 푸터 — 메인 마지막 화면과 같은 구성 ──────────────────── */
.foot2{border-top:1px solid var(--line); margin-top:clamp(64px,9vw,120px);
  padding:clamp(64px,9vw,116px) 0 clamp(52px,7vw,84px); text-align:center}
.foot2 h2{font-weight:900; letter-spacing:-.03em; line-height:1.2;
  font-size:clamp(32px,5.6vw,64px)}
.xg{font-family:"Syne",sans-serif; font-weight:800; letter-spacing:0; color:var(--mint)}
.fsub{margin:20px 0 0; font-size:clamp(17px,2.2vw,23px); line-height:1.6; color:var(--soft)}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(30px,4vw,44px)}
.contact{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:clamp(40px,5.5vw,64px); border-top:1px solid var(--line);
  padding-top:clamp(26px,3.4vw,34px); text-align:left}
.contact .k{font-family:"Jost",sans-serif; font-size:13px; letter-spacing:.2em;
  color:var(--mint-ink)}
.contact .v{margin-top:9px; font-size:clamp(17px,2.2vw,23px); letter-spacing:-.01em;
  line-height:1.5}
.contact a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
.contact a:hover{border-color:var(--mint); color:var(--mint)}
.legal{margin-top:clamp(26px,3.4vw,34px); font-size:14.5px; font-weight:300;
  line-height:1.75; color:var(--faint); text-align:center}
.fnav{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center;
  margin-top:clamp(26px,3.4vw,34px)}
.fnav a{font-family:"Jost",sans-serif; font-size:15px; font-weight:500;
  letter-spacing:.14em; color:var(--soft); text-decoration:none}
.fnav a:hover{color:var(--mint)}
@media (max-width:760px){
  .contact{grid-template-columns:1fr; gap:20px}
  .btnrow .btn{width:100%; justify-content:center}
}

/* ── 이메일 게이트 모달 ─────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:20px; background:rgba(2,10,11,.78); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .28s ease}
.modal.open{opacity:1; pointer-events:auto}
.mbox{width:100%; max-width:460px; background:#0A1A1C; border:1px solid var(--line);
  border-radius:18px; padding:clamp(24px,4vw,34px);
  transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.22,.7,.24,1)}
.modal.open .mbox{transform:none}
.mbox h3{margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em}
.mbox .msub{margin:10px 0 0; font-size:15px; line-height:1.65; color:var(--soft)}
.mfile{display:flex; align-items:center; gap:12px; margin:20px 0 22px; padding:14px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.mfile .ic{width:38px; height:38px; border-radius:9px; background:rgba(34,190,198,.14);
  display:grid; place-items:center; flex:none;
  font-family:"Jost",sans-serif; font-size:11px; font-weight:700; color:var(--mint-ink)}
.mfile .nm{font-size:15px; font-weight:500; line-height:1.4}
.mfile .sz{font-family:"Jost",sans-serif; font-size:12.5px; color:var(--faint); margin-top:3px}
.field{display:block; margin-bottom:14px}
.field span{display:block; font-size:13px; color:var(--soft); margin-bottom:7px}
.field input{width:100%; padding:14px 16px; border-radius:11px; border:1px solid var(--line);
  background:rgba(244,239,230,.04); color:var(--ink); font:inherit; font-size:16px}
.field input:focus{outline:0; border-color:var(--mint); background:rgba(34,190,198,.06)}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
  line-height:1.6; color:var(--soft); margin:4px 0 20px}
.agree input{margin-top:3px; accent-color:var(--mint); flex:none}
.mbtns{display:flex; gap:10px}
.mbtns .btn{flex:1; justify-content:center}
.mmsg{margin:14px 0 0; font-size:14px; color:var(--mint-ink); min-height:20px}
.mclose{position:absolute; top:14px; right:16px; background:none; border:0;
  color:var(--faint); font-size:24px; cursor:pointer; line-height:1; padding:6px}
.mbox{position:relative}

/* ── 나타나는 동작 ──────────────────────────────────────────── */
.rise{opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.24,1)}
.rise.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════
   좁은 화면 공통 — 여기가 마지막이라 위 규칙들을 덮는다
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* 이 묶음은 각 페이지 스타일보다 뒤가 아니라 앞에 붙으므로,
     선택자 앞에 body 를 두어 우선순위를 한 단계 올린다. */

  /* (1) 카드형 블록은 가운데로 */
  body .band, body .band > div, body .endcta, body .endcta > div,
  body .dl, body .empty{text-align:center}
  body .band h2, body .band p, body .endcta h2, body .endcta p,
  body .dl .t, body .dl .d{max-width:none}
  body .band .btn, body .endcta .btn, body .dl .btn{width:100%; justify-content:center}
  body .band p, body .endcta p{margin-left:auto; margin-right:auto}

  /* 목록 카드 — 가로형. 썸네일 비율은 PC 와 똑같이 16:9 로 유지한다 */
  body .card{flex-direction:row; align-items:stretch}
  body .thumb{aspect-ratio:16/9; width:44%; max-width:190px; flex:none; align-self:center}
  body .thumb img{width:100%; height:100%; object-fit:cover}
  body .thumb .tags{display:none}
  body .ctags{display:flex; gap:6px; flex-wrap:wrap}
  body .cbody{padding:13px 14px; gap:6px; text-align:left; justify-content:center}
  body .ctitle{font-size:16px; line-height:1.38;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  body .cdesc{display:none}
  body .cfoot{padding-top:7px; border-top:0}
  body .cat{font-size:11.5px; padding:4px 10px}
  body .pdfbadge{font-size:11px; padding:4px 9px}
  body .meta{font-size:12.5px}

  /* 상단 고정 바 높이를 조금 줄인다 */
  body .top{height:64px}
  body .round{width:42px; height:42px}
  body .brand img{height:21px}
}

.ctags{display:none}

/* ── 좁은 화면에서 아래에 붙는 다운로드 바 ─────────────────────
   2026-09-10 · 대표 지시: 위(상단 바 아래)가 아니라 화면 맨 아래 고정.
   위에 있을 땐 상단 바와 합쳐 화면 1/4 을 먹어 글을 가렸다. 아래로 내리면
   상단 바가 숨어도 버튼은 늘 손이 닿는 자리에 있다. */
.dock{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:55; display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(3,16,17,.95); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.dock .btn{width:100%; justify-content:center; padding:13px 20px; font-size:15px}
@media (max-width:1000px){
  .dock{display:block}
  /* 바에 가려지지 않게 본문 끝에 그만큼 여백 — 바가 있는 페이지에서만 */
  body:has(.dock){padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
}

/* ── 좁은 화면에서만 접히는 묶음 ─────────────────────────────── */
.fold{display:block}
.fold > summary{list-style:none; cursor:pointer}
.fold > summary::-webkit-details-marker{display:none}
@media (min-width:761px){ .fold > summary .fmark{display:none} }
@media (max-width:760px){
  .fold{border:1px solid var(--line); border-radius:15px; background:var(--panel);
    padding:0; overflow:hidden}
  .fold > summary{display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:18px 20px}
  .fold > summary .eyebrow{margin:0 0 5px}
  .fold > summary h2{font-size:21px}
  .fold .fmark{flex:none; width:30px; height:30px; border-radius:50%;
    border:1px solid var(--line); display:grid; place-items:center;
    color:var(--mint); font-size:15px; transition:transform .25s ease}
  .fold[open] .fmark{transform:rotate(180deg)}
  .fold .fbody{padding:0 20px 22px}
}

/* ── 아직 발행하지 않은 글 ────────────────────────────────────
   목록에는 예고로 두되 클릭은 막는다. 링크로 두면 404 가 나고,
   404 는 방문자에게도 검색엔진에게도 '관리 안 되는 사이트' 신호다. (2026-09-02) */
.card.soon{cursor:default}
.card.soon:hover{transform:none; border-color:var(--line); box-shadow:none}
.card.soon .thumb img{filter:grayscale(.35) brightness(.86)}
/* ★ 2026-09-03 — 예전에는 흑백(grayscale 1)으로 완전히 죽여 놨다. 열 장 중
   아홉이 '발행 예정'이라 화면 전체가 잿빛으로 보이고, 그림이 무엇을 말하는지
   알아보기 어려웠다. 상태는 '발행 예정' 배지가 이미 알려 주므로, 살짝만
   가라앉히고 그림은 알아볼 수 있게 둔다. */
.card.soon .ctitle{color:var(--soft)}
.soonbadge{display:inline-flex; align-items:center; padding:5px 11px;
  border-radius:99px; font-size:12.5px; font-weight:500; letter-spacing:-.01em;
  border:1px solid var(--line); color:var(--faint); background:var(--panel);
  white-space:nowrap}

/* 다음 글이 아직 없을 때 — 없는 주소로 보내는 대신 목록으로 안내한다. (2026-09-02) */
/* 본문 끝의 '함께 보면 좋은 글' 한 줄 — 본문과 구분되게 살짝 눌러 둔다 (2026-09-03) */
.art .rel{margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15.5px; line-height:1.85; color:var(--soft)}
.art .rel a{color:var(--mint-ink); text-decoration:none;
  border-bottom:1px solid rgba(34,190,198,.4)}
.art .rel a:hover{border-bottom-color:var(--mint)}

.nsoon{margin:0; font-size:clamp(15px,1.7vw,16.5px); line-height:1.8; color:var(--soft)}
.nsoon a{color:var(--mint-ink); text-decoration:none; border-bottom:1px solid rgba(34,190,198,.4)}
.nsoon a:hover{border-color:var(--mint)}

/* ── 좁은 화면 카드의 배지 — 한 줄에 (2026-09-02) ────────────────
   배지가 세 개(준비 중 · 분야 · PDF)가 되면서 두세 줄로 접혔고,
   그만큼 제목이 아래로 밀려 카드가 깨져 보였다. 목록에서는 분야만 보이면 된다. */
@media (max-width:760px){
  body .ctags{flex-wrap:nowrap; gap:5px; overflow:hidden}
  body .ctags .pdfbadge{display:none}
  body .ctags .cat,
  body .ctags .soonbadge{font-size:11px; padding:4px 9px; white-space:nowrap}
  body .cbody{gap:5px}
  body .ctitle{font-size:15.5px; line-height:1.36}
  body .cfoot{font-size:11.5px}
}

/* ══════════════════════════════════════════════════════════════════
   ★★ 좌우 여백이 통째로 사라지던 문제 (2026-09-02)
   .wrap 과 같이 쓰는 클래스들이 padding 단축 표기로 좌우를 0 으로 덮어썼다.
     .phero{padding: 120px 0 40px}  /  .phead{...}  /  .rhero{...}
   위아래 여백만 주려던 것인데 좌우까지 함께 지워진다. 두 규칙 모두 클래스
   하나짜리라 나중에 선언된 쪽이 이긴다. 화면이 넓을 때는 max-width 가
   가운데로 모아 줘서 안 보였고, 폰에서만 글자가 화면 끝에 딱 붙어 잘렸다.
   그래서 좌우 여백만 한 단계 강하게 다시 못 박는다.
   ══════════════════════════════════════════════════════════════════ */
body .wrap{padding-left:var(--pad); padding-right:var(--pad)}

/* ═══ 2026-09-07 · 푸터 개편 (전 페이지 공통) ═══════════════════
   · 주소 삭제 → 이메일(좌) / 전화(우) 2열
   · 하단 네비: 가로 1줄 가득, 원형 알약. 평소 흰 글자, 누르면 브랜드 컬러
   · 사업자 정보는 접어 둔다(details) — 푸터가 길어 본문 끝이 묻혔다 */
.contact{grid-template-columns:1fr 1fr !important; gap:22px}
.contact > div:last-child{text-align:right}
.fnav{display:flex !important; flex-wrap:nowrap !important; gap:8px !important;
      width:100%; justify-content:stretch}
.fnav a{flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
        padding:11px 4px; border:1px solid var(--line); border-radius:999px;
        color:#fff !important; transition:background-color .18s, color .18s, border-color .18s}
.fnav a:hover,.fnav a:focus-visible{background:var(--mint); border-color:var(--mint); color:#04191b !important}
.fnav a:active{background:var(--mint); border-color:var(--mint); color:#04191b !important}

/* 2026-09-10 · 푸터 메뉴가 6개(REFERENCE 추가)가 되면서 폰 폭에서는 한 줄에 안 들어간다.
   900px 이하에서는 3+3 두 줄. 위 nowrap !important 를 이기려면 여기도 !important. */
@media (max-width:900px){
  .fnav{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px !important}
  .fnav a{font-size:13px; letter-spacing:.08em; padding:11px 2px; overflow:hidden; text-overflow:ellipsis}
}
@media (max-width:360px){ .fnav a{font-size:12px; letter-spacing:.04em} }
details.legal{margin-top:clamp(22px,3vw,32px); text-align:center}
details.legal > summary{cursor:pointer; list-style:none; display:inline-block;
      font-size:14px; letter-spacing:.02em; color:var(--faint);
      border-bottom:1px dashed var(--line); padding-bottom:2px}
details.legal > summary::-webkit-details-marker{display:none}
details.legal > summary::after{content:" ▾"}
details.legal[open] > summary::after{content:" ▴"}
details.legal > p{margin:14px 0 0; font-size:14px; font-weight:300; line-height:1.7;
      color:var(--faint); text-align:center}
.btn .dlico{width:1.05em; height:1.05em; margin-right:.5em; vertical-align:-.18em}

/* ═══ 4가지 성장 — 스와이프 2단 노출 ═══════════════════════════ */
.quad.growth .cell{opacity:0; transform:translateY(18px);
      transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.25,1)}
.quad.growth.s1 .cell:not(.g2),
.quad.growth.s2 .cell{opacity:1; transform:none}

/* ═══ X-ON FAMILY — 가로 배너 3개, 한 장씩 날아온다 ═══════════ */
.orbit.family{display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px)}
.orbit.family .hub{display:none}
.orbit.family .bu{width:100%; max-width:none; margin:0; opacity:0;
      transform:translateX(-42px); border-radius:14px; overflow:hidden;
      transition:opacity .55s ease, transform .55s cubic-bezier(.2,.75,.25,1)}
.orbit.family .bu.on{opacity:1; transform:none}
.orbit.family .bu.r{transform:translateX(42px)}
.orbit.family .bu.r.on{transform:none}
.famloop{margin-top:18px; height:52px; width:100%; opacity:0; transition:opacity .6s ease}
.famloop.on{opacity:1}
.famloop path{fill:none; stroke:var(--mint); stroke-width:1.6; opacity:.85;
      stroke-dasharray:6 10; animation:famflow 2.4s linear infinite}
@keyframes famflow{to{stroke-dashoffset:-64}}

/* ═══ 4D — 순차 점등 ═══════════════════════════════════════════ */
.flow.seq .node{opacity:.28; transition:opacity .45s ease}
.flow.seq .node.on{opacity:1}

/* ── 세로(모바일)에서 기존 규칙이 위를 덮어써서 다시 지정한다 (2026-09-07) ──
   .stage[data-o="p"] .orbit / .contact 가 뒤에 있어 우선순위가 높다. */
.stage[data-o="p"] .orbit.family{display:flex !important; flex-direction:column !important;
      grid-template-columns:none !important; gap:12px}
.stage[data-o="p"] .orbit.family .bu{width:100%; max-width:none}
.stage[data-o="p"] .contact{grid-template-columns:1fr 1fr !important; gap:14px}
.stage[data-o="p"] .contact > div:last-child{text-align:right}
.stage[data-o="p"] .fnav a{font-size:11.5px; letter-spacing:.06em; padding:9px 2px}
.stage[data-o="p"] details.legal > summary{font-size:13px}
.stage[data-o="p"] details.legal > p{font-size:13px}
.stage[data-o="p"] .quad.growth{grid-template-columns:repeat(2,1fr)}

/* ── 세로: X-ON FAMILY 3개 배너가 폴드7(780px)에서 113px 넘쳤다. (2026-09-07)
   실측 893px → 780 안으로 들인다. 배너 여백·글자·줄간격을 함께 줄인다. */
.stage[data-o="p"] .orbit.family{gap:9px}
.stage[data-o="p"] .orbit.family .bu{padding:12px 14px; gap:3px; border-radius:11px}
.stage[data-o="p"] .orbit.family .bu .bn{font-size:21px}
.stage[data-o="p"] .orbit.family .bu .co{font-size:12.5px}
.stage[data-o="p"] .orbit.family .bu ul{margin-top:5px; gap:1px}
.stage[data-o="p"] .orbit.family .bu li{font-size:12.5px; line-height:1.34}
.stage[data-o="p"] .orbit.family .bu li em{font-size:11.5px}
.stage[data-o="p"] .famloop{height:34px; margin-top:9px}

/* 2026-09-10 키보드 포커스 표시 (WCAG 2.4.7). 마우스 클릭에는 나타나지 않는다. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid #3ADCE4; outline-offset:3px; border-radius:4px}


/* ═══ 글 머리 ═══ */
.crumb{display:flex; gap:9px; align-items:center; font-family:"Jost",sans-serif;
  font-size:13.5px; letter-spacing:.04em; color:var(--faint); margin-bottom:22px;
  flex-wrap:wrap}
.crumb a{text-decoration:none; color:var(--faint)}
.crumb a:hover{color:var(--mint)}
.phead{padding:clamp(104px,13vw,150px) 0 clamp(26px,4vw,38px)}
.phead h1{font-size:clamp(29px,4.6vw,54px); line-height:1.28; letter-spacing:-.028em;
  max-width:22ch}
.pmeta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero-img{margin:clamp(26px,4vw,38px) 0 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:21/9; background:#061618}
@media (max-width:760px){ .hero-img{aspect-ratio:16/9} }
.hero-img img{width:100%; height:100%; object-fit:cover}

/* ═══ 본문 2단 ═══ */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(30px,4vw,64px); align-items:start;
  padding-top:clamp(32px,4.5vw,52px)}
.layout > *{min-width:0}

.lead2{margin:0 0 30px; padding:22px 24px; border-radius:14px;
  border:1px solid rgba(34,190,198,.3); background:rgba(34,190,198,.07);
  font-size:clamp(16.5px,1.9vw,19px); line-height:1.78; color:var(--ink)}
.lead2 b{color:var(--mint-ink); font-weight:600}

.art{min-width:0; font-size:clamp(16.5px,1.85vw,18.5px); line-height:1.88;
  color:rgba(244,239,230,.85)}
.art > * + *{margin-top:1.35em}
.art h2{margin:2.1em 0 .7em; font-size:clamp(22px,2.9vw,30px); font-weight:700;
  letter-spacing:-.025em; line-height:1.36; color:var(--ink); scroll-margin-top:96px}
.art h2::before{content:""; display:block; width:34px; height:2px;
  background:var(--mint); margin-bottom:16px}
.art h3{margin:1.7em 0 .5em; font-size:clamp(18px,2.1vw,21px); font-weight:600;
  letter-spacing:-.02em; color:var(--ink)}
.art p{margin:0}
.art strong{color:var(--ink); font-weight:600}
.art a{color:var(--mint-ink); text-decoration:underline}   /* 2026-09-26 밑줄 명시 — 콘솔(앱) 기본 CSS 가 a 의 밑줄을 지워 두 화면이 달랐다. 정적 글은 원래 브라우저 기본 밑줄이라 변화 없음 */
.art ul,.art ol{margin:0; padding-left:1.35em}
.art li + li{margin-top:.55em}
.art li::marker{color:var(--mint)}
/* ═══ 2026-09-26 블록 간격·목록 기호 ═══
   ① 위 `.art > * + *{margin-top:1.35em}` 는 아래 `.art p{margin:0}`·`.art ul,.art ol{margin:0}`·`.art blockquote{margin:0}` 보다
      구체성이 낮아 문단·목록·인용문에는 한 번도 적용되지 않았다 — 문단이 서로 붙어 한 덩어리로 보였다(정적·콘솔 글 모두).
      제목(h2·h3·h4) 바로 뒤는 제목의 아래 여백을 그대로 쓰고, 그 밖의 블록 뒤에 오는 문단·목록·인용문에 1.35em 을 준다.
   ② 콘솔 글은 본문이 .mdbody 안에 있어 `.art > *` 규칙이 닿지 않는다 — 같은 규칙을 .mdbody 안에도 건다.
   ③ 콘솔(앱)의 기본 CSS 가 목록 기호를 지운다(ul·ol list-style:none) — 여기서 되살린다. .steps·.checks 는 아래에서 다시 none. */
.art > :not(h2):not(h3):not(h4) + :where(p, ul, ol, blockquote),
.art .mdbody > :not(h2):not(h3):not(h4) + :where(p, ul, ol, blockquote){margin-top:1.35em}
.art :where(ul){list-style:disc}
.art :where(ol){list-style:decimal}
.art blockquote{margin:0; padding:18px 22px; border-left:3px solid var(--mint);
  background:var(--panel); border-radius:0 12px 12px 0; color:var(--soft);
  font-size:.96em; line-height:1.75}
.steps{list-style:none; padding:0; counter-reset:s}
.steps li{position:relative; counter-increment:s; padding:18px 20px 18px 66px;
  border:1px solid var(--line); border-radius:13px; background:var(--panel)}
.steps li + li{margin-top:12px}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute;
  left:18px; top:17px; width:34px; height:34px; border-radius:10px;
  background:var(--mint); color:#000000; display:grid; place-items:center;
  font-family:"Jost",sans-serif; font-size:14px; font-weight:700}
.steps b{display:block; font-size:1.02em; color:var(--ink); margin-bottom:5px}
.steps span{display:block; font-size:.92em; line-height:1.7; color:var(--soft)}
/* 체크리스트 — 콘솔 글의 `- [ ]`·`- [x]` 항목(li.md-task, ul.checks) (2026-09-26). 네모 칸을 민트 선으로 그린다 */
.art .checks{list-style:none; padding-left:0}
.art .checks li{position:relative; padding-left:30px}
.art .checks input{appearance:none; -webkit-appearance:none; position:absolute; left:0; top:.42em; width:18px; height:18px;
  margin:0; border:1.5px solid var(--mint); border-radius:5px; background:transparent}
.art .checks input:checked{background:var(--mint)}
.art .checks input:checked::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid #000; border-width:0 2px 2px 0; transform:rotate(45deg)}
/* .tblw 는 콘솔(work-x.kr) 글의 표 감싸개(md-table-wrap)가 쓰는 규칙. 이 정적 글들은
   2026-09-26 부터 표를 .tw 하나로만 감싼다 — 닫히지 않은 .tblw 이중 상자를 걷어냈다. */
.tblw{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:13px}
.art table{width:100%; border-collapse:collapse; font-size:.92em; min-width:340px}
.art th,.art td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
.art th{background:var(--panel); font-weight:600; font-size:.92em;
  letter-spacing:.02em; color:var(--mint-ink); white-space:nowrap}
.art tr:last-child td{border-bottom:0}
.art td strong{color:var(--mint-ink)}

/* 모바일에서 표에 가로 스크롤 막대가 생기지 않게 한다. 옆으로 밀어야 보이는
   칸은 대부분 안 읽힌다 — 밀 수 있다는 것 자체를 모르는 사람이 많다.
   최소 너비를 풀고 제목 줄바꿈을 허용해 화면 안에서 접히게 만든다. (2026-09-04) */
@media (max-width:760px){
  .tblw{overflow-x:visible}
  .art table{min-width:0; font-size:.88em}
  .art th,.art td{padding:11px 12px; word-break:keep-all}
  .art th{white-space:normal}
}

/* ═══ 옆 기둥 ═══ */
.side{position:sticky; top:96px; display:grid; gap:16px}

.toc{border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:20px 22px}
.toc summary{list-style:none}
.toc summary::-webkit-details-marker{display:none}
@media (min-width:1001px){ .toc summary{display:none} }
.toc .k{font-family:"Jost",sans-serif; font-size:11.5px; letter-spacing:.2em;
  color:var(--mint-ink); margin-bottom:13px}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t}
.toc li{counter-increment:t}
.toc li + li{margin-top:3px}
.toc a{display:flex; gap:10px; padding:8px 10px; margin:0 -10px; border-radius:8px;
  font-size:14.5px; line-height:1.5; color:var(--soft); text-decoration:none;
  transition:background .2s ease, color .2s ease}
.toc a::before{content:counter(t,decimal-leading-zero);
  font-family:"Jost",sans-serif; font-size:12px; color:var(--faint); flex:none; padding-top:2px}
.toc a:hover{background:rgba(34,190,198,.09); color:var(--ink)}
.toc a.now{color:var(--mint-ink); font-weight:500; background:rgba(34,190,198,.09)}
.toc a.now::before{color:var(--mint)}
@media (max-width:1000px){
  .toc{padding:0; border-radius:12px}
  .toc summary{cursor:pointer; padding:15px 18px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:15.5px; font-weight:600}
  .toc summary::after{content:"▾"; color:var(--mint); transition:transform .25s ease}
  .toc[open] summary::after{transform:rotate(180deg)}
  .toc .inner{padding:0 18px 16px}
  .toc .k{display:none}
}
.dl{border:1px solid rgba(34,190,198,.38); border-radius:14px; padding:22px;
  background:linear-gradient(160deg, rgba(34,190,198,.13), rgba(34,190,198,.03))}
.dl .k{font-family:"Jost",sans-serif; font-size:11.5px; letter-spacing:.2em;
  color:var(--mint-ink); margin-bottom:11px}
.dl .t{font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.45}
.dl .d{margin-top:9px; font-size:14px; line-height:1.7; color:var(--soft)}
.dl .btn{margin-top:17px; width:100%; justify-content:center; font-size:15px}
.dl .note{margin-top:11px; font-size:12.5px; line-height:1.6; color:var(--faint);
  text-align:center}

/* ═══ 본문 안 다운로드 카드 ═══ */
.dlin{margin-top:2.4em; display:grid; grid-template-columns:auto 1fr auto;
  gap:18px; align-items:center; padding:22px 24px; border-radius:16px;
  border:1px solid rgba(34,190,198,.38);
  background:linear-gradient(135deg, rgba(34,190,198,.13), rgba(34,190,198,.03))}
.dlin .ico{width:48px; height:58px; border-radius:8px; background:var(--mint);
  color:#000000; display:grid; place-items:center; flex:none;
  font-family:"Jost",sans-serif; font-size:13px; font-weight:800; letter-spacing:.04em}
.dlin .t{font-size:18px; font-weight:700; letter-spacing:-.02em}
.dlin .d{margin-top:5px; font-size:14.5px; color:var(--soft); line-height:1.6}
@media (max-width:700px){
  .dlin{grid-template-columns:auto 1fr; gap:14px}
  .dlin .btn{grid-column:1 / -1; width:100%; justify-content:center}
}

/* ═══ FAQ ═══ */
.faqs{margin-top:2.4em; display:grid; gap:10px}
.fq{border:1px solid var(--line); border-radius:13px; background:var(--panel);
  padding:18px 20px}
.fq .q{font-size:1.02em; font-weight:600; letter-spacing:-.015em; line-height:1.5}
.fq .q::before{content:"Q. "; color:var(--mint-ink)}
.fq .a{margin-top:9px; font-size:.93em; line-height:1.78; color:var(--soft)}

/* ═══ 글 끝 · 다음 글 ═══ */
.endcta{margin-top:clamp(46px,6vw,72px); padding:clamp(28px,4vw,44px);
  border:1px solid var(--line); border-radius:18px; background:var(--panel);
  display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center}
.endcta h2{font-size:clamp(21px,2.6vw,28px); max-width:24ch}
.endcta p{margin:10px 0 0; font-size:16px; color:var(--soft); line-height:1.7; max-width:44ch}
@media (max-width:760px){ .endcta{grid-template-columns:1fr} .endcta .btn{width:100%; justify-content:center} }

.next{margin-top:clamp(46px,6vw,72px)}
.next .k{font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.2em;
  color:var(--mint-ink); margin-bottom:20px}
.ngrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .ngrid{grid-template-columns:1fr} }
.ncard{display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:13px; padding:12px; background:var(--panel);
  transition:border-color .22s ease, transform .22s ease}
.ncard:hover{border-color:rgba(34,190,198,.5); transform:translateY(-3px)}
.ncard img{width:88px; height:58px; object-fit:cover; border-radius:8px; flex:none}
.ncard .nt{font-size:15px; font-weight:600; line-height:1.45; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ncard .nd{margin-top:5px; font-family:"Jost",sans-serif; font-size:12.5px; color:var(--faint)}

/* ═══ 좁은 화면 — 여기가 마지막이라 위 규칙들을 덮는다 ═══ */
@media (max-width:1000px){
  main{padding-top:56px}
  .layout{display:flex; flex-direction:column; gap:22px; padding-top:26px}
  .layout .side{display:contents; position:static}
  .layout .toc{order:1; width:100%; align-self:stretch}
  .layout .art{order:2; min-width:0; max-width:100%}
  .layout .dl{order:3}
  .art h2{scroll-margin-top:80px}
}

/* 비교표 안 도메인·연도 줄 — korea-geo-agency-comparison · geo-consulting-agency-guide 가 쓴다.
   (2026-09-26 두 글에만 있던 규칙을 여기로 옮김: 이제 글 스타일은 이 <style> 하나가 정본이다) */
.art .dimx{display:block; margin-top:3px; font-size:.86em; color:var(--faint); font-weight:400}

/* 2026-09-10 키보드 포커스 표시 (WCAG 2.4.7). 마우스 클릭에는 나타나지 않는다. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid #3ADCE4; outline-offset:3px; border-radius:4px}

/* SVCROLL-CSS */
/* ── 푸터 서비스 띠배너 (2026-09-13 리디자인) ─────────────────────
   색은 값을 직접 적는다. 이 사이트는 스크롤할 때마다 JS 가 색 변수를 다시 칠하는데
   푸터는 그 대상이 아니라서 변수를 쓰면 화면마다 다른 색이 나온다. 지우지 말 것. */
/* ★ width:100% / align-self:stretch 를 지우지 말 것.
   메인(/)의 푸터는 가운데정렬 flex 안에 있는데, 이 배너는 안쪽이 전부 absolute 라
   '내용 폭'이 0 이다. 폭을 안 박아 두면 48px 로 찌그러진다(2026-09-12 실측). */
.bnr{margin:34px 0 26px; text-align:left; width:100%; max-width:100%;
  align-self:stretch; flex:0 0 auto; box-sizing:border-box}
.bnr-w{position:relative; width:100%; border-radius:18px; overflow:hidden; box-sizing:border-box;
  border:1px solid #1E4C4F; background:#061A1C;
  box-shadow:0 0 0 1px rgba(34,190,198,.08), 0 0 34px -12px rgba(34,190,198,.30),
             0 20px 44px -22px rgba(0,0,0,.85)}
.bnr-l{list-style:none; margin:0; padding:0; position:relative; width:100%; aspect-ratio:1600/400}
/* ★ 여기에 visibility 를 쓰면 안 된다. (2026-09-12 사고)
   이 사이트는 화면 밖 구역을 section 에 visibility:hidden 으로 감춘다. 그런데
   .bnr-s.on 에 visibility:visible 을 주면 그 상속을 덮어 버려서, 푸터에 있어야 할 배너가
   첫 화면(히어로) 위로 떠올랐다. 보이고 안 보이고는 opacity 로만 다룬다. */
.bnr-s{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s ease}
.bnr-s.on{opacity:1; pointer-events:auto}
.bnr-s > a{display:block; position:absolute; inset:0; text-decoration:none}
.bnr-s img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* 문구 — 왼쪽에 민트 세로 막대를 세워 시선을 잡는다 */
.bnr-c{position:absolute; left:clamp(20px,4%,54px); top:50%; transform:translateY(-50%);
  width:min(52%,620px); display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding-left:16px; border-left:3px solid #22BEC6}
.bnr-s.on .bnr-c{animation:bnrIn .55s cubic-bezier(.22,.8,.3,1) both}
@keyframes bnrIn{from{opacity:0; transform:translateY(calc(-50% + 14px))} to{opacity:1}}
.bnr-tag{font-size:12px; font-weight:700; color:#3ADCE4; letter-spacing:.06em}
.bnr-tag i{font-style:normal; color:#6E8788; margin:0 3px}
.bnr-t{font-size:clamp(18px,2.15vw,33px); line-height:1.3; font-weight:800; color:#F4EFE6;
  letter-spacing:-.022em; word-break:keep-all}
/* 문구는 화면 폭에 따라 갈아 끼운다 — PC 는 두 줄 원문, 폰은 짧은 한 덩어리 */
.bnr-t .t-mb{display:none}
/* 2026-09-26 문구안 형식 — 큰 제목 아래 '설명'은 작은 글씨 한 줄 */
.bnr-t .t-sub{display:block; margin-top:7px; font-size:.56em; font-weight:500; line-height:1.4;
  color:#CFE0DF; letter-spacing:-.01em}
/* min-height 40px — 페이지마다 기본 글자 크기가 달라 어떤 곳에서는 31px 까지 작아졌다.
   손가락으로 누르는 버튼이라 높이를 직접 박는다. 지우지 말 것. (2026-09-12) */
.bnr-go{display:inline-flex; align-items:center; gap:7px; margin-top:5px; min-height:42px;
  padding:0 20px; border-radius:999px; background:#22BEC6; color:#000000;
  font-size:13.5px; font-weight:800; line-height:1; letter-spacing:-.01em;
  box-shadow:0 8px 20px -10px rgba(34,190,198,.9); transition:background .2s, transform .2s}
.bnr-go i{font-style:normal; transition:transform .2s}
/* 버튼 글자는 화면 폭에 따라 갈아 끼운다 — 폰은 '바로가기' (얇은 띠라 자리가 없다) */
.bnr-go b{font-weight:inherit}
.bnr-go .go-mb{display:none}
.bnr-s > a:hover .bnr-go{background:#3ADCE4; transform:translateY(-1px)}
.bnr-s > a:hover .bnr-go i{transform:translateX(3px)}

/* 조작 바 — 그림 아래. 몇 번째인지 · 언제 넘어가는지 · 직접 넘기기 */
.bnr-bar{display:flex; align-items:center; gap:14px; padding:11px 16px;
  background:#061A1C; border-top:1px solid #123638}
.bnr-num{flex:0 0 auto; font-size:12px; font-weight:800; color:#6E8788; letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.bnr-num b{color:#3ADCE4; font-weight:800}
.bnr-num i{font-style:normal; margin:0 3px; opacity:.6}
.bnr-prog{flex:1 1 auto; height:3px; min-width:40px; border-radius:99px; background:#123638; overflow:hidden}
.bnr-prog > i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#10595D,#22BEC6 55%,#3ADCE4)}
.bnr-prog.run > i{animation:bnrFill 5s linear forwards}
.bnr-prog.hold > i{animation-play-state:paused}
@keyframes bnrFill{from{width:0} to{width:100%}}
.bnr-d{flex:0 0 auto; display:flex; gap:0}
.bnr-dot{width:6px; height:6px; padding:7px; box-sizing:content-box; background-clip:content-box;
  border:0; border-radius:50%; background-color:#1E4C4F; cursor:pointer; transition:.3s}
.bnr-dot:hover{background-color:#3ADCE4}
.bnr-dot.on{background-color:#22BEC6; width:18px; border-radius:99px}
.bnr-navs{flex:0 0 auto; display:flex; gap:8px}
/* ★ 2026-09-13 — 띠배너는 33개 문서에 그대로 얹히기 때문에, 각 문서가 원래 갖고 있던
   이름이 겹치면 그 문서의 규칙이 배너 안으로 흘러든다. 실제로 /geo-consulting 의
   '다음 구역' 규칙 .next{margin-top:clamp(46px,6vw,72px)} 가 배너의 다음 버튼
   .bnr-nav.next 에 걸려, 그 페이지에서만 조작 바가 46px 밀려 내려가 배너 전체 높이가
   113px → 159px 로 튀었다. 겹치는 이름이 또 나와도 배너가 흔들리지 않도록,
   바깥에서 들어올 수 있는 여백·자리 지정을 여기서 못 박아 둔다. */
.bnr-navs .bnr-nav{margin:0; position:static; float:none; inset:auto; transform:none}
.bnr-nav{width:34px; height:34px; border-radius:50%; border:1px solid #1E4C4F;
  background:#0A2426; color:#F4EFE6; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; transition:.2s}
.bnr-nav:hover{background:#123638; border-color:#22BEC6; color:#3ADCE4}
/* 움직임을 줄여 달라고 설정한 사람에게는 저절로 넘어가지 않고, 들어오는 연출도 없앤다. */
@media (prefers-reduced-motion:reduce){
  .bnr-s{transition:none}
  .bnr-s.on .bnr-c{animation:none}
  .bnr-prog.run > i{animation:none; width:100%}
}
@media (max-width:720px){
  /* ★★ 2026-09-13 대표 지시 — 폰은 PC 레이아웃을 그대로 줄여 쓰지 않는다.
     PC 판(스크린샷 + HTML 문구)을 폰에 그대로 넣었더니 배너 한 장이 화면 한 장만큼 커져서
     푸터 구조가 통째로 무너졌다("모든 화면의 구조가 망가졌다").
     폰에서는 아예 다른 물건으로 만든다:
       · 자리는 가장 최하단(푸터 아래). 자리를 옮기는 일은 아래 JS 가 한다.
       · 모양은 '네이버 띠배너' — 아래 3차 지시 참고.
     이 규칙을 되돌리려면 PC 판을 폰에 다시 넣는 것이므로, 지우기 전에 대표 확인 필요. */
  .bnr{margin:18px 0 0; order:99}
  .bnr-w{border-radius:12px}
  /* ★★ 2026-09-13(3차) 대표 지시 — "네이버 띠배너처럼". 위아래가 길면 띠가 아니다.
     16:9 그림을 통째로 깔았더니 240px 이 되어 다시 화면 한 장을 먹었다.
     → 네이버·이음웹 띠배너와 같은 구조로 바꾼다:
         [ 정사각 그림 타일 ][ 서비스명(작게) + 후킹 문구 ][ 바로가기 ]
       띠 높이 **72px** 고정(약 5:1). 그림은 X에딧으로 만든 배너에서 목업 부분만
       잘라낸 정사각 타일 bn-<키>-t.jpg(240×240).
     ★ 문구를 그림에 굽지 않고 HTML 로 올리는 이유: 72px 띠에서 구운 글자는
       축소되어 뭉개진다. 이 구조에서는 문구를 SVC 배열에서 바로 고칠 수 있다. */
  .bnr-l{aspect-ratio:auto; height:72px}
  .bnr-s > a{display:flex; align-items:center; gap:11px; position:absolute; inset:0; padding:0}
  .bnr-s picture{position:relative; display:block; flex:0 0 72px; width:72px; height:72px;
    overflow:hidden; background:#0A2426}
  .bnr-s img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .bnr-c{position:static; transform:none; width:auto; flex:1 1 auto; min-width:0;
    display:grid; grid-template-columns:1fr auto; grid-template-areas:"tag go" "ttl go";
    align-items:center; column-gap:8px; row-gap:1px;
    padding:0 11px 0 0; border-left:0; animation:none}
  /* ★ 2026-09-13(4차) 대표 지시 — "텍스트가 비어 보인다. 더 키워서 강조."
     띠 높이(72px)는 그대로 두고 글자만 키운다. 대신 폰에서는 짧은 문구(SVC 7번 칸)를
     쓰므로 키워도 잘리지 않는다. 긴 원문을 다시 넣으면 바로 잘리니 주의. */
  .bnr-t .t-pc{display:none}
  .bnr-tag{grid-area:tag; align-self:end; font-size:11px; letter-spacing:.02em; font-weight:800}
  .bnr-t{grid-area:ttl; align-self:start; font-size:clamp(14px,4.1vw,17px);
    line-height:1.24; font-weight:800; word-break:keep-all; color:#FFFFFF; display:block}
  /* ★ 두 줄 자르기는 '보이는 글'(.t-mb)에만 건다. 예전처럼 바깥(.bnr-t)에 걸면
     display:none 인 PC 문구(.t-pc)까지 -webkit-box 의 줄 수로 세어져서,
     실제로는 멀쩡한데 '잘렸다'고 나온다(2026-09-13 QC 오탐의 원인). */
  .bnr-t .t-mb{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden}
  /* 오른쪽이 비어 보인다는 지적 — 알약을 키우고 민트로 꽉 채워 무게를 준다 */
  .bnr-go{grid-area:go; align-self:center; margin-top:0; min-height:36px; padding:0 15px;
    font-size:12.5px; font-weight:800; white-space:nowrap; gap:5px;
    box-shadow:0 6px 16px -8px rgba(34,190,198,.9)}
  .bnr-go .go-pc{display:none}
  .bnr-go .go-mb{display:inline}
  .bnr-s.on .bnr-c{animation:bnrInM .45s cubic-bezier(.22,.8,.3,1) both}
  @keyframes bnrInM{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
  /* 조작 바도 띠에 맞춰 얇게 — 배너보다 바가 두꺼우면 안 된다 */
  .bnr-bar{gap:9px; padding:6px 10px}
  .bnr-d{display:none}          /* 점 13개는 폰에서 너무 빽빽하다 — 순번과 화살표로 충분 */
  .bnr-nav{width:26px; height:26px; font-size:14px}
  .bnr-num{font-size:10.5px}
}
/* ★ 좁은 폰(갤럭시 기본 360px 등) — '바로가기' 알약이 55px 를 먹는 바람에
   문구 자리가 모자라 13장 중 7장이 잘렸다(2026-09-13 실측).
   이 폭에서는 알약을 동그란 화살표 하나로 줄여 문구에 자리를 넘긴다.
   띠 전체가 링크라 화살표만으로도 눌린다. 그림 타일도 64px 로 줄인다. */
@media (max-width:412px){
  .bnr-s picture{flex:0 0 68px; width:68px; height:68px}
  .bnr-s > a{gap:10px}
  .bnr-c{padding-right:10px; column-gap:8px}
  /* 글자를 키운 만큼 알약은 동그란 화살표로 줄인다. 대신 지름을 키우고 민트로 꽉 채워
     '비어 보인다'는 느낌이 안 나게 한다(2026-09-13 4차). */
  .bnr-go{width:34px; min-width:34px; min-height:34px; padding:0; border-radius:50%;
    justify-content:center; gap:0}
  .bnr-go .go-mb{display:none}
  .bnr-go i{font-size:16px; font-weight:800}
}
/* SVCROLL-CSS */

/* XRCTA-CSS */
/* ── 리포트 CTA (2026-09-13 마케팅 요청) ───────────────────────────
   색은 값을 직접 적는다. 스크롤할 때 JS 가 색 변수를 다시 칠하므로 변수를 쓰면 화면마다 달라진다. */
.xr-cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:9990;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(3,16,17,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid #1E4C4F; box-shadow:0 -10px 30px -16px rgba(0,0,0,.9);
  transform:translateY(110%); transition:transform .32s cubic-bezier(.22,.8,.3,1)}
.xr-cta-bar.on{transform:translateY(0)}
.xr-cta-text{color:#F4EFE6; font-size:13px; line-height:1.35; font-weight:700;
  flex:1 1 auto; min-width:0; word-break:keep-all}
.xr-cta-btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:0 18px; border-radius:999px; background:#22BEC6; color:#000000;
  text-decoration:none; font-size:14px; font-weight:800; white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(34,190,198,.9)}
.xr-cta-btn i{font-style:normal}
.xr-cta-btn:hover{background:#3ADCE4}
@media (min-width:768px){ .xr-cta-bar{display:none} }
@media (prefers-reduced-motion:reduce){ .xr-cta-bar{transition:none} }

.xr-inline-cta{margin:26px 0 30px; padding:20px 22px; border-radius:16px;
  border:1px solid #1E4C4F; border-left:4px solid #22BEC6; background:#0A1F21;
  box-shadow:0 0 26px -14px rgba(34,190,198,.55)}
.xr-inline-cta p{margin:0 0 14px; font-size:15px; line-height:1.62; color:#CFE0DF; word-break:keep-all}
.xr-inline-cta strong{color:#F4EFE6; font-size:17px; font-weight:800}
.xr-inline-cta a{display:inline-flex; align-items:center; gap:7px; min-height:46px;
  padding:0 22px; border-radius:999px; background:#22BEC6; color:#000000;
  text-decoration:none; font-size:14.5px; font-weight:800;
  box-shadow:0 8px 20px -10px rgba(34,190,198,.9); transition:background .2s}
.xr-inline-cta a i{font-style:normal; transition:transform .2s}
.xr-inline-cta a:hover{background:#3ADCE4}
.xr-inline-cta a:hover i{transform:translateX(3px)}
@media (max-width:720px){
  .xr-inline-cta{padding:17px 18px; margin:22px 0 26px}
  .xr-inline-cta p{font-size:14px}
  .xr-inline-cta strong{font-size:16px}
}/* XRCTA-CSS */


/* ══════ PB-0913 대표 지시 ══════ */
/* ① 글 머리 여백을 절반으로. 원래 clamp(104px,13vw,150px) 이라
      모바일에서 상단 바 아래로 빈 검은 화면이 96px 이나 남았다(실측). */
.phead{padding-top:clamp(52px,6.5vw,75px)}
/* ② 메타줄 — 360px 에서 두 줄로 접히며 'X-ON 편집팀' 만 따로 떨어져 보였다.
      간격과 글자를 조금 줄여 한 줄에 들어오게 하고, 접히더라도 세로 가운데를 맞춘다. */
.pmeta{gap:10px; align-items:center}
.pmeta .meta{line-height:1.5}
@media (max-width:430px){ .pmeta{gap:8px} .pmeta .meta{font-size:11.6px} }
/* ④ 표 — 표가 글 영역을 밀어내 페이지 전체에 가로 스크롤이 생겼다(390px 에서 76px).
      표를 감싼 칸 안에서만 옆으로 넘기게 해 페이지는 고정한다. */
.art .tw{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:20px 0; border:1px solid var(--line); border-radius:12px}
.art .tw > table{margin:0; border:0; min-width:0}
.art .tw > table th, .art .tw > table td{white-space:normal; word-break:keep-all}
@media (max-width:720px){
  .art .tw > table{min-width:520px; font-size:.84em}
  .art .tw > table th, .art .tw > table td{padding:9px 10px}
}
/* ④-2 모바일에서는 표를 '행 = 카드'로 눕힌다 (2026-09-26 대표 지시).
   ④ 처럼 상자 안에서 옆으로 밀게 두면 셋째 열(대개 결론 열)이 화면 밖에 숨고, 밀 수 있다는 것을
   모르는 사람이 많다. X-RAY 회차 페이지와 같은 방식 — 머리글은 감추고 각 칸 앞에 열 이름(data-l)을 붙인다.
   data-l 은 원고의 <td> 에 들어 있다(첫 열 이름이 빈 표는 첫 칸에 data-l 이 없다). 콘솔 글(.tblw)은 해당 없음. */
@media (max-width:720px){
  .art .tw{overflow:visible; border:0; border-radius:0; margin:20px 0}
  .art .tw > table{display:block; min-width:0; width:100%; font-size:15px}
  .art .tw > table thead{display:none}
  .art .tw > table tbody{display:block}
  .art .tw > table tr{display:block; border:1px solid var(--line); border-radius:14px;
    background:var(--panel); padding:14px 16px 15px}
  .art .tw > table tr + tr{margin-top:10px}
  .art .tw > table td{display:block; border:0; padding:0; line-height:1.7; color:var(--soft)}
  .art .tw > table td + td{margin-top:8px}
  .art .tw > table td:empty{display:none}
  /* 첫 칸 = 카드 제목 (열 이름은 작은 머리말로) */
  .art .tw > table td:first-child{font-size:16px; font-weight:600; color:var(--ink);
    padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line)}
  .art .tw > table td:first-child[data-l]::before{content:attr(data-l); display:block;
    font-family:"Jost",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.14em;
    color:var(--mint-ink); margin-bottom:3px}
  /* 나머지 칸 = 열 이름 | 값 */
  .art .tw > table td + td[data-l]{display:grid; grid-template-columns:minmax(58px,34%) 1fr;
    gap:2px 12px; align-items:baseline}
  .art .tw > table td + td[data-l]::before{content:attr(data-l); font-size:12.6px; line-height:1.6;
    color:var(--faint); word-break:keep-all}
}
/* ⑤ FAQ — 질문만 보이고, 누르면 답이 열린다. 처음엔 전부 닫힌 상태. */
/* ★ 옛 .fq 는 그냥 네모 칸이라 padding:18px 20px 이 걸려 있었다. 그대로 두면
   summary 자체 여백과 겹쳐 질문 두 줄짜리 칸이 120px 이나 됐다(실측). 0 으로 눕힌다. */
.faqs .fq{border:1px solid var(--line); border-radius:12px; background:var(--panel);
  margin-top:10px; overflow:hidden; padding:0}
.faqs .fq > summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  gap:12px; padding:15px 17px; font-weight:600; line-height:1.55; margin:0}
.faqs .fq > summary::-webkit-details-marker{display:none}
.faqs .fq > summary::after{content:""; flex:0 0 10px; width:10px; height:10px; margin-left:auto;
  margin-top:.45em; border-right:2px solid var(--mint); border-bottom:2px solid var(--mint);
  transform:rotate(45deg); transition:transform .2s ease}
.faqs .fq[open] > summary::after{transform:rotate(-135deg)}
.faqs .fq > summary:hover{color:var(--mint-ink)}
.faqs .fq > .a{margin:0; padding:0 17px 16px; line-height:1.75; color:var(--soft)}
/* ★ 접혀 있을 때 답이 그대로 보이던 문제(2026-09-13 실측 — open 은 false 인데 답 높이가 231px).
   이 글들에는 details 안쪽을 강제로 펼치는 옛 규칙이 남아 있다. 원인을 따지지 말고
   '닫혀 있으면 감춘다'를 직접 못 박는다. */
.faqs .fq:not([open]) > .a{display:none}

/* ⑥ NEXT → 관련 글 3개. 가로로 밀어 보는 배너. */
.next .k{margin-bottom:14px}
.relrow{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:thin}
.relrow::-webkit-scrollbar{height:6px}
.relrow::-webkit-scrollbar-thumb{background:rgba(34,190,198,.35); border-radius:99px}
.relcard{scroll-snap-align:start; display:flex; gap:13px; align-items:center;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:12px; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s}
.relcard:hover{border-color:rgba(34,190,198,.5); transform:translateY(-3px)}
.relcard img{flex:0 0 76px; width:76px; height:76px; object-fit:cover; border-radius:10px; background:#0A2426}
.relcard .rc{min-width:0}
.relcard .rcat{font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.12em; color:var(--mint-ink)}
.relcard .rtit{margin-top:5px; font-size:14.5px; font-weight:600; line-height:1.45;
  word-break:keep-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
@media (min-width:1001px){ .relrow{grid-auto-columns:1fr; overflow-x:visible} }
/* ⑦ 내려받기 카드 — '이 글의 차례' 바로 밑, 한 줄, 가운데. */
.dl.one{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; margin-top:12px; text-align:center}
.dl.one .t{font-size:15.5px; font-weight:600; line-height:1.5; margin:0; word-break:keep-all}
.dl.one .t span{color:var(--faint); font-weight:400; font-size:13px; white-space:nowrap}
.dl.one .btn{margin:0; width:auto; flex:0 0 auto; font-size:14px; padding:10px 20px}
@media (max-width:600px){ .dl.one{flex-direction:column; gap:11px} .dl.one .btn{width:100%} }

/* ══════ PB-0913 끝 ══════ */

/* 2026-10-16 메타 줄(날짜 · 읽는 시간 · 작성자) — 항목 안에서는 줄을 바꾸지 않고 항목 사이에서만 바꾼다.
   390px 에서 '2026-10-' / '16', '읽는 데' / '6분' 처럼 잘리던 것. 폰에서는 줄 머리에 점이 남지 않게 점 대신 간격만 둔다. */
.pmeta .meta{display:inline-flex; flex-wrap:wrap; align-items:baseline; column-gap:.45em; row-gap:3px; white-space:nowrap; max-width:100%}
.pmeta .meta .mi{white-space:nowrap}
@media (max-width:760px){ .pmeta .meta > i{display:none} .pmeta .meta{column-gap:12px} }