/* 신청년캠퍼스 — 디자인 시스템 v2  "잉크 & 메달(Ink & Medal)"
   컨셉: 시니어를 '신청년'으로 다시 세우는 품격 있는 캠퍼스.
   - 잉크 인디고(#112061) = 기관/학문   · 골드 = 명예(기여·마스터)
   - 접근성은 타협 없음: 큰 글씨(19px+), 글자크기 토글, 48px+ 터치, 고대비, 포커스 링 */

:root{
  /* color — veso.kr 브랜드 값 반영 */
  --bg:#e7e9f0;           /* 살짝 톤다운한 배경(대학스러운 차분함) */
  --card:#ffffff;
  --ink:#191b2a;          /* 인디고 기 도는 먹색 */
  --muted:#5b5e70;
  --line:#dcdfea;

  --primary:#1e3297;      /* 포인트 컬러 — 베테랑소사이어티 브랜드 블루 */
  --primary-strong:#152470;
  --primary-tint:#e9ebf7;

  --gold:#e6a71b;         /* 메달·포인트 — 밝고 비비드한 금색 */
  --gold-strong:#a9760c;  /* 밝은 배경 위 텍스트용(대비 확보) */
  --gold-soft:#fcefcb;
  --ink-on-gold:#3a2c0a;

  --ok:#1c6b4a; --warn:#b23b3b;

  /* 각진(대학스러운) 모서리 — 최소 라운딩 */
  --radius:3px; --radius-lg:4px;
  --shadow:0 1px 2px rgba(17,32,97,.06), 0 6px 18px rgba(17,32,97,.07);
  --ring:0 0 0 3px var(--primary-tint), 0 0 0 5px rgba(17,32,97,.35);
  --fs-base:17px;
  --tabbar-h:72px;

  /* 고딕으로 통일 — 명조(serif) 미사용 */
  --font-body:"Pretendard","맑은 고딕","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --font-display:"Pretendard","맑은 고딕","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:var(--fs-base)}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);
  line-height:1.65;-webkit-text-size-adjust:100%;
  /* 한글은 어절(띄어쓰기) 단위로만 줄바꿈 — 단어 중간에서 끊기는 현상 방지 */
  word-break:keep-all;overflow-wrap:break-word;
  background-image:radial-gradient(rgba(17,32,97,.035) 1px,transparent 1px);
  background-size:26px 26px;}          /* 아주 옅은 격자 = 노트/캠퍼스 질감 */
a{color:var(--primary);text-underline-offset:2px}

/* 시니어 접근성: 글자 크기는 브라우저/OS 확대(핀치 줌)로 조절 — 확대 잠금 없음 */
/* 하단 탭바에 콘텐츠가 가리지 않도록 여백 */
@media(max-width:820px){body{padding-bottom:calc(var(--tabbar-h) + 8px)}}

/* 모바일 상단바는 최소화 — 로그인·로그아웃·관리는 하단탭/내정보로 */
@media(max-width:820px){
  .topbar a.tb{display:none}
  .topbar .inner{padding:8px 12px;gap:6px}
  .brand{font-size:1.05rem;gap:7px}
  .brand-badge{padding:2px;border-radius:7px}
  .brand-badge img{width:26px;height:26px}
  /* 모바일: 태그라인 숨겨 알림·문의 버튼 자리 확보(홈 히어로에 동일 문구 노출) */
  .topbar .brand small{display:none}
  .topbar .tb-act{padding:6px 7px;font-size:.85rem;gap:4px}
  .topbar .tb-act .ic{font-size:1.15rem}
  .topbar .tb-act .kico{width:20px;height:20px}
  .seal small{display:none}
}

