@charset "utf-8";
/* ==========================================================================
   전북대학교 발전지원재단 — 공용 스타일
   토큰 · 레이아웃 · 헤더 · 브레드크럼 · 히어로 · CTA · 푸터 · 유틸리티
   ========================================================================== */

/* --------------------------------------------------------------------------
   손글씨 웹폰트 — 김정철손글씨 (㈜정림건축, 눈누 배포 / 상업용 무료)
   기부자 한마디 본문에만 쓴다. 굵기가 하나뿐이라 400 · 700 에 같은 파일을 물린다.
   출처와 라이선스는 assets/fonts/README.md 참고.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"KimjungchulScript";
  src:url("../fonts/KimjungchulScript-Bold.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"KimjungchulScript";
  src:url("../fonts/KimjungchulScript-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* --------------------------------------------------------------------------
   컬러 팔레트 — 전북대학교 UI 계열
   fund.jbnu.ac.kr 의 실제 스타일시트(layout1/main2.css)에서 추출한 값을 기준으로
   삼았다. 실측값: 메인블루 #0074b0, 딥네이비 #0a3156, 기부CTA #3b75c0,
   모바일GNB #2c50a6, 보조블루 #0585bd·#1985bd, 오렌지 #ed8e1f, 푸터 #343434.
   --brand-strong / --sky-soft 등 중간 단계는 위 실측색에서 파생시킨 명도 변형이다.
   -------------------------------------------------------------------------- */
:root{
  --navy:#0a3156;          /* 딥네이비 — 유틸바 · 다크 패널 */
  --brand:#0074b0;         /* 전북대 메인 블루 — 활성메뉴 · 링크 · 태그 */
  --brand-strong:#005681;  /* 본문 대비용 진한 블루 (--brand 파생) */
  --royal:#3b75c0;         /* 기부 CTA 버튼 블루 */
  --royal-deep:#2c50a6;    /* CTA 그라데이션 끝 · 모바일 GNB */
  --sky:#1985bd;           /* 보조 블루 */
  --sky-soft:#e3f1f8;      /* 연한 블루 배경 (--brand 파생 틴트) */
  --accent:#f7d117;        /* 하이라이트 옐로 (JBNU #fcff00 계열 완화) */
  --accent-deep:#ed8e1f;   /* 오렌지 포인트 */

  --bg:#ffffff;
  --bg-alt:#f2f7fa;
  --surface:#ffffff;
  --line:#e0e8ee;
  --line-strong:#c7d6e0;
  /* 입력칸·선택칸의 테두리 전용.
     WCAG 1.4.11 은 '글자가 아닌 것' 중에서도 무엇이 조작할 수 있는
     칸인지 알려 주는 테두리에는 3:1 을 요구합니다. --line-strong 은
     1.49:1 이라 저시력인 분께는 칸의 경계가 보이지 않았습니다.
     빈 칸이 어디부터 어디까지인지 모르면 아예 쓸 수가 없습니다. */
  --field-line:#768ea3;        /* 흰 바탕 3.40:1 */
  --text:#1b242e;
  --text-mid:#495765;
  /* 흐린 글자. 흰 바탕만 보고 정하면 옅은 회색(#f2f6fa)이나 하늘틴트
     (#e3f1f8) 위에서 4.5:1 에 못 미칩니다. 세 바탕 모두에서 넘도록
     조금 더 어둡게 잡았습니다 (하늘틴트 4.87 · 옅은회색 5.17 · 흰 5.62). */
  --text-dim:#5d6974;
  --footer-bg:#343434;

  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;
  --shadow-s:0 1px 2px rgba(16,32,56,.06),0 4px 12px rgba(16,32,56,.05);
  --shadow-m:0 10px 30px rgba(16,32,56,.10);
  --shadow-l:0 24px 60px rgba(10,49,86,.18);

  --maxw:1180px;
  --header-h:72px;
  --font:"Noto Sans KR","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* hidden 속성이 항상 이기도록. 클래스에 display 를 준 요소(예: display:grid)는
   브라우저 기본 [hidden]{display:none} 을 덮어써서 숨겨지지 않는다. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
/* 게시판 화면은 본체의 css/default.css 를 함께 싣는데, 거기서 제목(h1~h6) ·
   입력칸에 'Malgun Gothic' 을 직접 겁니다. 그래서 게시판 머리(히어로)의 큰
   제목만 인사말 등 다른 화면과 글꼴이 달랐습니다. 사이트 글꼴을 이어받게 합니다. */
h1,h2,h3,h4,h5,h6,input,textarea,select{font-family:inherit}
/* 브라우저가 기본으로 주는 여백을 지운다.
   figure · blockquote 는 UA 스타일시트에서 margin:1em 40px 를 받는데,
   이걸 그냥 두면 카드가 설계보다 80px 넓어져 줄바꿈·가로 배치가 어긋난다.
   (기부자 한마디 카드가 한 화면에 세 장이 아니라 두 장만 들어가던 원인) */
figure,blockquote,figcaption,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-s) 0;font-weight:700;
}
.skip:focus{left:0}

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

