/* ============================================================
   신청년라이프 — 앱 스타일시트 (모바일 우선)
   시니어 대상 교육·커뮤니티 서비스. 각지고 담백한 코퍼레이트 톤.
   · 배경 #faf8ff · 본문/헤딩 네이비 #242c51 · 포인트 블루 #0004a9
   · 헤딩 Plus Jakarta Sans / 본문·한글 Pretendard
   · 구성: 상단 고정 헤더 · 하단 탭바 · 사이드 드로어 · 홈 피드
   style.css(기본) 다음에 로드되어 최종 스타일을 결정한다.
   ============================================================ */

:root{
  --bg:#eef0f8;            /* 앱 바깥(데스크톱 여백) */
  --app:#faf8ff;           /* 앱 캔버스 */
  --card:#ffffff;
  --ink:#242c51;           /* 본문/헤딩 네이비 */
  --muted:#5b6488;         /* 보조 텍스트 */
  --muted-2:#8a92b4;
  --line:#d7dcee;          /* 카드·구분선 테두리(배경과 대비되게 진하게) */

  --primary:#0004a9;       /* 포인트 블루(생생한 로열블루) */
  --primary-strong:#00037a;
  --primary-tint:#e7e8fb;
  --primary-2:#3346e6;
  --ink-navy:#0b1030;      /* 필드형 콜아웃 패널 배경(딥 네이비) */

  --gold:#e6a71b; --gold-strong:#a9760c; --gold-soft:#fef2d6; --ink-on-gold:#3a2c0a;
  --accent:#ff5a8a;        /* 강조 핑크(포커스/라이브 뱃지) */
  --ok:#1c9c6b; --warn:#e0553d;

  /* 각진 코퍼레이트 룩 — 라운드 제거(거의 직각) */
  --radius:3px;            /* 기본 카드 */
  --radius-sm:2px;
  --radius-lg:3px;
  --radius-xl:4px;         /* 히어로 */
  --pill:3px;              /* 알약형 폐지 → 각진 버튼/칩 */

  /* 아주 약간의 드롭섀도우 — 배경(#faf8ff)에서 카드가 살짝 떠 보이게 */
  --shadow-sm:0 1px 2px rgba(11,16,48,.08);
  --shadow:0 2px 6px -1px rgba(11,16,48,.10), 0 1px 2px rgba(11,16,48,.06);
  --shadow-lg:0 12px 30px -14px rgba(11,16,48,.28);
  --ring:0 0 0 2px rgba(0,87,189,.35);

  --app-w:600px;           /* 앱 캔버스 최대폭(모바일 우선) */
  --top-h:54px;
  --tabbar-h:66px;

  --font-body:"Pretendard","Inter","맑은 고딕","Malgun Gothic",system-ui,sans-serif;
  --font-display:"Plus Jakarta Sans","Pretendard","맑은 고딕",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{font-size:15.5px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--bg);background-image:none;
  line-height:1.6;word-break:keep-all;overflow-wrap:break-word;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
}
a{color:var(--primary);text-decoration:none;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.015em;line-height:1.28}
/* 큰 글씨 기본 크기를 살짝 줄여 세련미 확보(컴포넌트별 크기는 아래에서 개별 지정) */
h1{font-size:1.5rem} h2{font-size:1.14rem} h3{font-size:1.02rem} h4{font-size:.98rem}

/* Material Symbols 아이콘 */
.msym{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;
  font-size:24px;line-height:1;display:inline-block;vertical-align:middle;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:antialiased;user-select:none}
/* 아이콘 폰트 로드 전 리가처 텍스트(home 등) 노출 방지는 폰트 URL의 display=block 로 처리 */
.msym.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}

/* ── 앱 캔버스: 데스크톱에선 폰 형태로 가운데 정렬 ── */
.wrap, main.wrap{max-width:var(--app-w);margin:0 auto;padding:14px 16px 8px;
  background:var(--app);min-height:100vh;
  box-shadow:0 0 0 1px rgba(36,44,81,.05), 0 30px 80px -40px rgba(36,44,81,.35)}
@media(max-width:640px){ .wrap, main.wrap{box-shadow:none} }

/* 옛 격자 배경/명조 무력화 */
body{background-image:none}

/* ============================================================
   상단 고정바 — [☰] · 지역/브랜드 · [🔔 🔍]
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(228,234,251,.9);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #cfd8ef}
.topbar .inner{max-width:var(--app-w);margin:0 auto;height:var(--top-h);
  display:flex;align-items:center;gap:8px;padding:0 12px}
.topbar .spacer{flex:1}
.tb-icon{width:38px;height:38px;border-radius:var(--pill);border:none;background:transparent;
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;text-decoration:none}
.tb-icon:hover{background:var(--primary-tint)}
.tb-icon .msym{font-size:23px}
.tb-icon .kico{width:24px;height:24px;display:block}
.tb-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);border:2px solid #fff}
/* 브랜드(가운데) */
.topbar .brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.topbar .brand .brand-badge{width:30px;height:30px;border-radius:9px;background:#fff;
  box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:2px}
