/* ============================================================
   신청년라이프 — 앱 스타일시트 (모바일 우선)
   시니어 대상 교육·커뮤니티 서비스. 각지고 담백한 코퍼레이트 톤.
   · 배경 #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 top, rgba(5,7,22,.97) 6%, rgba(5,7,22,.90) 30%, rgba(5,7,22,.55) 58%, rgba(5,7,22,.20) 100%)}
.pc-scrim.noimg{background:linear-gradient(155deg,#151c66 0%,#0004a9 58%,#050733 100%)}
/* 본문(글씨)은 아래쪽으로 정렬, 흰 글씨 (그림자 없이 — 스크림으로 대비 확보) */
.pcard .pc-hit, .pcard-coming .pc-hit{position:relative;z-index:2;flex:1;display:flex;
  flex-direction:column;justify-content:flex-end;gap:6px;padding:13px 13px 2px;color:#fff}
.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-action 안), 버튼 바로 위. 제목·설명·태그는
   pc-hit의 하단정렬(justify-end)로 이 가격 바로 위까지 내려온다 */
.pc-action .pc-price{margin:0 0 8px}
.pc-action .pc-price .price{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff}
.pc-action .pc-price .price small{font-weight:600;color:rgba(255,255,255,.82);font-size:.78rem}
/* 제목이 우상단 배지(특가/관심)와 겹치지 않도록 오른쪽 여백 */
.pcard .pc-title, .pcard-coming .pc-title{padding-right:46px}
.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: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: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(20,24,45,.45)}
.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}