/* 화면이 열리자마자 오류 안내로 초점을 옮길 때(site.js) — 안내 상자 자체가
   이미 눈에 띄므로 마우스 사용자에게 네모까지 그려 줄 필요는 없습니다.
   키보드로 되짚어 왔을 때는 :focus-visible 로 그대로 보입니다. */
[data-focus-quiet]:focus{outline:none}

/* ---------- 유틸리티 바 ---------- */
.utility{background:var(--navy);color:rgba(255,255,255,.72);font-size:12.5px}
.utility__inner{display:flex;justify-content:flex-end;align-items:center;gap:22px;height:36px}
.utility a{transition:color .18s;white-space:nowrap}
.utility a:hover{color:#fff}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{height:var(--header-h);display:flex;align-items:center;gap:24px}
/* 내리기 시작하면 옅은 그림자 — 머리 부분이 본문 위에 떠 있는 것이 보이게 (site.js) */
.header{transition:box-shadow .25s ease,background-color .25s ease}
.header.is-scrolled{background:rgba(255,255,255,.97);box-shadow:0 10px 28px -18px rgba(10,49,86,.45)}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo__img{height:30px;width:auto;display:block}

/* ---------- GNB + 메가메뉴 ---------- */
.gnb{margin-left:auto;display:flex;align-items:center;gap:4px}
.gnb__item{position:relative}
.gnb__top{
  display:block;padding:10px 18px;border-radius:999px;
  font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;
  transition:background .18s,color .18s;
}
.gnb__top:hover,.gnb__item.is-open .gnb__top{background:var(--sky-soft);color:var(--brand-strong)}
.gnb__item.is-active .gnb__top{color:var(--brand-strong)}
.gnb__item.is-active .gnb__top::after{
  content:"";display:block;height:3px;margin:6px 14px -9px;border-radius:2px;background:var(--brand);
}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 24px 48px rgba(10,49,86,.14);
  animation:megaIn .18s ease-out;
}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega__grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  padding-block:28px 32px;
}
.mega__col{padding-inline:18px;border-right:1px solid var(--line);min-width:0}
.mega__col:last-child{border-right:0}
.mega__title{
  font-size:15px;font-weight:900;color:var(--navy);margin-bottom:14px;
  padding-bottom:12px;border-bottom:2px solid var(--brand);
}
.mega__col.is-active .mega__title{color:var(--brand)}
.mega__col a{
  display:block;padding:8px 0;font-size:14px;color:var(--text-mid);
  transition:color .16s,transform .16s;word-break:keep-all;
}
.mega__col a:hover{color:var(--brand);transform:translateX(3px)}
.mega__col--cta{display:flex;flex-direction:column;justify-content:flex-start;gap:12px}
.mega__cta{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  padding:14px 16px!important;border-radius:var(--radius-s);
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));
  color:#fff!important;font-size:15px!important;font-weight:800;
  box-shadow:0 8px 20px rgba(59,117,192,.3);
}
.mega__cta:hover{transform:translateY(-2px)!important;color:#fff!important}
.mega__ctanote{font-size:12.5px;line-height:1.7;color:var(--text-dim);word-break:keep-all}

/* 관리자 버튼 — 등록된 관리자 IP 에서 접속했을 때만 나옵니다.
   일반 방문자에게는 아예 그려지지 않습니다 (partials/_adminip.php) */
.mega__admin{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;
  padding-top:12px;border-top:1px dashed var(--line)}
.drawer__admin{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mega__admin .mega__adminbtn,
.drawer__admin .mega__adminbtn{flex:1}
/* 기부자인터뷰는 관리자1·2 아래 줄에 혼자 놓입니다 */
.mega__admin .mega__adminbtn--story,
.drawer__admin .mega__adminbtn--story{flex:0 0 100%}
.mega__adminbtn{
  display:inline-flex!important;align-items:center;justify-content:center;
  padding:9px 12px!important;border-radius:var(--radius-s);
  border:1px solid #f0a8c6;background:#fdeaf2;
  color:#a3225c!important;font-size:13px!important;font-weight:800;
  letter-spacing:-.02em;white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s;
}
.mega__adminbtn:hover,.mega__adminbtn:focus-visible{
  border-color:#d6417f;background:#d6417f;color:#fff!important;transform:none!important;
}
/* 기부자인터뷰 — 관리자1·2 와 구분되게 녹색 */
.mega__adminbtn--story{
  border-color:#9ad3b6;background:#e9f7ef;color:#12683f!important;
}
.mega__adminbtn--story:hover,.mega__adminbtn--story:focus-visible{
  border-color:#157a4f;background:#157a4f;color:#fff!important;
}

.cta-top{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border-radius:999px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));
  box-shadow:0 6px 18px rgba(59,117,192,.32);
  transition:transform .18s,box-shadow .18s;
}
.cta-top:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(59,117,192,.4)}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:12px;cursor:pointer;align-items:center;justify-content:center;
}