.topbar .brand .brand-badge img{width:100%;height:100%;object-fit:contain}
.topbar .brand-text{display:flex;flex-direction:column;line-height:1.05}
.topbar .brand-text b{font-family:var(--font-display);font-size:1.02rem;font-weight:800}
.topbar .brand-text small{font-size:.62rem;color:var(--muted-2);font-weight:600;letter-spacing:.02em}
/* 본문이 상단바에 가리지 않도록 */
.wrap, main.wrap{padding-top:calc(var(--top-h) + 12px)}

/* 옛 상단 텍스트 네비 제거 */
.mainnav{display:none !important}

/* ============================================================
   사이드 드로어(햄버거) — 전체 기능 목록
   ============================================================ */
.drawer-back{position:fixed;inset:0;z-index:90;background:rgba(20,24,45,.45);
  opacity:0;visibility:hidden;transition:opacity .25s}
.drawer-back.show{visibility:visible}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:91;width:min(86vw,340px);
  background:var(--app);transform:translateX(-102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow-y:auto}
.drawer.show{transform:none}
.drawer.show ~ .drawer-back, .drawer-back.show{opacity:1;visibility:visible}
.dr-head{display:flex;align-items:center;gap:12px;padding:20px 18px 16px}
.dr-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary-tint);
  display:inline-flex;align-items:center;justify-content:center;color:var(--primary)}
.dr-avatar .msym{font-size:28px}
.dr-who{display:flex;flex-direction:column;line-height:1.2}
.dr-who b{font-family:var(--font-display);font-size:1.05rem}
.dr-who span{font-size:.82rem;color:var(--muted)}
.dr-close{margin-left:auto;width:40px;height:40px;border-radius:50%;border:none;background:#fff;
  box-shadow:var(--shadow-sm);color:var(--ink);cursor:pointer}
.dr-group{padding:8px 12px 4px}
.dr-group > h4{font-size:.72rem;letter-spacing:.08em;color:var(--muted-2);
  text-transform:uppercase;margin:12px 8px 6px;font-weight:800}
.dr-item{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:14px;
  color:var(--ink);font-weight:600;font-size:1rem}
.dr-item:hover{background:var(--primary-tint)}
.dr-item .msym{font-size:23px;color:var(--primary)}
.dr-item.soon{color:var(--muted-2);pointer-events:none}
.dr-item.soon .msym{color:var(--muted-2)}
.dr-item .badge-soon{margin-left:auto;font-size:.62rem;font-weight:800;color:var(--muted-2);
  background:var(--line);padding:2px 8px;border-radius:var(--pill);letter-spacing:.05em}
.dr-foot{margin-top:auto;padding:16px 20px;color:var(--muted-2);font-size:.78rem;border-top:1px solid var(--line)}

/* ============================================================
   하단 고정 탭바 — 아이콘 + 라벨, 액티브 알약
   ============================================================ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:#f1f3fa;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid #dbe1f0;
  display:flex;max-width:var(--app-w);margin:0 auto}
/* 비활성 탭은 밝은 회색빛 배경, 활성 탭만 흰색(구분선 없음) */
.tabbar > a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted-2);font-size:.68rem;font-weight:700;text-decoration:none;padding-top:4px;
  background:transparent}
.tabbar > a.active{background:#fff;color:var(--primary)}
.tabbar > a .ic, .tabbar > a .msym{font-size:23px;line-height:1}
.tabbar > a .ic{font-size:1.3rem}
.tabbar > a.active{color:var(--primary)}
.tabbar > a.active .msym{font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24}
.tabbar > a .tb-lbl{margin-top:1px}

/* ============================================================
   공통 컴포넌트 — 카드 / 섹션 헤더 / 가로 스크롤 / 버튼
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.sec{margin:26px 0 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.sec-head h2{margin:0;font-size:1.1rem;font-weight:800}
.sec-head .more{font-size:.85rem;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.sec-head .more .msym{font-size:18px}
/* 얇은 텍스트형 화살표(아이콘 폰트 대체) */
.go{color:var(--muted-2);font-weight:700;line-height:1}

/* 등급 배지 — 커뮤니티에서 이름 옆에 등급(점수X) 표시 */
.lv-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-sm);
  background:var(--primary-tint);color:var(--primary-strong);font-size:.7rem;font-weight:800;
  vertical-align:middle;white-space:nowrap}

/* 성별 선택(세그먼트) */
.seg{display:flex;gap:8px}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  padding:11px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:700;color:var(--ink);
  box-shadow:var(--shadow-sm)}
.seg label:has(input:checked){border-color:var(--primary);background:var(--primary-tint);color:var(--primary-strong)}
.seg input{accent-color:var(--primary)}

