/* ============================================================
   신청년 캠퍼스 — WoC(World of Community) 스타일 리디자인
   모바일 커뮤니티 슈퍼앱 형태 벤치마킹
   · 배경 연라벤더(#faf8ff) · 네이비 텍스트(#242c51) · 블루 포인트(#0057bd)
   · 헤딩 Plus Jakarta Sans + 본문/한글 Pretendard · 라운드 카드 · 소프트 섀도
   · 상단 고정바 / 하단 그룹 탭바 / 사이드 드로어 / 매거진형 홈
   이 시트는 style.css 뒤에 로드되어 전역을 덮어씁니다.
   ============================================================ */

:root{
  --bg:#eef0f8;            /* 앱 바깥(데스크톱 여백) */
  --app:#faf8ff;           /* 앱 캔버스 */
  --card:#ffffff;
  --ink:#242c51;           /* 본문/헤딩 네이비 */
  --muted:#5b6488;         /* 보조 텍스트 */
  --muted-2:#8a92b4;
  --line:#e7e9f4;

  --primary:#0057bd;       /* 포인트 블루 */
  --primary-strong:#00408c;
  --primary-tint:#e7f0fb;
  --primary-2:#3b82f6;

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

  --radius:16px;           /* 기본 카드 */
  --radius-sm:12px;
  --radius-lg:24px;
  --radius-xl:32px;        /* 프리미엄 히어로 */
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(36,44,81,.06);
  --shadow:0 6px 20px -8px rgba(36,44,81,.16), 0 2px 6px rgba(36,44,81,.05);
  --shadow-lg:0 20px 50px -18px rgba(36,44,81,.30);
  --ring:0 0 0 3px rgba(0,87,189,.28);

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

  --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:16.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:-.01em;line-height:1.25}

/* 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(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.topbar .inner{max-width:var(--app-w);margin:0 auto;height:var(--top-h);
  display:flex;align-items:center;gap:10px;padding:0 12px}
.topbar .spacer{flex:1}
.tb-icon{width:42px;height:42px;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:25px}
.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) + 14px)}

/* 옛 상단 텍스트 네비 제거 */
.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:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  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:.7rem;font-weight:700;text-decoration:none;padding-top:8px}
.tabbar > a .ic, .tabbar > a .msym{font-size:25px;line-height:1}
.tabbar > a .ic{font-size:1.4rem}
.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:18px}
.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.22rem;font-weight:800}
.sec-head .more{font-size:.85rem;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:2px}
.sec-head .more .msym{font-size:18px}
.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:1rem;
  padding:12px 18px;border-radius:var(--pill);border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.btn.accent, .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.accent:hover{background:var(--primary-strong)}
.btn.lg{padding:14px 22px;font-size:1.05rem}
.btn.block{display:flex;width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--pill);
  background:var(--primary-tint);color:var(--primary-strong);font-weight:700;font-size:.84rem}

/* ============================================================
   홈 — 매거진 레이아웃
   ============================================================ */
.home-page{display:flex;flex-direction:column;gap:6px}

/* 히어로: 대표/사전신청 */
.whero{position:relative;border-radius:var(--radius-xl);overflow:hidden;color:#fff;
  min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 22px 24px;box-shadow:var(--shadow-lg);isolation:isolate}
.whero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,#0057bd 0%,#3b82f6 55%,#7aa8ff 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.72rem;font-weight:800;margin:8px 0 6px;line-height:1.2}
.whero p{margin:0 0 16px;color:#eaf1ff;font-size:.98rem;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.22rem;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 14px;text-align:center;color:var(--ink);
  display:flex;flex-direction:column;align-items:center}
.scene a:hover{box-shadow:var(--shadow);transform:translateY(-1px);transition:.15s}
.scene .ic{font-size:1.7rem;display:block;margin-bottom:6px;line-height:1}
.scene .l{display:block;font-family:var(--font-display);font-size:1.28rem;font-weight:800;color:var(--ink);line-height:1.1}
.scene .n{display:block;margin-top:5px;font-size:.82rem;font-weight:700;color:var(--muted)}