/* ---------- 모바일 드로어 ---------- */
.drawer{
  border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-m);
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
}
.drawer__nav{display:flex;flex-direction:column;padding-block:8px 20px}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__group summary{
  list-style:none;cursor:pointer;padding:15px 4px;
  font-size:16px;font-weight:700;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group summary::after{
  content:"";width:9px;height:9px;margin-right:6px;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.drawer__group[open] summary{color:var(--brand)}
.drawer__group[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--brand)}
.drawer__links{display:flex;flex-direction:column;padding:2px 0 12px}
.drawer__links a{
  padding:11px 14px;font-size:15px;color:var(--text-mid);border-radius:8px;
}
.drawer__links a:hover{background:var(--bg-alt);color:var(--brand)}
.drawer__cta{
  margin-top:18px;text-align:center;padding:15px;
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));color:#fff;
  border-radius:999px;font-weight:800;font-size:16px;
}

/* ---------- Breadcrumb ---------- */
.crumbbar{border-bottom:1px solid var(--line);background:var(--surface)}
.crumbbar__inner{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.crumbbar__inner::-webkit-scrollbar{display:none}
.crumb{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:14px 22px;font-size:14px;color:var(--text-mid);
  border-right:1px solid var(--line);
}
.crumb:first-child{padding-inline:20px;color:var(--brand)}
.crumb[aria-current]{color:var(--navy);font-weight:700}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy) 0%,var(--brand) 55%,#1985bd 100%);
  color:#fff;
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{
  width:520px;height:520px;right:-140px;top:-220px;
  background:radial-gradient(circle at 30% 30%,rgba(79,195,232,.55),transparent 70%);
}
.hero::after{
  width:380px;height:380px;left:-120px;bottom:-200px;
  background:radial-gradient(circle at 50% 50%,rgba(247,209,23,.24),transparent 70%);
}

/* 화면 맨 위 제목 부분 — 열릴 때 제목 · 설명이 차례로 살짝 떠오르고,
   뒤의 둥근 빛 두 개가 아주 천천히 흘러 화면이 살아 있는 느낌을 줍니다.
   (움직임 줄이기를 켠 분께는 맨 아래 규칙이 모든 움직임을 끕니다) */
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-36px,28px) scale(1.08)}}
.hero__inner > .eyebrow,.hero__inner > h1,.hero__inner > p,.hero__inner > .stats{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both}
.hero__inner > h1{animation-delay:.08s}
.hero__inner > p{animation-delay:.16s}
.hero__inner > .stats{animation-delay:.24s}
.hero::before{animation:heroDrift 14s ease-in-out infinite alternate}
.hero::after{animation:heroDrift 18s ease-in-out -6s infinite alternate-reverse}
/* 움직임 줄이기 — 아래쪽 공통 규칙(*)은 ::before · ::after 에 걸리지 않아 따로 멈춥니다 */
@media (prefers-reduced-motion:reduce){ .hero::before,.hero::after{animation:none} }

/* 서브 비주얼 사진을 배경으로 쓰는 히어로 (기금 항목)
   사진은 기본 그라디언트 위에 얹기만 한다. 사진을 못 불러와도
   원래의 그라디언트 히어로가 그대로 보인다. */
.hero--photo::before,.hero--photo::after{opacity:.5}
.hero--photo .hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:72% center;
  opacity:.38;
}
.hero--items .hero__bg{background-image:url("../img/hero-items.jpg")}
.hero--status .hero__bg{background-image:url("../img/hero-status.jpg")}
.hero--payment .hero__bg{background-image:url("../img/hero-payment.jpg")}
.hero--faq .hero__bg{background-image:url("../img/hero-faq.jpg")}
.hero--greeting .hero__bg{background-image:url("../img/hero-greeting.jpg")}
.hero--history .hero__bg{background-image:url("../img/hero-history.jpg")}
.hero--location .hero__bg{background-image:url("../img/hero-location.jpg")}
.hero--donor .hero__bg{background-image:url("../img/hero-donor.jpg")}

/* 게시판 · 기념공간 · 명예의 전당 · 영수증 신청 (partials/_hero.php)
   ------------------------------------------------------------------
   사진은 assets/img/hero-*.jpg (1800×270 띠사진) 을 씁니다.
   새 사진을 받으면 이 표에서 파일 이름만 바꾸면 됩니다.
   주제가 같은 화면끼리는 일부러 같은 사진을 씁니다
   (후원의집 소식 · 후원의집·후원병원 / 기념공간 · 명예의 전당). */