/* 맨 위로 버튼 — 긴 페이지에서 스크롤 시 나타남(하단탭바 위) */
.to-top{position:fixed;z-index:55;
  right:max(16px, calc((100vw - var(--app-w))/2 + 12px));
  bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--card);color:var(--primary);font-size:1.25rem;font-weight:800;line-height:1;cursor:pointer;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--primary)}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}

.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{scroll-snap-align:start;flex:0 0 auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-display);font-weight:800;font-size:.98rem;min-height:46px;
  padding:11px 17px;border-radius:var(--pill);border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm)}
.btn.accent, .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.accent:hover{background:var(--primary-strong);color:#fff}
.btn.lg{min-height:54px;padding:14px 20px;font-size:1rem}
.btn.sm{min-height:38px;padding:7px 13px;font-size:.9rem}
/* .between 안의 링크 버튼이 좁아지지 않도록(옛 .between>a 패딩 무력화) */
.between > a.btn{padding:9px 15px}
.btn.block{display:flex;width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--pill);
  background:var(--primary-tint);color:var(--primary-strong);font-weight:700;font-size:.82rem}

/* ── 입력 컨트롤 — 사이트 전체 공통(각지고 담백하게, 시니어 가독성) ── */
label.field{display:block;margin:16px 0 6px;font-weight:700;color:var(--ink)}
label.field:first-child, .card > form > label.field:first-of-type{margin-top:0}
input[type=text],input[type=tel],input[type=email],input[type=number],
input[type=password],input[type=datetime-local],input:not([type]),textarea,select{
  width:100%;padding:12px 14px;font-size:1rem;line-height:1.5;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);color:var(--ink);
  font-family:var(--font-body);-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235b6488' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;padding-right:34px}
.check{display:flex;align-items:center;gap:10px;font-size:1rem;margin:8px 0}
.check input{width:22px;height:22px;accent-color:var(--primary)}

/* ============================================================
   홈 레이아웃
   ============================================================ */
.home-page{display:flex;flex-direction:column;gap:0}
/* 홈 간격 리듬 — 가까울 것은 가깝게, 멀 것은 멀게 */
.home-page > .sec{margin-top:30px}
.home-page > .scene-head{margin:28px 2px 10px}      /* 제목 → 카드 가깝게 */
.home-page > .scene{margin-top:0}
.home-page > .searchbar{margin:20px 0 0}
.home-page > .searchbar + .sec{margin-top:40px}   /* 검색창 → 오늘 특가 멀게 */

/* 히어로: 대표/사전신청 */
.whero{position:relative;border-radius:var(--radius-xl);overflow:hidden;color:#fff;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 22px;box-shadow:var(--shadow-lg);isolation:isolate;transition:box-shadow .15s}
.whero:hover{box-shadow:0 16px 34px -14px rgba(11,16,48,.5)}
.whero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,#0004a9 0%,#2431d6 52%,#4f63ff 100%)}
.whero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.28),transparent 60%),
             linear-gradient(0deg,rgba(10,20,55,.55),rgba(10,20,55,0) 55%)}
.whero .eyebrow{color:#dfeaff}
.whero h1{color:#fff;font-size:1.4rem;font-weight:800;margin:0 0 5px;line-height:1.24}
.whero p{margin:0;color:#eaf1ff;font-size:.94rem;font-weight:500}
.whero .row{display:flex;gap:10px;flex-wrap:wrap}
.whero .btn{background:#fff;color:var(--primary-strong);border:none;box-shadow:var(--shadow)}
.whero .btn.ghost{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.whero .meta{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;color:#eaf1ff;font-size:.86rem;font-weight:600}
.whero .meta span{display:inline-flex;align-items:center;gap:5px}
.whero .meta .msym{font-size:18px}

/* 무슨 활동을 하시겠어요? — 재미·배움·어울림 3칸(글자 크게) */
.scene-head{margin:22px 2px 12px;font-size:1.1rem;font-weight:800}
.scene{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.scene.scene-3{grid-template-columns:repeat(3,1fr)}
.scene a{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 8px 15px;text-align:center;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.scene a:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-1px)}
.scene .ic{display:none}
.scene .l{display:block;font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.1}
.scene .n{display:block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--muted)}

/* 새 소식 가로 카드 */
.ed-card{width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.ed-card .body{padding:12px 14px 14px}
.ed-card .klabel{font-size:.7rem;font-weight:800;color:var(--primary);letter-spacing:.04em}
.ed-card h4{margin:5px 0 4px;font-size:1rem;line-height:1.3}
.ed-card .sub{font-size:.8rem;color:var(--muted-2)}

/* 분야별 둘러보기(태그 칩 그리드) */
.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.topic-grid a{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:13px 14px;color:var(--ink);font-weight:700}
.topic-grid a:hover{box-shadow:var(--shadow)}
.topic-grid a .em{font-size:1.25rem}
.topic-grid a .cnt{margin-left:auto;font-size:.78rem;color:var(--muted-2);font-weight:700}

/* 커뮤니티 통계 */
.wstats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 6px;text-align:center}
.wstats .st{position:relative}
.wstats .st + .st::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line)}
.wstats .st .n{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--ink)}
.wstats .st .l{display:block;font-size:.74rem;color:var(--muted);font-weight:700;margin-top:3px}

/* 랭킹 미니 */
.rk-col h3{font-size:.98rem;margin:0 0 8px}
.rk-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line)}
.rk-row:last-child{border-bottom:none}
.rk-medal{font-size:1.1rem;width:24px;text-align:center}
.rk-name{font-weight:700;flex:1;font-size:.95rem}

