/* 메인 페이지 바이브 코딩 1기 모집 안내 */
.vibe-popup { margin:auto; inset:0; width:460px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:0; border:1px solid #363636; border-radius:16px; background:#171717; color:#f6f6f6; box-shadow:0 24px 80px #0005; overflow:auto; }
.vibe-popup::backdrop { background:#0009; backdrop-filter:blur(4px); }
.vibe-popup-content { padding:36px 32px 24px; }
.vibe-popup-recruit { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; margin:0 0 24px; }
.vibe-popup-badge { flex-shrink:0; display:inline-flex; align-items:center; height:34px; box-sizing:border-box; padding:0 10px; border-radius:4px; background:#c5f06b; color:#171717; font-size:14px; line-height:1; font-weight:700; }
.vibe-popup-category { display:inline-flex; align-items:center; height:34px; white-space:nowrap; color:#c5f06b; font-size:22px; line-height:1; font-weight:700; letter-spacing:-0.5px; }
.vibe-popup h2 { color:#f6f6f6; margin:0 0 20px; font-size:40px; line-height:1.3; letter-spacing:-1.2px; font-weight:500; word-break:keep-all; }
.vibe-popup-intro { margin:0 0 24px; font-size:14px; line-height:1.8; color:#d0d0d0; word-break:keep-all; }
.vibe-popup-schedule { margin:0 0 22px; padding:18px 0; border-block:1px solid #393939; }
.vibe-popup-schedule div { display:flex; gap:16px; margin:8px 0; font-size:14px; line-height:1.6; }
.vibe-popup-schedule dt { flex:0 0 32px; color:#a7a7a7; }
.vibe-popup-schedule dd { margin:0; color:#fff; word-break:keep-all; }
.vibe-popup-description { margin:0 0 24px; font-size:14px; line-height:1.8; color:#d0d0d0; word-break:keep-all; }
.vibe-popup-link { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-radius:7px; background:#c5f06b; color:#171717; font-size:15px; font-weight:650; text-decoration:none; }
.vibe-popup-link:hover { background:#d5ff83; }
.vibe-popup-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-top:1px solid #393939; }
.vibe-popup-footer label { display:flex; align-items:center; gap:7px; font-size:12px; color:#c0c0c0; cursor:pointer; }
.vibe-popup-footer input { width:16px; height:16px; accent-color:#c5f06b; }
.vibe-popup-footer button { border:0; padding:6px; background:transparent; color:#eee; font:inherit; font-size:13px; cursor:pointer; }
.vibe-popup-footer button span { color:inherit; }
.vibe-popup :focus-visible { outline:2px solid #c5f06b; outline-offset:4px; }
html:has(.vibe-popup[open]) { overflow:hidden; }
@media(max-width:480px) { .vibe-popup-content { padding:26px 22px 20px; } .vibe-popup h2 { font-size:34px; } .vibe-popup-footer { padding:12px 18px; } }

@media(max-width:480px) { .vibe-popup-recruit { gap:8px; } .vibe-popup-badge { height:30px; padding:0 8px; font-size:12px; } .vibe-popup-category { height:30px; font-size:18px; } }

.vibe-popup-slide[hidden], .vibe-popup-tabs[hidden], .vibe-popup-tabs button[hidden] { display:none!important; }
.vibe-popup-schedule small { font-size:12px; color:#c5f06b; }

.vibe-popup-tabs { display:flex; gap:0; padding:0; background:#b5b7aa; border-bottom:0; }
.vibe-popup-tabs button { flex:1; min-width:0; min-height:60px; padding:18px 8px; border:0; border-radius:0; background:transparent; color:#303329; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.vibe-popup-tabs button[aria-selected="true"] { color:#c5f06b; background:#171717; border-color:#171717; }
.vibe-popup-tabs button:not([aria-selected="true"]):hover { background:#a5a895; color:#171717; }
.vibe-popup-tabs button:focus-visible { outline-color:#405a1b; outline-offset:-5px; }
.vibe-popup-tabs button[aria-selected="true"]:focus-visible { outline-color:#c5f06b; }
@media(max-width:480px) { .vibe-popup-tabs { padding:0; } .vibe-popup-tabs button { font-size:13px; } }

/* 두 공지의 높이를 함께 확보해 탭 전환 시 외곽 크기를 유지합니다. */
.vibe-popup-panels { display:grid; }
.vibe-popup-panels > .vibe-popup-slide { grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; }
.vibe-popup-panels > .vibe-popup-slide[hidden] { display:flex!important; visibility:hidden; pointer-events:none; }

.vibe-popup-slide > .vibe-popup-link { margin-top:auto; flex-shrink:0; }
@media(max-width:360px) { .vibe-popup-category { font-size:16px; } }

/* 모바일에서는 전체 안내를 한 화면에 읽을 수 있도록 간격을 줄입니다. */
@media(max-width:480px) {
  .vibe-popup { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
  .vibe-popup-tabs button { min-height:44px; padding:10px 8px; }
  .vibe-popup-content { padding:22px 20px 20px; }
  .vibe-popup-recruit { margin-bottom:18px; }
  .vibe-popup-badge, .vibe-popup-category { height:26px; }
  .vibe-popup h2 { margin-bottom:18px; font-size:30px; line-height:1.25; letter-spacing:-1px; }
  .vibe-popup-intro { margin-bottom:18px; font-size:13px; line-height:1.65; }
  .vibe-popup-schedule { margin-bottom:18px; padding:10px 0; }
  .vibe-popup-schedule div { margin:4px 0; gap:12px; font-size:13px; line-height:1.5; }
  .vibe-popup-link { min-height:44px; box-sizing:border-box; padding:10px 14px; font-size:14px; }
  .vibe-popup-footer { padding:8px 16px; }
  .vibe-popup-footer button { min-height:32px; }
}

.vibe-popup-schedule :is(dt,dd) { font-size:inherit; line-height:inherit; }
.vibe-popup-link > span { color:inherit; font-size:inherit; line-height:inherit; }
.vibe-popup-footer button > span { font-size:inherit; }