.hero--fund      .hero__bg{background-image:url("../img/hero-fund.jpg")}      /* 모금사업 */
.hero--notice    .hero__bg{background-image:url("../img/hero-notice.jpg")}    /* 공지사항 */
.hero--news      .hero__bg{background-image:url("../img/hero-news.jpg")}      /* 발전기금 뉴스 */
.hero--beauty    .hero__bg{background-image:url("../img/hero-beauty.jpg")}    /* 아름다운 기부이야기 */
.hero--housenews .hero__bg{background-image:url("../img/hero-house.jpg")}     /* 후원의집 소식 */
.hero--down      .hero__bg{background-image:url("../img/hero-down.jpg")}      /* 자료실 */
.hero--memorial  .hero__bg{background-image:url("../img/hero-history.jpg")}   /* 기부자 기념공간 — 명패 벽이 실제로 찍혀 있어 이 사진을 씁니다 */
.hero--house     .hero__bg{background-image:url("../img/hero-house.jpg")}     /* 후원의집·후원병원 */
.hero--honor     .hero__bg{background-image:url("../img/hero-honor-gold.jpg")} /* 명예의 전당 — 크림색 비단 · 금 리본 (색 · 글꼴은 honor-search.css) */
.hero--receipt   .hero__bg{background-image:url("../img/hero-receipt.jpg")}   /* 기부금 영수증 신청 */
.hero--voices    .hero__bg{background-image:url("../img/hero-beauty.jpg")}   /* 기부자 한마디 — 학생들이 나란히 걷는 사진. 후배들에게 건네는 말이라는 결과 맞습니다 */
/* 사진 위에 덧씌워 본문 대비를 확보하는 스크림 */
.hero--photo .hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,49,86,.86) 0%,rgba(59,117,192,.66) 55%,rgba(25,133,189,.52) 100%);
}

.hero__inner{position:relative;padding:76px 20px 92px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:13px;font-weight:700;letter-spacing:.04em;
}
.hero h1{
  margin-top:20px;
  font-size:clamp(30px,5.2vw,50px);font-weight:900;letter-spacing:-.035em;line-height:1.22;
  /* 한글은 낱말 가운데서도 줄이 넘어갑니다. '기금 항목을' 이 '기금 항목' / '을'
     처럼 갈라지면 읽다가 걸리므로, 낱말째로 넘기게 합니다. */
  word-break:keep-all;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{
  margin-top:18px;font-size:clamp(15px,2vw,18px);line-height:1.75;
  color:rgba(255,255,255,.86);max-width:760px;margin-inline:auto;word-break:keep-all;
}
/* 설명 글의 <br> 은 넓은 화면에서 문장을 끊어 읽기 좋게 두는 것입니다.
   좁은 화면에서는 그 자리가 어색하게 남으므로 지우고, 글이 자연스럽게
   흐르도록 둡니다(위의 word-break 가 낱말은 지켜 줍니다).
   원본에 <br> 앞뒤로 줄바꿈을 두었으므로 지워도 띄어쓰기는 남습니다.  */
@media (max-width:760px){
  .hero p br{display:none}
}
/* 타일은 개수만큼만 놓고 가운데로 모읍니다.
   3칸 격자로 두면 타일이 하나·둘일 때(명예의 전당 클럽 화면처럼)
   왼쪽으로 치우쳐 보입니다. */
.stats{
  margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  max-width:720px;margin-inline:auto;
}
.stat{
  flex:1 1 200px;max-width:280px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-m);padding:20px 14px;backdrop-filter:blur(6px);
}
.stat b{display:block;font-size:clamp(22px,3.4vw,30px);font-weight:900;letter-spacing:-.03em;
  word-break:keep-all}   /* 낱말 가운데서 끊겨 타일 높이가 들쭉날쭉해지지 않게 */
.stat span{font-size:13px;color:rgba(255,255,255,.78)}

/* 숫자 타일 대신 한 줄로 맺을 때 (partials/_hero.php 의 'note').
   명예의 전당 첫 화면처럼 세어 보일 숫자가 마땅치 않고, 고마움을
   전하는 편이 나은 곳에서 씁니다. */
.hero__note{
  margin:40px auto 0;max-width:660px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.26);
  font-size:clamp(15.5px,2.1vw,19px);font-weight:700;line-height:1.85;
  color:#fff;word-break:keep-all;
}

/* ---------- Section head ---------- */
.section{padding:84px 0 96px;background:var(--bg-alt)}
.section__head{text-align:center;max-width:660px;margin:0 auto 52px}
.section__head .tag{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--sky-soft);color:var(--brand-strong);font-size:13px;font-weight:700;letter-spacing:.03em;
}
.section__head h2{
  margin-top:16px;font-size:clamp(24px,3.6vw,34px);font-weight:900;letter-spacing:-.035em;line-height:1.3;
}
.section__head p{margin-top:14px;color:var(--text-mid);font-size:16px;word-break:keep-all}

/* ---------- Shared bits ---------- */
.chip{
  padding:5px 12px;border-radius:999px;background:var(--bg-alt);
  border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--text-mid);
}
.marker{
  background:linear-gradient(transparent 62%,rgba(247,209,23,.62) 62%);
  background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size .45s ease;display:inline;
}
.is-in .marker{background-size:100% 100%}