/* ---- 상단바: 잉크 배너 + 골드 헤어라인 ---- */
.topbar{background:var(--primary);color:#fff;position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--gold)}
.topbar .inner{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:1.4rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.01em}
.brand-badge{flex:0 0 auto;background:#fff;border-radius:3px;padding:3px;
  display:inline-flex;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.brand-badge img{width:32px;height:32px;display:block}
.brand-text{display:flex;flex-direction:column;white-space:nowrap}
.brand small{display:block;font-family:var(--font-body);font-size:.64rem;font-weight:500;
  letter-spacing:.04em;opacity:.82;margin-top:1px;white-space:normal;max-width:30ch}
/* 푸터 브랜드 */
.foot-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:14px}
.foot-brand .foot-veso{display:block;font-family:var(--font-display);font-size:1.5rem;
  font-weight:800;color:var(--primary);line-height:1}
.foot-brand .foot-ko{display:block;font-size:.9rem;color:var(--muted);letter-spacing:.06em;margin-top:2px}
.topbar .spacer{flex:1}
.topbar a.tb{color:#fff;text-decoration:none;padding:9px 12px;border-radius:3px;font-weight:600}
.topbar a.tb:hover{background:rgba(255,255,255,.14)}
/* 헤더 액션(알림·문의) — 아이콘 + 명칭 병기, 모바일에서도 노출 */
.topbar .tb-act{display:inline-flex;align-items:center;gap:5px;color:#fff;text-decoration:none;
  padding:7px 11px;border-radius:3px;font-weight:700;font-size:.95rem;flex:0 0 auto;
  white-space:nowrap;min-height:42px}
.topbar .tb-act:hover{background:rgba(255,255,255,.14)}
.topbar .tb-act .ic{font-size:1.3rem;line-height:1}
.topbar .tb-act .kico{width:22px;height:22px;display:block;border-radius:6px}

/* ---- 상단 메인 내비 (데스크톱 전용) ---- */
.mainnav{background:#fff;border-bottom:1px solid var(--line)}
.mainnav .inner{max-width:980px;margin:0 auto;display:flex;gap:4px;padding:8px 12px}
.mainnav a{flex:0 0 auto;padding:12px 18px;border-radius:3px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:7px}
.mainnav a.active,.mainnav a:hover{background:var(--primary-tint);color:var(--primary)}
@media(max-width:820px){.mainnav{display:none}}

/* ---- 하단 탭바 (모바일 우선 · 엄지로 닿는 위치) ---- */
.tabbar{display:none}
@media(max-width:820px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:var(--tabbar-h);background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(17,32,97,.08);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;text-decoration:none;color:#6b6f82;font-weight:700;font-size:.82rem;
    min-height:56px;position:relative}
  .tabbar a .ic{font-size:1.7rem;line-height:1}
  .tabbar a.active{color:var(--primary)}
  .tabbar a.active::before{content:"";position:absolute;top:0;width:34px;height:3px;
    border-radius:0 0 3px 3px;background:var(--gold)}
}

/* ---- 홈 런처: 큰 버튼으로 원하는 기능 바로 찾기 ---- */
.launch{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.launch a{display:flex;flex-direction:column;gap:6px;justify-content:center;
  min-height:118px;padding:18px;border-radius:var(--radius-lg);text-decoration:none;
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);
  color:var(--ink);transition:transform .1s,box-shadow .12s,border-color .12s}
.launch a:hover,.launch a:active{transform:translateY(-2px);border-color:var(--primary);
  box-shadow:0 12px 30px rgba(17,32,97,.14)}
.launch .ic{font-size:2.2rem;line-height:1}
.launch .t{font-size:1.22rem;font-weight:800}
.launch .d{font-size:.9rem;color:var(--muted);font-weight:600}
.launch a.feature{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;
  background:var(--primary);color:#fff;border-color:transparent}
.launch a.feature .d{color:#d7dbf1}
.launch a.feature .ic{font-size:2.4rem}
/* 3개(배우기·놀기·어울리기) 런처 — 크고 눈에 띄게 */
.launch.three{grid-template-columns:repeat(3,1fr);gap:12px}
.launch.three a{min-height:138px;gap:12px;background:var(--primary-tint);
  border:1.5px solid #c9d0ee}
.launch.three a:hover,.launch.three a:active{background:#dde3f7;border-color:var(--primary)}
.launch.three .ic{font-size:2.9rem}
.launch.three .t{font-size:1.32rem;color:var(--primary-strong)}

/* ---- 레이아웃 ---- */
.wrap{max-width:980px;margin:0 auto;padding:22px 16px 64px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* ---- 타이포 ---- */
h1{font-family:var(--font-display);font-size:1.8rem;font-weight:800;letter-spacing:-.01em;margin:.2em 0 .5em}
h2{font-size:1.35rem;font-weight:800;margin:.2em 0 .5em}
h3{font-size:1.12rem;font-weight:700;margin:.2em 0 .4em}
p.lead{font-size:1.1rem;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:.85rem}
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-strong)}

/* ---- 히어로(시그니처): 잉크 패널 + 골드 인장 ---- */
.hero{position:relative;overflow:hidden;background:var(--primary);color:#fff;
  border:0;border-radius:var(--radius-lg);padding:34px 30px;margin-bottom:20px;
  box-shadow:0 12px 40px rgba(11,22,66,.28)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold),#e8c877 55%,var(--gold))}
.hero .eyebrow{color:#e6c987}
.hero-title{font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:2.5rem;line-height:1.18;letter-spacing:-.015em;margin:.28em 0 .3em}
.hero-sub{font-size:1.12rem;color:#dfe2f4;max-width:34ch;margin:0 0 20px}
.hero .row{gap:12px}
.seal{position:absolute;top:26px;right:28px;width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#e8c877;font-family:var(--font-display);font-size:2.5rem;font-weight:800;
  border:2px solid rgba(232,200,119,.7);
  box-shadow:inset 0 0 0 6px rgba(232,200,119,.14)}
.seal small{position:absolute;bottom:12px;font-family:var(--font-body);font-size:.5rem;
  letter-spacing:.24em;font-weight:700;opacity:.85}
@media(max-width:560px){.hero{padding:26px 22px}.hero-title{font-size:1.95rem}
  .seal{width:66px;height:66px;font-size:1.7rem;top:20px;right:18px}}
/* 모바일 첫 화면 배너는 아주 컴팩트하게(기존의 절반) */
@media(max-width:560px){
  .carousel{margin-bottom:12px}
  .carousel .hero.slide{min-height:auto;padding:11px 16px 12px}
  .carousel .hero-title{font-size:1.12rem;line-height:1.2;margin:.05em 0 .1em}
  .carousel .hero-sub{font-size:.85rem;margin:0 0 8px;max-width:none}
  .carousel .hero .eyebrow{font-size:.6rem;letter-spacing:.14em}
  .carousel .hero .row{gap:8px}
  .carousel .hero .btn.lg{min-height:36px;font-size:.9rem;padding:6px 14px}
  .carousel-dots{margin-top:0}
  .carousel-dots .dot::before{width:10px;height:10px}
}

/* ---- 히어로 캐러셀(옆으로 스와이프) ---- */
.carousel{position:relative;margin-bottom:20px}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0}
.carousel-track::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 100%;scroll-snap-align:center;margin-bottom:0}
.carousel .hero.slide{min-height:260px}
.carousel-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
/* 시니어 손가락을 위해 누를 수 있는 영역을 44px 로. 보이는 점은 ::before 로 그린다. */
.carousel-dots .dot{width:44px;height:44px;padding:0;border:0;background:none;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.carousel-dots .dot::before{content:"";width:12px;height:12px;border-radius:50%;
  background:var(--line);transition:transform .12s,background .12s}
.carousel-dots .dot.on::before{background:var(--gold-strong);transform:scale(1.35)}
.carousel .hero>*{animation:none}   /* 슬라이드 전환 시 재생 애니메이션 끔 */

/* ---- 곧 열릴 수업 배너(홈, 공지 위) ---- */
.coming-banner{display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--gold-soft);border:1px solid #e7d5a6;border-radius:var(--radius);
  padding:16px 18px;margin:0 0 18px;color:#5c4410;
  transition:transform .1s,box-shadow .12s}
.coming-banner:hover{box-shadow:0 6px 18px rgba(138,101,34,.18);transform:translateY(-1px)}
.coming-banner .cb-ic{flex:0 0 auto;font-size:1.5rem}
.coming-banner .cb-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.coming-banner .cb-txt b{font-size:1.1rem;color:#4a3608}
.coming-banner .cb-sub{font-size:.9rem;color:#7a5f1f}
.coming-banner .cb-go{flex:0 0 auto;font-weight:800;color:var(--gold-strong);white-space:nowrap}

/* ---- 과목 요청 안내(사전신청 하단) ---- */
.ask-program{text-align:center;background:var(--primary-tint);
  border:1px dashed var(--primary);border-radius:var(--radius);
  padding:18px 20px;margin:22px 0 4px;color:var(--ink)}
.ask-program b{color:var(--primary)}
.ask-program .btn{margin-top:10px}

/* ---- 명예 스트립(이달의 마스터) ---- */
.honor{display:flex;align-items:center;gap:12px;background:var(--gold-soft);
  border:1px solid #e7d5a6;border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;
  color:#5c4410;font-weight:600}
.honor .medal{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--gold);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 2px 6px rgba(138,101,34,.4)}
.honor a{margin-left:auto;color:var(--gold-strong);font-weight:700;white-space:nowrap}

/* ---- 버튼(48px+ 타깃) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 24px;border-radius:3px;border:2px solid transparent;
  background:var(--primary);color:#fff;font-size:1.06rem;font-weight:800;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:transform .1s,background .12s,box-shadow .12s}
.btn:hover{background:var(--primary-strong)}
.btn:active{transform:translateY(1px)}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:60px;font-size:1.18rem;padding:14px 30px}
.btn.ghost{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn.ghost:hover{background:var(--primary-tint)}
.btn.accent{background:var(--gold);color:var(--ink-on-gold);border-color:transparent}
.btn.accent:hover{background:var(--gold-strong);color:#fff}
.btn.gray{background:#eceef4;color:#33384a}.btn.gray:hover{background:#e0e3ee}
.btn.danger{background:var(--warn)}.btn.danger:hover{background:#8f2f2f}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* 히어로 안에서 ghost 버튼은 잉크 위에서 흰 테두리로 */
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* ---- 폼 ---- */
label.field{display:block;margin:14px 0 6px;font-weight:700}
input[type=text],input[type=tel],input[type=email],input[type=number],
input[type=password],input[type=datetime-local],input[type=search],textarea,select{
  width:100%;padding:14px;font-size:1.05rem;border:2px solid var(--line);
  border-radius:3px;background:#fff;font-family:inherit;color:var(--ink)}
/* 검색창 — 시니어 가독성: 크게 + 글자 키움 */
input[type=search]{min-height:58px;padding:15px 18px;font-size:1.2rem;
  -webkit-appearance:none;appearance:none}
input[type=search]::placeholder{font-size:1.05rem}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
textarea{min-height:140px}
.check{display:flex;align-items:center;gap:10px;font-size:1.02rem;margin:8px 0}
.check input{width:26px;height:26px;accent-color:var(--primary)}

/* ---- 칩/배지 ---- */
.chip{display:inline-block;padding:4px 12px;border-radius:3px;font-size:.85rem;
  font-weight:700;background:var(--primary-tint);color:var(--primary)}
.chip.accent{background:var(--gold-soft);color:var(--gold-strong)}
.chip.gray{background:#eceef4;color:#565b6e}
/* 눌러야 하는 칩(정렬 등)은 시니어 손가락에 맞춰 44px 확보.
   단순 표시용 배지는 그대로 둔다. */
a.chip,button.chip{min-height:44px;display:inline-flex;align-items:center;
  padding:4px 16px;font-size:.95rem}
.grade{display:inline-block;background:var(--primary);color:#fff;padding:4px 13px;border-radius:3px;
  font-weight:800;font-size:.85rem;letter-spacing:.02em;white-space:nowrap}

/* ---- 표 ---- */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.98rem}
th{background:#f6f7fb;font-weight:800;color:#2b2f45}
.table-wrap{overflow-x:auto}

/* ---- 강좌 카드 ---- */
.course{display:flex;flex-direction:column;overflow:hidden;padding:0;transition:transform .12s,box-shadow .12s}
.course:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,32,97,.14)}
.course .thumb{height:148px;background:
    radial-gradient(120% 120% at 85% -10%,rgba(232,200,119,.28),transparent 45%),
    linear-gradient(160deg,#263aa3,#152470);
  display:flex;align-items:center;justify-content:center;
  color:#e8c877;font-family:var(--font-display);font-size:1.9rem;font-weight:800;letter-spacing:.06em}
.course .body{padding:16px}
.course .price{font-size:1.2rem;font-weight:800;color:var(--primary)}

/* ---- 촘촘한 리스트(사전신청 등 대량 목록) ---- */
.clist{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.crow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .cinfo{flex:1;min-width:0;text-decoration:none;color:inherit}
.crow .ctitle{font-weight:700;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .cmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.crow .cact{flex:0 0 auto}
/* 모바일: 제목·태그·버튼을 세로로 쌓아 겹침 방지 */
@media(max-width:560px){
  .crow{flex-direction:column;align-items:stretch;gap:10px}
  .crow .ctitle{white-space:normal}
  .crow .cact{align-self:stretch}
  .crow .cact .btn,.crow .cact form{width:100%}
}
a.chip{text-decoration:none}

/* ---- 플래시 ---- */
.flash{padding:14px 18px;border-radius:3px;margin-bottom:14px;font-weight:700}
.flash.ok{background:var(--primary-tint);color:var(--primary-strong);border:1px solid #cdd3f0}
.flash.warn{background:var(--gold-soft);color:#7a5713;border:1px solid #e7d5a6}

/* ---- KPI 타일 ---- */
.kpi{text-align:center;padding:20px}
.kpi .num{font-size:2.2rem;font-weight:900;color:var(--primary);line-height:1.1;letter-spacing:-.01em}
.kpi .label{color:var(--muted);font-weight:700;margin-top:4px}
.funnel-bar{height:20px;border-radius:3px;
  background:linear-gradient(90deg,var(--primary),#2a3f8f);margin:4px 0}

/* ---- 하단 ---- */
footer{border-top:3px solid var(--gold);background:#fff;color:var(--muted);font-size:.85rem}
footer .inner{max-width:980px;margin:0 auto;padding:22px 16px}
footer{font-size:.95rem}
footer a{color:var(--primary);display:inline-block;padding:8px 4px}

.stack>*+*{margin-top:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* '모두 보기 ›' 처럼 줄 끝에 붙는 링크도 손가락으로 누를 만큼 키운다 */
.between>a{display:inline-block;padding:8px 2px}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---- 포커스 가시화(키보드) ---- */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--ring)}

/* ---- 히어로 등장(과하지 않게) ---- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero>*{animation:rise .5s both}
.hero .eyebrow{animation-delay:.02s}
.hero-title{animation-delay:.08s}
.hero-sub{animation-delay:.16s}
.hero .row{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- 필터 칩(형태 / 관심주제) — 가로 스크롤, 큰 터치 ---- */
.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .fchip,.chiprow .tchip{flex:0 0 auto;display:inline-flex;align-items:center;
  min-height:44px;padding:8px 16px;border-radius:3px;text-decoration:none;font-weight:700;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap}
.chiprow .fchip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.chiprow.tagrow .tchip{font-size:.95rem;color:var(--muted);padding:6px 14px;min-height:40px}
.chiprow.tagrow .tchip.on{background:var(--gold-soft);color:var(--gold-strong);
  border-color:#e7d5a6}

/* 조건 필터 버튼 + 팝업(모달) */
.filter-open{width:100%;justify-content:flex-start;font-size:1.02rem;
  white-space:normal;text-align:left;line-height:1.3;height:auto;min-height:52px;
  padding-top:11px;padding-bottom:11px;min-width:0;overflow:hidden}
.filter-open .fcount{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;border-radius:3px;background:var(--gold);color:#fff;font-size:.85rem}
.modal{display:none;position:fixed;inset:0;z-index:200}
.modal.show{display:block}
.modal-back{position:absolute;inset:0;background:rgba(17,32,97,.45)}
.modal-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;
  border-radius:4px 4px 0 0;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(17,32,97,.28);animation:sheet .22s ease both}
@keyframes sheet{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:641px){
  .modal-panel{left:50%;right:auto;bottom:auto;top:7vh;transform:translateX(-50%);
    width:560px;border-radius:4px;max-height:82vh;animation:none}
}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);font-size:1.15rem}
.modal-close{background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;
  color:var(--muted);width:40px;height:40px;border-radius:3px}
.modal-close:hover{background:var(--primary-tint);color:var(--primary)}
.modal-body{overflow-y:auto;padding:16px 18px;-webkit-overflow-scrolling:touch}
.modal-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.modal-foot .btn.block{flex:1}
.filtergrp{margin-bottom:16px}
.filtergrp .filtergrp-label{font-weight:800;color:var(--ink);font-size:1rem;margin-bottom:8px}
.modal .modal-chips{flex-wrap:wrap;overflow:visible}
/* 모달 필터 칩이 button 요소여도 링크칩과 동일하게 보이도록 */
button.tchip{font-family:inherit;cursor:pointer;line-height:1.2}

/* 묶음별 필터 행(주제/기간/목적/가격) */
.filterrow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.filterrow .filterlabel{flex:0 0 auto;font-weight:800;color:var(--muted);
  font-size:.82rem;min-width:46px;white-space:nowrap}
.filterrow .chiprow{margin-bottom:0}

/* 카드/행에 붙는 미니 태그 */
.cardtags{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}
.tag-mini{display:inline-block;padding:4px 11px;border-radius:3px;font-size:.9rem;
  font-weight:700;background:var(--gold-soft);color:var(--gold-strong);white-space:nowrap}
.tag-more{display:inline-block;padding:4px 12px;border-radius:3px;font-size:.9rem;
  font-weight:800;background:var(--primary-tint);color:var(--primary);cursor:pointer;
  white-space:nowrap;border:0;font-family:inherit}
.tag-more:hover{background:#dfe4f7}

/* ---- 랭킹 표: 내 행 강조 / 생략 행 ---- */
table tr.me td{background:var(--primary-tint)}
table tr.me td b{color:var(--primary-strong)}
table tr.dots td{padding:4px;font-size:1.2rem;letter-spacing:.2em}

/* ---- 포인트 등급 진행바 ---- */
.lvbar{height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.lvbar-fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong))}

/* ---- 등급/혜택 카드 ---- */
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.levels{grid-template-columns:1fr}}
.level-card{border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:#fff}
.level-card.now{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.level-head{display:flex;align-items:center;gap:12px}
.level-emoji{font-size:1.8rem;line-height:1}
.level-name{font-weight:800;font-size:1.1rem}
.level-coupon{margin:10px 0 6px;padding:6px 10px;border-radius:8px;font-weight:700;
  background:var(--gold-soft);color:var(--gold-strong);font-size:.9rem}
.level-perks{margin:6px 0 0;padding-left:18px;color:var(--ink)}
.level-perks li{margin:3px 0}

/* ---- 포인트 적립 방법 그리드 ---- */
.earn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.earn-grid{grid-template-columns:1fr}}
.earn-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;background:#fff}
.earn-emoji{font-size:1.6rem;line-height:1;flex:0 0 auto}
.earn-body{flex:1;min-width:0}

/* ---- 지난 달 최고의 신청년(1·2·3등) ---- */
.podium{display:flex;gap:10px}
.podium-item{flex:1;min-width:0;text-align:center;border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 8px;background:#fff}
.podium-item.rank1{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 4px 14px rgba(176,132,47,.18)}
.podium-medal{font-size:1.9rem;line-height:1}
.podium-name{font-weight:800;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 랭킹 초기화 안내 ---- */
.reset-note{background:var(--primary-tint);border:1px solid #cdd3f0;border-radius:3px;
  padding:12px 14px;margin:6px 0 14px;font-size:.92rem;line-height:1.55;color:var(--ink)}

/* ---- 회사 소개 페이지 ---- */
.about-hero{display:flex;align-items:center;gap:14px;background:var(--primary);
  border-radius:var(--radius-lg);padding:22px;margin-bottom:18px;
  box-shadow:0 10px 30px rgba(17,32,97,.22)}
.about-badge{flex:0 0 auto;background:#fff;border-radius:3px;padding:6px;display:inline-flex}
.about-badge img{width:56px;height:56px;display:block}
.rep{display:flex;gap:16px;align-items:flex-start}
.rep-photo{flex:0 0 auto;width:86px;height:86px;border-radius:3px;background:var(--primary-tint);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.about-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.timeline .tl-year{font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:var(--primary);margin:18px 0 8px}
.timeline .tl-year:first-child{margin-top:4px}
.tl-item{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.tl-date{flex:0 0 auto;width:44px;font-weight:800;color:var(--gold-strong);font-size:.9rem}
.tl-text{flex:1;min-width:0;line-height:1.5}

/* ---- 마이페이지 헤더(이름 + 출석 버튼) — 좁은 화면에서 버튼 튀어나옴 방지 ---- */
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mp-head .mp-head-info{min-width:0}
@media(max-width:560px){
  .mp-head{flex-direction:column;align-items:stretch}
  .mp-head form,.mp-head .btn{width:100%}
}

/* ---- 다가오는 수업 카드 ---- */
.upcoming{display:flex;flex-direction:column;gap:10px}
.up-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:inherit;background:#fff;transition:border-color .12s,box-shadow .12s}
.up-item:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.up-dday{flex:0 0 auto;min-width:60px;text-align:center;font-weight:900;color:var(--primary);
  background:var(--primary-tint);border-radius:3px;padding:8px 6px;font-size:1.05rem;white-space:nowrap}
.up-body{flex:1;min-width:0}
.up-title{font-weight:800;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{color:var(--muted);font-size:.9rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-item>.chip{flex:0 0 auto}

/* ---- 어울리기: 인스타그램형 피드 ---- */
.feed{display:flex;flex-direction:column;gap:18px;max-width:560px;margin:0 auto}
.fpost{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.fpost-head{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:inherit}
.fpost-head .avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:1.05rem;flex:0 0 auto}
.fpost-head .fp-author{font-weight:800}
.fpost-head .fp-date{margin-left:auto}
.fpost-img{display:block;width:100%;max-height:520px;object-fit:cover;background:#eef0f6}
.fpost-body{padding:12px 14px 6px}
.fpost-body .fp-title{display:block;font-weight:800;font-size:1.08rem;color:var(--ink);text-decoration:none}
.fpost-body .fp-text{margin:6px 0 0;color:#3a3d4d;white-space:pre-line}
.fpost.pinned{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft),var(--shadow)}
.fpost-actions{display:flex;gap:20px;padding:6px 14px 14px;font-weight:700;align-items:center}
.fpost-actions a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fpost-actions a:hover{color:var(--primary)}
.fpost-actions form{margin:0;display:inline-flex}
.fpost-actions .like-btn{background:none;border:0;cursor:pointer;font:inherit;font-weight:700;
  color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:0;line-height:1}
.fpost-actions .like-btn:hover{color:var(--warn)}
.fpost-actions .like-btn.on{color:var(--warn)}

/* ---- 어드민: 태그 선택(체크박스) ---- */
.tagpick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.tagpick-item{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);
  border-radius:3px;padding:8px 14px;cursor:pointer;font-weight:700;min-height:44px;
  background:#fff;user-select:none}
.tagpick-item input{width:20px;height:20px;accent-color:var(--primary)}
.tagpick-item:has(input:checked){background:var(--primary-tint);border-color:var(--primary);
  color:var(--primary-strong)}


/* ===== 모바일 상단바 최종 보정(로고 추가 후 폭 확보) — 파일 끝이라 우선 적용 ===== */
@media(max-width:820px){
  .topbar .inner{gap:6px;padding:8px 12px}
  .topbar .brand{font-size:1.02rem;gap:6px}
  .topbar .brand-badge{padding:2px;border-radius:7px}
  .topbar .brand-badge img{width:26px;height:26px}
  .topbar .tb-act{padding:6px 6px;font-size:.82rem;gap:3px}
  .topbar .tb-act .ic{font-size:1.12rem}
  .topbar .tb-act .kico{width:19px;height:19px}
}

/* ===== 홈: 컴팩트 배너 + 반투명 원 3개 ===== */
.home-hero{position:relative;background:var(--primary);color:#fff;border-radius:var(--radius-lg);
  padding:20px 20px 18px;margin-bottom:14px;overflow:hidden;border-bottom:4px solid var(--gold);
  box-shadow:0 8px 26px rgba(11,22,66,.24)}
.home-hero .eyebrow{color:#e8c877}
.home-hero .hh-title{font-weight:800;color:#fff;font-size:1.6rem;line-height:1.24;margin:.25em 0 .85em}
.hh-circles{display:flex;gap:14px}
.hh-circles a{flex:0 0 auto;width:86px;height:86px;border-radius:50%;
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.30);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;text-decoration:none;font-weight:800;font-size:.98rem;transition:background .12s}
.hh-circles a:hover,.hh-circles a:active{background:rgba(255,255,255,.26)}
.hh-circles .hc-ic{font-size:1.75rem;line-height:1}

.home-search{display:flex;gap:8px;margin-bottom:22px}
.home-search input{flex:1}
.home-search .btn{min-height:58px;min-width:82px;font-size:1.12rem}

/* ===== 홈: 신청년 랭킹 미니 ===== */
.rk-col h3{margin:0 0 8px;font-size:1.02rem;color:var(--primary)}
.rk-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.rk-row:last-child{border-bottom:0}
.rk-row .rk-medal{width:26px;text-align:center;font-weight:800}
.rk-row .rk-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 프로그램 카드 재설계(수직 압축 + 폰트 확대) ===== */
.pcard .thumb{height:82px;font-size:1.5rem}
.pcard .pbody{padding:14px 16px 16px}
.pcard .pc-title{font-size:1.2rem;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin:0;line-height:1.3}
.pcard .pc-desc{font-size:1.02rem;color:var(--muted);margin:5px 0 9px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pc-line{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:1.02rem;min-width:0}
.pcard .pc-inst{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .pc-date{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.pcard .pc-tags{margin:9px 0;flex-wrap:wrap;overflow:visible}
.pcard .pc-buy{margin-top:10px;gap:8px;flex-wrap:nowrap}
.pcard .price{font-size:1.22rem;font-weight:800;color:var(--primary)}
/* 가격 줄은 반드시 한 줄 — 폰트 줄이고 줄바꿈 금지 */
.pcard .pc-buy .price{font-size:1.02rem;white-space:nowrap;min-width:0}
.pcard .pc-buy .chip{font-size:.9rem;white-space:nowrap;flex:0 0 auto}

/* ===== 모바일 배너 높이(컴팩트, 이전 대비 약 1.2배) ===== */
@media(max-width:560px){
  .carousel .hero.slide{min-height:0;padding:16px 18px 26px}
  .carousel .hero-title{font-size:1.32rem;line-height:1.22;margin:.08em 0 .16em}
  .carousel .hero .eyebrow{font-size:.66rem}
  .carousel .hero .row{margin-top:2px}
  .carousel .hero .btn.lg{min-height:42px;font-size:1rem;padding:8px 16px}
}

/* ===== 홈 화면 세로 리듬 — 넉넉한 간격 ===== */
.home-page{display:flex;flex-direction:column;gap:32px}
.home-page > *{margin-bottom:0}
.home-page .between{margin-bottom:0}
.home-page .hp-block > *:last-child{margin-bottom:0}
@media(max-width:560px){ .home-page{gap:28px} }

/* ===== 런처 3개 옆 넘침 방지(폭 좁아도 줄어들게) ===== */
.launch.three a{min-width:0}
.launch.three .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:430px){
  .launch.three{gap:8px}
  .launch.three a{padding:14px 4px;min-height:118px;gap:8px}
  .launch.three .ic{font-size:2.4rem}
  .launch.three .t{font-size:1.05rem}
}
@media(max-width:340px){
  .launch.three .ic{font-size:2.1rem}
  .launch.three .t{font-size:.95rem}
}

/* ===== 사전신청 카드 — 배우기/놀기와 동일 레이아웃 + 하단 버튼 ===== */
.pcard-coming{overflow:visible}
.pcard-coming .pc-hit{display:block;text-decoration:none;color:inherit}
.pcard-coming .pc-action{padding:0 16px 16px}
.pcard-coming .pc-action form{width:100%;margin:0}
.pcard-coming .pc-action .btn{width:100%}
.pcard-coming .pc-done{display:block;width:100%;text-align:center;padding:12px;font-size:1rem;font-weight:800}

/* 런처 아이콘·명칭 중앙정렬 */
.launch.three a{align-items:center;text-align:center;justify-content:center}
.launch.three .ic,.launch.three .t{width:100%;text-align:center}