/* 포커스 카드(정책/안내) */
.focus-card{position:relative;border-radius:var(--radius-lg);padding:20px 20px;
  background:linear-gradient(135deg,#fff 0%,#fef2d6 130%);border:1px solid #f4e2b0;
  box-shadow:var(--shadow);overflow:hidden}
.focus-card .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  color:var(--gold-strong);background:#fff;padding:4px 10px;border-radius:var(--pill);margin-bottom:10px}
.focus-card h3{margin:0 0 6px;font-size:1.1rem}
.focus-card p{margin:0;color:var(--muted);font-size:.92rem}
.focus-card .msym.deco{position:absolute;right:-8px;bottom:-10px;font-size:96px;color:rgba(230,167,27,.16)}

/* 에디토리얼(새 소식) 가로 카드 */
.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 .thumb{height:112px;background:linear-gradient(135deg,var(--primary-tint),#dfe7fb);
  display:flex;align-items:center;justify-content:center;color:var(--primary)}
.ed-card .thumb .msym{font-size:40px;opacity:.7}
.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-lg);padding:16px 18px;box-shadow:var(--shadow);margin-top:18px}
.coming-banner .cb-ic{font-size:1.6rem}
.coming-banner .cb-txt{flex:1;line-height:1.35}
.coming-banner .cb-txt b{font-family:var(--font-display);font-size:1.06rem}
.coming-banner .cb-sub{display:block;font-size:.82rem;color:#dfeaff}
.coming-banner .cb-go{font-weight:800;white-space:nowrap}

/* 통합검색 */
.home-search{display:flex;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--pill);box-shadow:var(--shadow-sm);padding:6px 6px 6px 18px;align-items:center;margin-top:16px}
.home-search .msym{color:var(--muted-2)}
.home-search input{flex:1;border:none;outline:none;background:transparent;font-size:1rem;font-family:var(--font-body);color:var(--ink)}
.home-search input::placeholder{color:var(--muted-2)}
.home-search button{border:none;background:var(--primary);color:#fff;border-radius:var(--pill);
  padding:10px 18px;font-weight:800;font-family:var(--font-display);cursor:pointer}

/* 플래시 메시지 */
.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{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:0;overflow:hidden}
a.pcard{color:inherit}
.pcard:hover, .pcard-coming:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);transition:.16s}
.pcard-coming{padding-bottom:14px}
.pcard-coming .pc-hit{display:block;color:inherit}
/* 카테고리 칩(이미지 없을 때) — 빈 박스 없이 컴팩트하게 */
.cat-badge{align-self:flex-start;display:inline-block;
  background:var(--primary-tint);color:var(--primary-strong);font-family:var(--font-display);
  font-weight:800;font-size:.72rem;letter-spacing:.02em;padding:4px 10px;border-radius:var(--pill);margin-bottom:8px}
/* 썸네일 이미지(있을 때 꽉 채움) */
.pthumb{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius-sm);
  overflow:hidden;margin-bottom:10px;background:var(--primary-tint)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-badge.over{position:absolute;top:8px;left:8px;margin:0;background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm)}
.pbody{display:flex;flex-direction:column;gap:6px}
.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:10px;color:var(--muted-2);font-size:.83rem;font-weight:600}
.pc-inst,.pc-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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)}

/* ── 관심 과목(♥) 코너 토글 ── */
.pcard{position:relative}
.pc-heart{position:absolute;top:10px;right:10px;z-index:4;margin:0}
.heart-btn{width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-sm);color:#c3c7d6;font-size:1.25rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.heart-btn.on{color:var(--accent)}
.heart-btn:hover{color:var(--accent);background:#fff}
.pc-done-btn{background:var(--primary-tint) !important;color:var(--primary-strong) !important;border-color:transparent !important}

/* ── 리서치 & 서베이 배너 ── */
.survey-banner{display:flex;align-items:center;gap:14px;border-radius:var(--radius-lg);padding:16px 18px;
  background:linear-gradient(135deg,#fff6de,#ffe7ad);border:1px solid #f0d485;box-shadow:var(--shadow);color:var(--ink)}
.survey-banner .sb-ic{font-size:1.8rem;color:var(--gold-strong)}
.survey-banner .sb-txt{flex:1;line-height:1.35}
.survey-banner .sb-txt b{font-family:var(--font-display);font-size:1.08rem}
.survey-banner .sb-sub{display:block;font-size:.82rem;color:var(--muted)}
.survey-banner .sb-go{font-weight:800;color:var(--gold-strong);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(20,24,45,.45)}
.modal-panel{position:relative;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)}
.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.4rem;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:30px;width:auto;display:block}
@media(max-width:400px){ .logo-img{height:26px} }
.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}