/* 화면에는 감추되 보조기기에는 읽히는 텍스트
   .sound_only 는 게시판(플라이보드) 쪽에서 쓰는 같은 뜻의 이름입니다.
   공용 헤더를 붙인 게시판 화면에서 '검색어 필수' 같은 글자가
   그대로 보이지 않도록 여기서 함께 잡아 둡니다. */
.sr-only,
.sound_only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ── 한 문단씩 나타나기 ────────────────────────────────────────────────
   [data-stage] 안의 <p> 를 위에서부터 한 덩이씩 띄웁니다. 편지를 눈으로
   따라 읽는 속도에 맞추려고 만들었습니다 (assets/js/site.js).

   숨기는 일은 <html> 에 js-stage 가 붙었을 때만 합니다. 그 글자는 페이지
   <head> 안의 한 줄짜리 스크립트가 붙이므로, 첫 그림이 그려지기 전에
   이미 정해집니다 — 글이 보였다가 숨는 깜빡임이 생기지 않습니다.

   자바스크립트가 꺼져 있으면 js-stage 가 없으니 글은 처음부터 그대로
   보입니다. 인사말은 그 화면의 본문이라, 안 보이는 쪽으로 기울면
   안 됩니다.                                                          */
.js-stage [data-stage] p{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--stage-delay,0ms);
}
.js-stage [data-stage] p.is-in{opacity:1;transform:none}

/* 형광펜(.marker)은 그 문단이 자리를 잡은 뒤에 그어집니다.
   .is-in 은 바깥 칸(.reveal)에도 붙는 글자라, 그냥 두면 문단이 뜨기도 전에
   이미 다 그어져 있습니다. 문단 자신의 .is-in 만 보도록 좁히고, 기다릴
   시간도 그 문단이 쓰는 값에 맞춥니다. */
.js-stage [data-stage] p .marker{background-size:0 100%}
.js-stage [data-stage] p.is-in .marker{
  background-size:100% 100%;
  transition-delay:calc(var(--stage-delay,0ms) + .45s);
}