/* 곧 열릴 프로그램 배너 — 필드형 블루 패널(고대비 흰 글씨) */
.coming-banner{display:flex;align-items:center;gap:14px;background:var(--primary);color:#fff;
  border-radius:var(--radius);padding:18px 20px;margin-top:18px}
.coming-banner .cb-ic{display:none}
.coming-banner .cb-txt{flex:1;line-height:1.4}
.coming-banner .cb-txt b{font-family:var(--font-display);font-size:1.12rem;font-weight:800;color:#fff}
.coming-banner .cb-sub{display:block;font-size:.84rem;color:#dfe3ff;margin-top:2px}
.coming-banner .cb-go{font-weight:800;white-space:nowrap;color:#fff}

/* 검색창 — 사이트 전체 공용(홈·프로그램·통합검색 동일 형태) */
.searchbar{display:flex;gap:8px;align-items:stretch;margin:16px 0}
.searchbar input{flex:1;min-width:0;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font-size:1rem;
  font-family:var(--font-body);outline:none}
.searchbar input::placeholder{color:var(--muted-2)}
.searchbar input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.searchbar .btn{flex:0 0 auto;min-width:76px}

/* 플래시 메시지 */
.flash{border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:12px;font-weight:600}
.flash.ok{background:var(--primary-tint);color:var(--primary-strong)}
.flash.warn{background:#fdeae6;color:var(--warn)}

/* 푸터 */
footer{margin-top:30px;color:var(--muted);font-size:.8rem;line-height:1.7}
footer .inner{max-width:var(--app-w);margin:0 auto;padding:22px 18px 30px;text-align:center;border-top:1px solid var(--line)}
.foot-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:12px}
.foot-brand img{width:36px;height:36px}
.foot-brand .foot-veso{font-family:var(--font-display);font-weight:800;color:var(--primary);font-size:1.25rem;display:block;line-height:1}
.foot-brand .foot-ko{font-size:.8rem;color:var(--muted)}

/* ============================================================
   프로그램 카드(pcard/pcard_coming)
   매크로 구조: .thumb .pbody(.pc-title .pc-desc .pc-line(.pc-inst .pc-date)
                .pc-tags .pc-buy(.price .chip)) [.pc-action]
   ============================================================ */
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:1fr}
/* 풀블리드: 사진이 카드 전체 배경, 글씨는 그 위에 얹힌다 */
.pcard, .pcard-coming{position:relative;display:flex;flex-direction:column;min-height:320px;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);padding:0;border:none;
  background:#1a2350;isolation:isolate}
a.pcard{color:inherit}
.pcard:hover, .pcard-coming:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);transition:.16s}
.pcard:hover .pc-bg, .pcard-coming:hover .pc-bg{transform:scale(1.04)}
/* 배경 사진 + 스크림(어두운 그라데이션) */
.pc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .3s ease}
/* 스크림 — 상단(태그·제목)과 하단(가격) 모두 어둡게, 가운데는 일러스트가 보이게 */
.pc-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(5,7,22,.94) 0%, rgba(5,7,22,.82) 24%, rgba(5,7,22,.5) 48%, rgba(5,7,22,.6) 70%, rgba(5,7,22,.92) 100%)}
.pc-scrim.noimg{background:linear-gradient(155deg,#151c66 0%,#0004a9 58%,#050733 100%)}
/* 카드 글씨는 그림자로 대비 확보(스크림이 얇아졌으므로) */
.pcard .pbody, .pcard-coming .pbody{text-shadow:0 1px 10px rgba(5,7,22,.75)}
/* 본문(글씨)은 아래쪽으로 정렬, 흰 글씨 (그림자 없이 — 스크림으로 대비 확보) */
/* 태그·제목·설명·강사·관심수는 상단부터 정렬(정보가 없어도 위치 고정), 가격은 하단 고정 */
.pcard .pc-hit, .pcard-coming .pc-hit{position:relative;z-index:2;flex:1;display:flex;
  flex-direction:column;justify-content:flex-start;gap:6px;padding:13px 13px 13px;color:#fff}
/* 버튼 있는 카드: 가격(pc-hit 끝)과 pc-action(버튼) 사이 간격은 pc-action이 담당 */
.pcard:not(.pcard-compact) .pc-hit{padding-bottom:10px}
.pcard .pbody, .pcard-coming .pbody{text-shadow:none}
.pcard .tag-mini, .pcard-coming .tag-mini{text-shadow:none}
.pcard .pc-title, .pcard-coming .pc-title{color:#fff}
.pcard .pc-desc, .pcard-coming .pc-desc{color:rgba(255,255,255,.85)}
.pcard .pc-line, .pcard-coming .pc-line{color:rgba(255,255,255,.85)}
.pcard .pc-buy .price, .pcard-coming .pc-buy .price{color:#fff}
.pcard .pc-buy .price small, .pcard-coming .pc-buy .price small{color:rgba(255,255,255,.82)}
.pcard .tag-mini, .pcard-coming .tag-mini{background:rgba(255,255,255,.22);color:#fff}
.pcard .tag-mini.more-tags, .pcard-coming .tag-mini.more-tags{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.pcard .chip, .pcard-coming .chip{background:rgba(255,255,255,.24);color:#fff}
.pcard .chip.gray, .pcard-coming .chip.gray{background:rgba(0,0,0,.42);color:rgba(255,255,255,.7)}
.pc-action{position:relative;z-index:2;padding:0 13px 13px;margin-top:0}
/* 가격 — pc-hit(클릭영역) 맨 아래에 고정(위 텍스트는 상단정렬, 가격만 바닥) */
.pcard .pc-price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:auto 0 0;padding-top:8px}
.pcard .pc-price .price{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff}
.pcard .pc-price .price small{font-weight:600;color:rgba(255,255,255,.82);font-size:.78rem}
/* 컴팩트(목록창): 버튼 없이 짧게 */
.pcard-compact{min-height:236px}
.pc-seat{flex:none;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.18);border-radius:var(--pill);padding:3px 9px;white-space:nowrap}
.pc-seat.soldout{background:rgba(224,52,74,.9);color:#fff}
.pc-seat.soon{background:rgba(255,255,255,.16);color:rgba(255,255,255,.92)}
/* 개설 카드: 신청(주 버튼) 아래 관심 담기(보조) 간격 */
.pcard .pc-action .btn.accent + .heart-btn{margin-top:8px}
/* 우상단 배지 제거됨 — 제목은 전체 폭 사용 */
.pbody{display:flex;flex-direction:column;gap:6px}
/* 풀블리드 카드: 예전 흰 본문용 pbody 패딩 제거(간격은 pc-hit가 담당) */
.pcard .pbody, .pcard-coming .pbody{padding:0}
.pc-title{font-family:var(--font-display);font-size:1.1rem;font-weight:800;margin:0;line-height:1.3;color:var(--ink)}
.pc-desc{color:var(--muted);font-size:.9rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-line{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;color:var(--muted-2);font-size:.83rem;font-weight:600}
.pc-inst,.pc-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 풀블리드 카드: 진행자·일시 모두 밝게 + 그림자로 커버 위 가독성 확보 */
.pcard .pc-date, .pcard-coming .pc-date{color:#fff;font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.65);flex-basis:100%}
.pc-tags{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden}
.tag-mini{display:inline-flex;align-items:center;background:var(--primary-tint);
  color:var(--primary-strong);border-radius:var(--pill);padding:4px 10px;font-size:.76rem;font-weight:700;white-space:nowrap}
.tag-mini.more-tags{background:var(--line);color:var(--muted);cursor:pointer}
.pc-buy{display:flex !important;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.pc-buy .price{font-family:var(--font-display);font-size:1.02rem;font-weight:800;color:var(--ink);white-space:nowrap}
.pc-buy .price small{font-weight:600;color:var(--muted-2);font-size:.76rem}
.chip.gray{background:var(--line);color:var(--muted)}
.chip.accent, .pc-done{background:var(--primary);color:#fff}
.pc-action{margin-top:12px}
.pc-action .btn, .pc-action form{width:100%}
.pc-action .btn.block{width:100%}
.pc-done{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:12px;border-radius:var(--pill);font-weight:800}

/* 관리자 대시보드 미니 스탯 */
.mini-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);padding:12px 8px;text-align:center}
.mini-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--primary);line-height:1.1}
.mini-stat span{font-size:.74rem;color:var(--muted);font-weight:700}

/* 프로그램 가로 스크롤 카드 폭 */
.hscroll .pcard, .hscroll .pcard-coming{width:270px;white-space:normal}

/* ── 오늘 특가: 카드 위 빨강 배지 ── */
.deal-item{position:relative;flex:0 0 auto}
.deal-badge{position:absolute;top:12px;right:12px;z-index:3;
  background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;
  font-size:.74rem;letter-spacing:.02em;padding:5px 11px;border-radius:var(--pill);
  box-shadow:0 4px 12px -2px rgba(255,90,138,.55)}
/* 상세 상단 칩 줄의 특가(다른 칩과 같은 크기, 카드 배지와 같은 색) */
.chip.chip-deal{background:var(--accent);color:#fff}
/* 홈 인기 목록 행의 작은 특가 칩 */
.deal-chip{display:inline-block;vertical-align:middle;background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.72rem;padding:2px 8px;
  border-radius:var(--pill);margin-right:6px}

/* ── 관심 과목 코너 토글 — 각진 텍스트 칩(아이콘 없음) ── */
.pcard{position:relative}
.pc-heart{position:absolute;top:10px;right:10px;z-index:4;margin:0}
.heart-btn{width:auto;height:auto;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.55);
  background:rgba(12,16,38,.42);color:#fff;font-size:.76rem;font-weight:700;line-height:1;cursor:pointer;
  padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.heart-btn.on{background:#fff;color:var(--primary-strong);border-color:#fff}
.heart-btn:hover{background:rgba(12,16,38,.6)}
.heart-btn.on:hover{background:#fff}
.pc-done-btn{background:rgba(255,255,255,.9) !important;color:var(--primary-strong) !important;border-color:transparent !important}

/* ── 리서치 & 서베이 배너 ── */
.survey-banner{display:flex;align-items:center;gap:14px;border-radius:var(--radius);padding:18px 20px;
  background:var(--ink-navy);border:none;border-top:3px solid var(--primary-2);color:#fff}
.survey-banner .sb-ic{display:none}
.survey-banner .sb-txt{flex:1;line-height:1.4}
.survey-banner .sb-txt b{font-family:var(--font-display);font-size:1.1rem;color:#fff}
.survey-banner .sb-sub{display:block;font-size:.84rem;color:#b9c0e6;margin-top:2px}
.survey-banner .sb-go{font-weight:800;color:#8b97ff;white-space:nowrap}

/* ── 설문 카드/문항 ── */
.survey-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;color:var(--ink);margin-bottom:12px}
.survey-card:hover{box-shadow:var(--shadow-lg)}
.survey-card .s-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.survey-card .s-reward{background:var(--gold-soft);color:var(--gold-strong);font-weight:800;
  font-size:.8rem;padding:4px 10px;border-radius:var(--pill)}
.survey-card .s-min{font-size:.8rem;color:var(--muted-2);font-weight:700}
.survey-card h3{margin:0 0 4px;font-size:1.12rem}
.survey-card p{margin:0;color:var(--muted);font-size:.9rem}
.survey-card .s-done{margin-left:auto;color:var(--ok);font-weight:800;font-size:.85rem}
.qblock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:16px 18px;margin-bottom:12px}
.qblock .qq{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 12px}
.qopt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;font-weight:600;transition:.12s}
.qopt:has(input:checked){border-color:var(--primary);background:var(--primary-tint);color:var(--primary-strong)}
.qopt input{width:20px;height:20px;accent-color:var(--primary)}

/* ── 현재 인기: 3위 리스트 + 더보기 ── */
.plist{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.prow{display:flex;align-items:center;gap:13px;padding:14px 16px;color:var(--ink);
  border-bottom:1px solid var(--line)}
.prow:hover{background:var(--primary-tint)}
.prow .prank{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;
  font-size:.95rem;background:var(--primary-tint);color:var(--primary-strong)}
.prow .prank.r1{background:#ffe9a8;color:#8a5b00}
.prow .prank.r2{background:#e4e8f3;color:#5b6488}
.prow .prank.r3{background:#f6ddc7;color:#8a5220}
.prow .pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow .pinfo .pt{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pinfo .pmeta{font-size:.83rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pcta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:var(--muted-2);font-weight:700;font-size:.85rem}
.prow .pcta .wait{color:var(--primary);white-space:nowrap}
.prow .pcta .msym{font-size:20px;color:var(--muted-2)}
.prow.more-row{justify-content:center;gap:2px;color:var(--muted);font-weight:800;
  font-family:var(--font-display);border-bottom:none}
.prow.more-row:hover{color:var(--primary)}
.prow.more-row .msym{font-size:19px}

/* 모달(태그 전체보기) */
.modal{position:fixed;inset:0;z-index:95;display:none;align-items:flex-end;justify-content:center}
.modal.show{display:flex}
.modal-back{position:absolute;inset:0;background:rgba(11,16,48,.66)}
.modal-panel{position:relative;inset:auto;transform:none;background:var(--app);width:100%;max-width:var(--app-w);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 18px 28px;box-shadow:var(--shadow-lg)}
/* 데스크톱: 바텀시트 대신 화면 중앙 카드로(style.css의 미디어쿼리 위치값 무력화 포함) */
@media(min-width:640px){
  .modal{align-items:center}
  .modal-panel{max-width:440px;border-radius:var(--radius)}
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-close{width:36px;height:36px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer}
.cardtags{display:flex;flex-wrap:wrap;gap:8px}

/* 페이지 공통 제목/뒤로 */
.page-head{display:flex;align-items:center;gap:10px;margin:2px 0 16px}
.page-head h1{font-size:1.26rem;margin:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted)} .small{font-size:.82rem}

@media(min-width:480px){ .grid.cols-2{grid-template-columns:1fr 1fr} }

/* ── 브랜드 로고 이미지(헤더/푸터) ── */
.topbar .brand-logo{gap:0}
.logo-img{height:27px;width:auto;display:block}
@media(max-width:400px){ .logo-img{height:24px} }
.foot-brand{display:inline-block;margin-bottom:12px}
.foot-brand .foot-logo{height:52px !important;width:auto !important;max-width:220px;display:block;margin:0 auto}

/* 홈 운영 배너(CMS) */
.home-banners{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.hbanner{display:block;padding:14px 16px;border-radius:var(--radius);background:var(--primary);
  color:#fff;text-decoration:none;background-size:cover;background-position:center}
.hbanner b{display:block;font-size:1.02rem;line-height:1.3}
.hbanner span{display:block;font-size:.86rem;opacity:.9;margin-top:2px}

/* 빈 상태 일러스트 */
.empty-state{text-align:center;padding:26px 12px}
.empty-state img{opacity:.92;max-width:150px;height:auto}
.empty-msg{margin:10px 0 0;font-weight:800;color:var(--ink-navy)}

/* ── 카드: 좌상단 주제 태그 · 강사 흰색 · 관심 버튼(카운트 내장) ── */
/* 주제 태그 — 제목 바로 위(정상 흐름). 떠있지 않아 제목과 겹치지 않음 */
.pc-topics{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 7px}
.pc-topic{background:rgba(11,16,48,.62);color:#fff;font-size:.72rem;font-weight:800;
  padding:4px 9px;border-radius:var(--radius-sm);backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.25);white-space:nowrap}
.pcard .pc-inst, .pcard-coming .pc-inst{color:#fff;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* 관심 버튼 — ♡ [관심 과목에 담기] (아이콘과 라벨 분리) */
.heart-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;
  border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.6);
  background:rgba(12,16,38,.5);color:#fff;font-weight:800;font-size:.86rem;
  padding:7px 12px;cursor:pointer;line-height:1;white-space:nowrap;transition:.12s}
.heart-btn .hb-ico{display:inline-flex;align-items:center;line-height:0;color:#fff}
.heart-btn .hb-ico .ic{width:18px;height:18px;vertical-align:0}
.heart-btn.on{background:#fff;color:var(--primary-strong);border-color:#fff}
.heart-btn.on .hb-ico{color:#e0344a}
.heart-btn:hover{background:rgba(12,16,38,.72)}
.heart-btn.on:hover{background:#fff}
.heart-btn.block{width:100%;justify-content:center;padding:12px;font-size:.95rem}
.pc-topic + .pc-topic{margin-left:0}

/* 공용 팝업 */
.site-pop{position:fixed;inset:0;z-index:2000;background:rgba(11,16,48,.5);
  display:flex;align-items:center;justify-content:center;padding:20px}
.site-pop[hidden]{display:none}
.site-pop-card{background:#fff;border-radius:var(--radius-lg,12px);max-width:360px;width:100%;
  padding:24px 22px;box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center}
.site-pop-card p{margin:0 0 16px;font-size:1rem;line-height:1.6;color:var(--ink-navy);font-weight:600}

/* ── 프로그램 목록 헤더 — 개설/곧 열릴 동일한 깔끔한 구조 ── */
.prog-head{margin:2px 0 16px}
.prog-head h1{font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  color:var(--ink-navy);letter-spacing:-.02em;margin:0 0 4px}
.prog-head .lead{color:var(--muted);font-size:.94rem;line-height:1.55;margin:0}
.ph-back{display:inline-flex;align-items:center;gap:3px;font-size:.85rem;font-weight:700;
  color:var(--primary);text-decoration:none;margin:0 0 10px}
.ph-back:hover{text-decoration:underline}

/* 필터 바 — [조건찾기] 좌측, [필터 초기화] 우측(행동 버튼은 항상 우측) */
.filterbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.filterbar .filter-open{flex:1;min-width:0;text-align:left;justify-content:flex-start}
.filterbar .filter-reset{flex:none;white-space:nowrap;font-size:.86rem;padding:9px 14px}

/* 개수 + 정렬(인기순/최신순) 바 — 개설/곧 열릴 공용 */
.listbar{margin:0 0 12px}
.sortchips{display:inline-flex;gap:6px;flex:none}
.sortchips .chip{cursor:pointer;text-decoration:none}

/* 하단 CTA: 곧 열릴 프로그램으로 유도(브랜드 톤) */
.coming-cta{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:22px;padding:16px 18px;border-radius:var(--radius);text-decoration:none;
  color:var(--ink-navy);background:var(--primary-tint);border:1px solid var(--line)}
.coming-cta .cc-txt b{font-size:1.02rem;display:block;color:var(--ink-navy)}
.coming-cta .cc-sub{font-size:.88rem;color:var(--muted)}
.coming-cta .cc-sub b{display:inline;color:var(--primary-strong);font-size:.88rem}
.coming-cta .cc-go{flex:none;background:var(--primary);color:#fff;font-weight:800;padding:10px 14px;
  border-radius:var(--radius-sm);white-space:nowrap;font-size:.9rem}

/* ── 커스텀 아이콘 ── */
.ic{width:20px;height:20px;display:inline-block;vertical-align:-4px}
/* ── 어울림 게시글 상세 — SNS(인스타) 스타일 ── */
.feed-post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.fp-head{display:flex;align-items:center;gap:10px}
.fp-avatar,.fc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#3346e6,#0004a9);
  color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.fc-avatar{width:32px;height:32px;font-size:.85rem}
.fp-who{flex:1;min-width:0}
.fp-who b{font-size:.98rem}
.fp-meta{font-size:.8rem;color:var(--muted-2);margin-top:1px}
.fp-back{font-size:.85rem;color:var(--muted-2);font-weight:700;text-decoration:none}
.fp-title{font-size:1.25rem;margin:12px 0 8px}
.fp-img{width:100%;border-radius:var(--radius-sm);margin:8px 0;display:block}
.fp-body{white-space:pre-line;line-height:1.7;font-size:1.02rem;margin:8px 0}
.fp-actions{display:flex;gap:6px;margin-top:12px;border-top:1px solid #eef1f8;padding-top:10px}
.fp-act{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--muted-2);font-weight:800;font-size:.92rem;padding:6px 10px;border-radius:var(--radius-sm);text-decoration:none}
.fp-act:hover{background:#f3f5fb}
.fp-act.on{color:#e0344a}
.fp-act .ic{width:22px;height:22px}
.feed-comments{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.fc-title{font-size:1.05rem;margin:0 0 10px}
.fc-item{display:flex;gap:10px;padding:8px 0}
.fc-bubble{background:#f4f6fb;border-radius:12px;padding:8px 12px;flex:1;min-width:0}
.fc-bubble b{font-size:.9rem}
.fc-time{font-size:.75rem;color:var(--muted-2);margin-left:6px}
.fc-bubble p{margin:3px 0 0;white-space:pre-line;line-height:1.5}
.fc-form{display:flex;gap:8px;align-items:center;margin-top:12px;border-top:1px solid #eef1f8;padding-top:12px}
.fc-form input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:22px}
.fc-form .btn{flex:none;border-radius:22px}

/* ── 어울림 목록: 카드 전체 클릭 + 액션 아이콘 ── */
.fpost.js-post-card{cursor:pointer;transition:box-shadow .15s,transform .15s}
.fpost.js-post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.fpost.js-post-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.fpost-actions .fp-act{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--muted-2);font-weight:800;font-size:.92rem;padding:6px 10px;border-radius:var(--radius-sm);text-decoration:none}
.fpost-actions .fp-act:hover{background:#f3f5fb}
.fpost-actions .fp-act.on{color:#e0344a}
.fp-act .fp-ic{display:inline-flex;align-items:center;line-height:0}
.fp-act .fp-ic .ic{width:20px;height:20px;vertical-align:0}
.fp-act.as-static{cursor:default}
.fp-act.as-static:hover{background:none}
/* 하트 채움/외곽 토글 — 좋아요 상태에 따라 CSS로 교체 */
.fp-act .fp-ic .ic-off{display:inline-flex;align-items:center;line-height:0}
.fp-act .fp-ic .ic-on{display:none;align-items:center;line-height:0}
.fp-act.on .fp-ic .ic-off{display:none}
.fp-act.on .fp-ic .ic-on{display:inline-flex}

/* ── 게시글 팝업(모달) ── */
.post-modal{position:fixed;inset:0;z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:22px 14px}
.post-modal[hidden]{display:none}
.pm-back{position:absolute;inset:0;background:rgba(11,16,48,.6)}
.pm-panel{position:relative;z-index:1;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  background:var(--app,#faf8ff);border-radius:var(--radius-lg,14px);box-shadow:0 24px 70px rgba(0,0,0,.42);
  -webkit-overflow-scrolling:touch}
.pm-close{position:sticky;top:10px;float:right;margin:10px 10px -40px 0;z-index:3;
  width:36px;height:36px;border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
  font-size:1rem;line-height:36px;text-align:center;cursor:pointer;color:var(--ink)}
.pm-body{padding:14px}
.pm-loading{padding:60px 0;text-align:center;color:var(--muted)}
body.modal-lock{overflow:hidden}