/* ---------- CTA ---------- */
.cta{padding:0 0 96px;background:var(--bg-alt)}
.cta__box{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:linear-gradient(135deg,var(--navy),var(--brand) 70%,#1985bd);
  color:#fff;padding:56px 40px;text-align:center;box-shadow:var(--shadow-l);
}
.cta__box::before{
  content:"";position:absolute;width:420px;height:420px;right:-120px;bottom:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,209,23,.26),transparent 70%);
}
.cta__box h2{position:relative;font-size:clamp(22px,3.4vw,32px);font-weight:900;letter-spacing:-.035em;line-height:1.35;word-break:keep-all}
.cta__box p{position:relative;margin-top:14px;color:rgba(255,255,255,.85);font-size:16px;word-break:keep-all}
.cta__actions{position:relative;margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:16px;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.btn--solid{background:#fff;color:var(--navy);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.42)}
.btn:hover{transform:translateY(-2px)}
.btn--ghost:hover{background:rgba(255,255,255,.22)}

/* ---------- 다음 단계 링크 (여러 하위 페이지에서 공용) ---------- */
.next{
  margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 28px;border-radius:var(--radius-l);
  background:var(--bg-alt);border:1px solid var(--line);
}
.next__text{font-size:14.5px;color:var(--text-mid)}
.next__text b{color:var(--text);font-weight:800}
.next__link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:800;color:var(--brand-strong);white-space:nowrap;
}
.next__link:hover{text-decoration:underline}

/* ---------- 롤링 배너 (공용) ---------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{
  display:flex;gap:var(--gap,24px);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform;
}
.carousel__track > *{flex:0 0 auto}
.carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--navy);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-m);
  transition:background .18s,color .18s,transform .18s;
}
.carousel__nav:hover{background:var(--navy);color:#fff;transform:translateY(-50%) scale(1.06)}
.carousel__nav--prev{left:-14px}
.carousel__nav--next{right:-14px}
.carousel__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2px;margin-top:22px;max-width:100%}
/* 단추 자체를 24px 로 두고 보이는 점은 그 안에 그린다.
   예전에는 9px 단추에 투명한 24px 덧칠을 얹었는데, 점 사이가 17px 라
   누르는 자리가 서로 겹쳐 옆 점이 눌리곤 했다(WCAG 2.5.8 누르는 자리 크기).
   꺼진 점 색도 흰 바탕에서 1.4:1 로 거의 안 보여 3.5:1 로 올렸다(1.4.11). */
.carousel__dots button{
  display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;
  border:0;border-radius:999px;background:transparent;cursor:pointer;
}
.carousel__dots button::before{
  content:"";width:9px;height:9px;border-radius:999px;background:#7d8b97;
  transition:background .2s,width .2s;
}
.carousel__dots button.is-on::before{width:26px;background:var(--brand)}
.carousel__dots button:hover::before{background:var(--brand-strong)}
@media (prefers-reduced-motion:reduce){ .carousel__dots button::before{transition:none} }
/* 자동 넘김 멈춤 단추 (site.js — WCAG 2.2.2) */
.carousel__pause{
  display:flex;align-items:center;gap:6px;margin:8px auto 0;min-height:32px;padding:5px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:#fff;color:var(--text-mid);font:inherit;font-size:12.5px;font-weight:700;
}
.carousel__pause[hidden]{display:none}
.carousel__pause:hover{border-color:var(--brand);color:var(--brand-strong)}
.carousel__pause[aria-pressed="true"]{background:var(--sky-soft);border-color:var(--brand);color:var(--brand-strong)}
.carousel__pause:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* 넘길 칸이 10개를 넘으면 점 대신 위치 막대 + '3 / 26' (site.js) */
.carousel__dots.is-compact{flex-wrap:nowrap;align-items:center;gap:14px;width:min(420px,100%);margin-inline:auto}
.carousel__range{
  flex:1;min-width:0;height:24px;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;--p:0%;
}
.carousel__range::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;background:linear-gradient(90deg,var(--brand) var(--p),#7d8b97 var(--p));
}
.carousel__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);box-shadow:0 2px 6px rgba(10,49,86,.25);transition:transform .15s;
}
.carousel__range:hover::-webkit-slider-thumb{transform:scale(1.15)}
.carousel__range::-moz-range-track{height:4px;border-radius:999px;background:#7d8b97}
.carousel__range::-moz-range-progress{height:4px;border-radius:999px;background:var(--brand)}
.carousel__range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.carousel__range:focus{outline:none}
.carousel__range:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.carousel__count{flex:none;min-width:4.5em;text-align:right;font-size:13px;font-weight:700;color:var(--text-mid);font-variant-numeric:tabular-nums}

/* 누르는 순간 살짝 눌리는 느낌 — 단추 · 카드 · 바로가기.
   transform 대신 scale 을 써서, 이미 transform 으로 자리를 잡은 것(화살표 등)도 흐트러지지 않습니다. */
:where(button,.btn,.cta-top,.tile,[class*="__btn"],[class*="-btn"],[class*="__cta"],[class*="__go"],.carousel__nav,.quick a):not([disabled]):active{scale:.97}

@media (max-width:1240px){
  .carousel__nav--prev{left:4px}
  .carousel__nav--next{right:4px}
}
@media (max-width:560px){
  .carousel__nav{display:none}
}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg);color:#aebacb;padding:44px 0 52px;font-size:14px}
.footer__links{display:flex;flex-wrap:wrap;gap:2px 22px;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__links a{display:inline-block;padding:5px 0;transition:color .18s}
.footer__links a:hover{color:#fff}
.footer__links a:first-child{color:#fff;font-weight:700}
.footer__body{
  margin-top:30px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:36px;align-items:start;
}
.footer address{font-style:normal;line-height:1.9;font-size:13.5px;margin-top:16px}
/* 어두운 바탕(#343434) 위 글자는 4.5:1 을 넘어야 합니다.
   #7d8b9e 는 3.59:1 이라 모자랐습니다. */
.footer .copy{margin-top:14px;font-size:12.5px;color:#9aa7b7}
.footer__logo{display:flex;align-items:center;gap:10px;color:#fff}
.footer__logoimg{height:26px;width:auto;display:block}
.footer__sitemap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.footer__sitemap p{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:12px}
/* #8e9bad 는 4.41:1 로 아슬아슬하게 모자랐습니다 */
.footer__sitemap a{display:block;padding:4px 0;font-size:13px;color:#9aa7b7;transition:color .16s;word-break:keep-all}
.footer__sitemap a:hover{color:#fff}

/* ---------- Top button ---------- */
.top{
  position:fixed;right:22px;bottom:26px;z-index:90;
  width:50px;height:50px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--navy);box-shadow:var(--shadow-m);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
.top.is-show{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Responsive ---------- */
@media (min-width:1141px){
  .drawer{display:none}
}
/* 가로 메뉴가 다 들어가지 못하는 폭부터 드로어로 전환 */
@media (max-width:1140px){
  .gnb,.cta-top,.mega,.utility{display:none}
  .burger{display:flex}
}
@media (max-width:900px){
  .hero__inner{padding:60px 20px 72px}
  .section{padding:64px 0 72px}
  .cta{padding-bottom:72px}
  .footer__body{grid-template-columns:1fr;gap:30px}
}
@media (max-width:560px){
  .stats{gap:10px}
  .stat{flex:1 1 100%;max-width:none}
  .hero__note{margin-top:30px;padding-top:20px}
  .stat{display:flex;align-items:baseline;gap:10px;justify-content:center;padding:14px}
  .cta__box{padding:42px 24px}
  .btn{width:100%;justify-content:center}
  .footer__sitemap{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .js-stage [data-stage] p{opacity:1;transform:none}
  .marker{background-size:100% 100%}
}

/* 자동 입력(봇) 차단용 숨김 필드 — 사람 눈에는 보이지 않지만 화면낭독기가
   읽지 않도록 aria-hidden 과 함께 씁니다. display:none 은 일부 봇이 건너뛰므로
   화면 밖으로 밀어내는 방식을 씁니다. */
.hp-field{
  position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;opacity:0 !important;
  pointer-events:none !important;
}

/* ── 검색 결과 한 줄 안내 (partials/_searchnote.php) ────────────────────
   검색을 하면 화면이 바뀌는데 무엇으로 찾았는지 적혀 있지 않으면 전체인지
   결과인지 알 수 없습니다. 특히 결과가 없을 때 빈 화면만 남으면 고장으로
   오해하기 쉬워, 찾은 말과 건수를 이 줄에 적습니다. */
.srchnote{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;
  margin:14px 0 0;padding:11px 15px;border-radius:10px;
  background:var(--sky-soft,#eef4fb);border:1px solid var(--line,#dbe3ec);
  font-size:14px;line-height:1.5;color:var(--text-mid,#41505f);word-break:keep-all;
}
.srchnote__ico{flex:none;color:var(--brand,#3b75c0)}
.srchnote__q{font-weight:800;color:var(--text,#16202b)}
.srchnote__n{font-weight:800;color:var(--brand-strong,#24528f)}
.srchnote__clear{
  margin-inline-start:auto;flex:none;
  font-size:13px;font-weight:700;color:var(--text-dim,#6b7885);
  text-decoration:underline;text-underline-offset:3px;
}
.srchnote__clear:hover{color:var(--brand,#3b75c0)}
/* 찾은 것이 없을 때는 색을 달리해 눈에 띄게 합니다 */
.srchnote--none{background:#fdf7f2;border-color:#f0dcc9;color:#7a5a3c}
.srchnote--none .srchnote__ico{color:#c98a4b}
.srchnote--none .srchnote__q{color:#5d4128}

/* ── 개인정보 보호 안내 (partials/_privacy.php) ─────────────────────────
   개인정보를 적는 화면마다 같은 자리에 같은 모습으로 나옵니다.
   겁을 주는 경고가 아니라 "이렇게 지키고 있습니다" 라는 약속이므로
   차분한 초록 계열로 두었습니다. */
.privnote{
  margin-top:26px;padding:20px 22px;border-radius:14px;
  background:#f2f8f4;border:1px solid #d4e7dc;
}
.privnote__title{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:16px;font-weight:800;letter-spacing:-.02em;color:#1d4b34;
}
.privnote__ico{display:inline-flex;color:#2f7d54}
.privnote__list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.privnote__list li{
  position:relative;padding-inline-start:20px;
  font-size:14.5px;line-height:1.7;color:#35513f;word-break:keep-all;
}
.privnote__list li::before{
  content:"";position:absolute;inset-inline-start:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:#5aa87c;
}
.privnote__list b{font-weight:800;color:#1d4b34}
.privnote__foot{
  margin:14px 0 0;padding-top:12px;border-top:1px solid #d9e9e0;
  font-size:13.5px;line-height:1.65;color:#4e6b59;word-break:keep-all;
}
.privnote__foot a{font-weight:700;color:#2f7d54;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){ .privnote{padding:17px 16px} }

/* 움직임 줄이기를 켠 분께는 눌림 효과도 빼고, 인쇄할 때는 아직 안 떠오른 내용도 모두 보이게 */
@media (prefers-reduced-motion:reduce){
  :where(button,.btn,.cta-top,.tile,[class*="__btn"],[class*="-btn"],[class*="__cta"],[class*="__go"],.carousel__nav,.quick a):active{scale:none}
}
@media print{ .reveal{opacity:1!important;transform:none!important} }

/* ==========================================================================
   이 화면 QR 코드 — 모든 화면 맨 아래 (partials/_footer.php · assets/js/pageqr.js)
   평소에는 QR · 짧은 제목 · 단추만. 사용법은 '사용법' 단추를 눌렀을 때만 작은 창으로.
   ========================================================================== */
.pageqr{background:linear-gradient(180deg,#f2f7fa 0%,#e8f1f8 100%);border-top:1px solid var(--line);padding:26px 0 28px}
.pageqr[hidden]{display:none}
.pageqr__inner{display:flex;align-items:center;gap:26px}
.pageqr__card{
  position:relative;flex:none;padding:12px 12px 9px;border-radius:18px;background:#fff;text-align:center;
  box-shadow:0 14px 32px -20px rgba(10,49,86,.45),0 0 0 1px rgba(10,49,86,.06);
}
.pageqr__card::before{
  /* 카드 둘레의 옅은 빛 테두리 */
  content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,116,176,.55),rgba(247,209,23,.45) 60%,rgba(0,116,176,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.pageqr__code{position:relative;width:132px;height:132px;overflow:hidden;border-radius:8px}
.pageqr__code svg{display:block;width:100%;height:100%}
/* 위아래로 천천히 훑는 빛 — 꾸밈(마우스를 올리면 · 움직임 줄이기에서는 멈춤) */
.pageqr__code::after{
  content:"";position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,116,176,0),rgba(0,116,176,.14) 70%,rgba(0,116,176,.32) 100%);
  animation:pageqrScan 3.2s ease-in-out infinite;
}
.pageqr__card:hover .pageqr__code::after{animation-play-state:paused;opacity:0}
@keyframes pageqrScan{0%{top:-30%}55%{top:100%}100%{top:100%}}
.pageqr__scan{
  display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:2px 9px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:10px;font-weight:800;letter-spacing:.18em;
}
.pageqr__scan span{width:6px;height:6px;border-radius:50%;background:#f7d117;box-shadow:0 0 0 3px rgba(247,209,23,.25)}
.pageqr__text{min-width:0}
.pageqr__title{margin:0;font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--navy);word-break:keep-all}
.pageqr__desc{margin:4px 0 0;font-size:14px;color:var(--text-mid);word-break:keep-all}
.pageqr__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pageqr__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:#fff;color:var(--text);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s;
}
.pageqr__btn:hover{border-color:var(--brand);color:var(--brand-strong);box-shadow:0 6px 16px -10px rgba(0,116,176,.6)}
.pageqr__btn--main{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
.pageqr__btn--main:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pageqr__btn:focus-visible{outline:3px solid #f7d117;outline-offset:2px}
.pageqr__q{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brand-strong);color:#fff;font-size:11.5px;font-weight:900}
.pageqr__btn--help:hover .pageqr__q{background:var(--navy)}
.pageqr__note{margin:6px 0 0;min-height:1.3em;font-size:13.5px;font-weight:700;color:#1d6b43}
.pageqr__note:empty{margin:0;min-height:0}
/* 작은 창(크게 보기 · 사용법) */
.pageqr__dlg{border:0;padding:0;border-radius:24px;box-shadow:0 30px 80px rgba(10,49,86,.45);max-width:calc(100vw - 32px)}
.pageqr__dlg::backdrop{background:rgba(10,30,50,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pageqr__dlgin{padding:26px 28px 24px;text-align:center}
.pageqr__eyebrow{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--brand-strong)}
.pageqr__dlgtitle{margin:6px 0 14px;font-size:19px;font-weight:900;color:var(--navy);word-break:keep-all}
.pageqr__big svg{display:block;width:min(320px,76vw);height:auto;margin:0 auto 18px}
.pageqr__helpin{max-width:520px;text-align:left}
.pageqr__steps,.pageqr__tips{margin:0;padding-left:22px;font-size:14.5px;line-height:1.8;color:var(--text);word-break:keep-all}
.pageqr__steps li::marker{font-weight:900;color:var(--brand-strong)}
.pageqr__tips{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-mid)}
.pageqr__helpurl{display:flex;align-items:center;gap:10px;margin:12px 0 6px;padding:8px 8px 8px 12px;border-radius:10px;background:var(--bg-alt);font-size:12.5px;font-weight:700;color:var(--text-mid)}
.pageqr__helpurl p{flex:1;min-width:0;margin:0;word-break:break-all}
.pageqr__helpurl p span{display:block}
.pageqr__helpurl [data-pageqr-url]{color:var(--brand-strong)}
.pageqr__copy2{
  flex:none;display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 13px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--brand-strong);
  font:inherit;font-size:13px;font-weight:800;white-space:nowrap;
}
.pageqr__copy2:hover{border-color:var(--brand);background:var(--sky-soft)}
.pageqr__copy2:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.pageqr__copy2.is-done{border-color:#1b7a52;background:#eaf7f1;color:#1b7a52}
.pageqr__helpnote{min-height:1.4em;margin:0 0 12px;font-size:12.5px;font-weight:700;color:#1b7a52;text-align:right}
.pageqr__helpin .pageqr__btn{width:100%}
/* 휴대폰 — QR 은 왼쪽, 단추는 오른쪽에 한 줄씩 */
@media (max-width:560px){
  .pageqr{padding:22px 0 24px}
  .pageqr__inner{align-items:flex-start;gap:14px}
  .pageqr__card{padding:9px 9px 7px}
  .pageqr__code{width:112px;height:112px}
  .pageqr__title{font-size:16.5px}
  .pageqr__desc{font-size:13px}
  .pageqr__acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
  .pageqr__btn{min-height:38px;padding:7px 8px;font-size:13px;gap:5px}
  .pageqr__dlgin{padding:22px 20px 20px}
}
@media (prefers-reduced-motion:reduce){ .pageqr__code::after{animation:none;display:none} }
/* 인쇄 — 종이에서도 QR 로 이 화면을 열 수 있게, 단추는 빼고 작게 */
@media print{
  .pageqr{background:none;border-top:1px solid #ccc;padding:12px 0;break-inside:avoid}
  .pageqr__acts,.pageqr__note,.pageqr__dlg,.pageqr__code::after,.pageqr__card::before{display:none!important}
  .pageqr__card{box-shadow:none;padding:6px}
  .pageqr__code{width:110px;height:110px}
}