@font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-4Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-5Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-6SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-7Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-8ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Paperlogy';src:url('/resource/fonts/Paperlogy-9Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap} /* ===== jbb- 네임스페이스: 잡아바 기존 CSS와 충돌 방지 (모든 규칙 #jbb-app 하위로 격리) ===== */ #jbb-app{ --jbb-brand:#1f5fd6; --jbb-brand-d:#17469e; --jbb-brand-l:#eaf1fd; --jbb-accent:#f97316; --jbb-accent-d:#ea580c; --jbb-danger:#dc2626; --jbb-ink:#1f2937; --jbb-muted:#6b7280; --jbb-line:#e5e7eb; --jbb-bg:#f4f6fb; --jbb-card:#fff; font-family:'Paperlogy','Malgun Gothic','맑은 고딕',AppleSDGothicNeo,-apple-system,sans-serif; color:var(--jbb-ink); background:var(--jbb-bg); line-height:1.5; } #jbb-app *{box-sizing:border-box} #jbb-app [hidden]{display:none!important} #jbb-app button,#jbb-app input,#jbb-app select,#jbb-app textarea{font-family:inherit} #jbb-app .jbb-wrap{max-width:1180px;margin:0 auto;padding:0 20px 150px} /* hero */ #jbb-app .jbb-header{overflow:hidden;background:#f7fbff} #jbb-app .jbb-heroInner{position:relative;width:100%;aspect-ratio:1904/806;margin:0 auto;overflow:hidden} #jbb-app .jbb-heroBackground{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill} #jbb-app .jbb-heroObjectStage{position:absolute;top:10.55%;left:50%;width:59.88%;aspect-ratio:1140/633;transform:translateX(-50%)} #jbb-app .jbb-heroLeft,#jbb-app .jbb-heroRight{position:absolute;display:block;max-width:none;height:auto} #jbb-app .jbb-heroLeft{top:0;left:0;width:63.86%} #jbb-app .jbb-heroRight{top:.32%;left:65.06%;width:35.18%} /* quota strip */ #jbb-app .jbb-qstrip{max-width:1180px;margin:16px auto 0;padding:0 20px;position:relative;z-index:5} #jbb-app .jbb-qcard{position:relative;background:#fff;border:0;border-radius:16px;box-shadow:0 8px 24px rgba(17,24,39,.12);padding:18px 22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center} #jbb-app .jbb-qleft{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;width:100%} #jbb-app .jbb-dots{display:flex;gap:6px} #jbb-app .jbb-dot{width:21px;height:21px;border-radius:50%;background:#eef4fb;border:2px solid #cbd8e8;box-shadow:inset 0 1px 2px rgba(17,24,39,.08);transition:.3s} #jbb-app .jbb-dot.jbb-used{background:linear-gradient(135deg,#1f3f8f,#071a4a);border-color:#06163f;box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 2px 5px rgba(7,26,74,.28);transform:scale(1.06)} #jbb-app .jbb-qtext{font-size:17px} #jbb-app .jbb-qtext b{color:var(--jbb-accent);font-size:23px;font-weight:800} /* buttons */ #jbb-app .jbb-btn{border:0;border-radius:8px;padding:11px 18px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s} #jbb-app .jbb-btn-p{background:var(--jbb-brand);color:#fff} #jbb-app .jbb-btn-p:hover{background:var(--jbb-brand-d)} #jbb-app .jbb-btn-g{background:#eef1f6;color:var(--jbb-ink)} #jbb-app .jbb-btn-g:hover{background:#e2e6ee} #jbb-app .jbb-btn-o{background:var(--jbb-accent);color:#fff} #jbb-app .jbb-btn-o:hover{background:var(--jbb-accent-d)} #jbb-app .jbb-btn:disabled{opacity:.5;cursor:not-allowed} /* tabs */ #jbb-app .jbb-tabs{display:grid;grid-template-columns:repeat(6,1fr);margin:28px 0 0;border:1px solid rgba(22,155,234,.32);overflow:hidden;background:#e9f9fb} #jbb-app .jbb-tab{min-height:56px;border:0;border-right:1px solid rgba(22,155,234,.32);background:#e9f9fb;padding:0 14px;font-size:16px;font-weight:800;color:#1594d4;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:.15s} #jbb-app .jbb-tab:last-child{border-right:0} #jbb-app .jbb-tab:hover{background:#d8f3f8;color:#0b7fbd} #jbb-app .jbb-tab.jbb-on{background:#169bea;color:#fff} #jbb-app .jbb-tab .jbb-cnt{font-size:12px;color:#fff;background:#169bea;border:0;border-radius:999px;min-width:20px;text-align:center;padding:2px 7px;line-height:1.4;margin-left:5px;display:inline-block} #jbb-app .jbb-tab .jbb-cnt.jbb-hide{display:none} #jbb-app .jbb-tab.jbb-on .jbb-cnt{color:#fff;background:#169bea} /* panels */ #jbb-app .jbb-panel{display:none;padding-top:18px} #jbb-app .jbb-panel.jbb-on{display:block} #jbb-app .jbb-category-section{padding-top:4px} #jbb-app .jbb-category-section+.jbb-category-section{margin-top:34px;padding-top:30px;border-top:1px solid var(--jbb-line)} #jbb-app .jbb-category-title{margin:0 0 18px;font-size:25px;font-weight:900;color:var(--jbb-brand-d)} #jbb-app .jbb-group{margin-bottom:20px} #jbb-app .jbb-group h3{font-size:17px;color:var(--jbb-brand-d);margin:0 0 12px;padding-left:10px;border-left:4px solid var(--jbb-brand)} #jbb-app .jbb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:14px} #jbb-app .jbb-item{position:relative;isolation:isolate;border:1.5px solid var(--jbb-line);border-radius:12px;padding:17px 18px;background:var(--jbb-card);display:flex;align-items:center;justify-content:space-between;gap:14px;transition:transform .18s,border-color .18s,background .18s} #jbb-app .jbb-nmwrap{flex:1 1 auto;min-width:0} #jbb-app .jbb-nm{font-size:16px;font-weight:600} #jbb-app .jbb-desc{font-size:14px;color:var(--jbb-muted);margin-top:6px;line-height:1.5;font-weight:400} #jbb-app .jbb-item.jbb-sel{border-color:var(--jbb-brand);background:var(--jbb-brand-l)} #jbb-app .jbb-item.jbb-pop{animation:jbb-pop .35s ease} @keyframes jbb-pop{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}} #jbb-app .jbb-item::after{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:16px;background:radial-gradient(circle at 78% 50%,rgba(22,155,234,.55),rgba(31,95,214,.16) 48%,transparent 72%);opacity:0;transform:scale(.96);pointer-events:none} #jbb-app .jbb-item.jbb-glow::after{animation:jbb-vote-glow .65s cubic-bezier(.22,1,.36,1)} @keyframes jbb-vote-glow{0%{opacity:0;transform:scale(.96)}28%{opacity:1;transform:scale(1.03)}100%{opacity:0;transform:scale(1.08)}} #jbb-app .jbb-particle{position:absolute;right:45px;top:50%;z-index:3;width:7px;height:7px;border-radius:999px;pointer-events:none;box-shadow:0 0 8px currentColor;animation:jbb-particle-burst .68s cubic-bezier(.16,1,.3,1) forwards} @keyframes jbb-particle-burst{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(var(--jbb-px),var(--jbb-py)) scale(1.15)}} #jbb-app .jbb-item.jbb-locked{opacity:.5} #jbb-app .jbb-votectl{flex:0 0 auto;display:flex;align-items:center;gap:6px} #jbb-app .jbb-votecount{min-width:40px;text-align:center;font-size:14px;font-weight:800;color:var(--jbb-brand-d)} #jbb-app .jbb-votebtn{height:38px;border:1.5px solid var(--jbb-brand);border-radius:8px;background:#fff;color:var(--jbb-brand);font-size:14px;font-weight:800;cursor:pointer;transition:.15s} #jbb-app .jbb-minus{width:38px;font-size:20px;line-height:1} #jbb-app .jbb-plus{min-width:60px;padding:0 12px;background:var(--jbb-brand);color:#fff} #jbb-app .jbb-votebtn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 8px rgba(31,95,214,.18)} #jbb-app .jbb-votebtn:disabled{border-color:var(--jbb-line);color:var(--jbb-muted);background:#f3f4f6;cursor:not-allowed;box-shadow:none} /* results */ #jbb-app .jbb-resnote{background:var(--jbb-brand-l);border:1px solid #cfe0fb;border-radius:10px;padding:11px 14px;font-size:13px;color:var(--jbb-brand-d);margin-bottom:16px} #jbb-app .jbb-rrow{display:grid;grid-template-columns:30px 1fr 54px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed #eef0f4} #jbb-app .jbb-rrow .jbb-rk{text-align:center;font-weight:800;color:var(--jbb-muted)} #jbb-app .jbb-rrow.jbb-top .jbb-rk{color:var(--jbb-accent)} #jbb-app .jbb-rrow .jbb-nm2{font-size:13px} #jbb-app .jbb-rrow .jbb-cat{font-size:11px;color:var(--jbb-muted)} #jbb-app .jbb-rrow .jbb-track{background:#eef1f6;border-radius:7px;height:14px;overflow:hidden;margin-top:4px} #jbb-app .jbb-rrow .jbb-fill{background:linear-gradient(90deg,var(--jbb-brand),var(--jbb-accent));height:100%;width:0;transition:width .6s ease} #jbb-app .jbb-rrow .jbb-v{text-align:right;font-weight:800;color:var(--jbb-accent)} #jbb-app .jbb-moreBtn{display:block;width:100%;margin-top:14px;background:#eef1f6;border:1px solid var(--jbb-line);border-radius:10px;padding:11px;font-weight:700;color:var(--jbb-brand-d);cursor:pointer} #jbb-app .jbb-resultSection{display:none} /* result modal */ .jbb-resultModalOverlay{position:fixed;inset:0;background:rgba(17,24,39,.56);display:none;align-items:center;justify-content:center;padding:24px 16px;z-index:99999} .jbb-resultModalOverlay.jbb-show{display:flex;animation:jbb-fade .2s} .jbb-resultModal{width:min(720px,100%);max-height:min(760px,86vh);background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;font-family:'Paperlogy','Malgun Gothic','맑은 고딕',AppleSDGothicNeo,-apple-system,sans-serif} .jbb-resultModalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid #e5e7eb} .jbb-resTitle{font-size:20px;margin:0;color:#17469e;font-weight:900} .jbb-modalClose{border:0;background:#eef1f6;color:#1f2937;border-radius:999px;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer} .jbb-modalClose:hover{background:#e2e6ee} .jbb-resultModalBody{padding:18px 20px 22px;overflow:auto} @keyframes jbb-fade{from{opacity:0}to{opacity:1}} /* event entry */ body.jbb-modalOpen{overflow:hidden} #jbb-app .jbb-entryWrap{position:fixed;inset:0;z-index:99998;margin:0;max-width:none;padding:16px;background:rgba(17,24,39,.62);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Paperlogy','Malgun Gothic','맑은 고딕',AppleSDGothicNeo,-apple-system,sans-serif} #jbb-app .jbb-entry{width:min(760px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #dbe3ef;border-radius:20px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.32);animation:jbb-drop .35s cubic-bezier(.2,1.1,.4,1)} #jbb-app .jbb-entryHead{position:relative} #jbb-app .jbb-entryKicker{display:inline-block;margin-bottom:8px;border-radius:999px;background:#eaf1fd;color:var(--jbb-brand-d);padding:6px 10px;font-size:13px;font-weight:900} #jbb-app .jbb-entryHead h2{margin:0;font-size:26px;color:var(--jbb-brand-d);font-weight:900;letter-spacing:-.02em} #jbb-app .jbb-entryHead p{margin:8px 0 20px;font-size:15px;color:var(--jbb-muted)} #jbb-app .jbb-prizeSummary{overflow:hidden;border-radius:12px} #jbb-app .jbb-prizeSummary picture{display:block} #jbb-app .jbb-prizeSummaryImage{display:block;width:100%;height:auto} #jbb-app .jbb-formField{margin-top:24px} #jbb-app .jbb-formField>label{display:block;margin-bottom:7px;font-size:15px;font-weight:800;color:var(--jbb-ink)} #jbb-app .jbb-formField>label span{color:var(--jbb-danger)} #jbb-app #jbb-phone{width:min(420px,100%);height:48px;border:1.5px solid #cbd5e1;border-radius:10px;padding:0 14px;font-size:16px;color:var(--jbb-ink);outline:none} #jbb-app #jbb-phone:focus{border-color:var(--jbb-brand);box-shadow:0 0 0 3px rgba(31,95,214,.12)} #jbb-app .jbb-fieldHelp{margin:6px 0 0;font-size:13px;color:var(--jbb-muted)} #jbb-app .jbb-entryInfoGrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px} #jbb-app .jbb-entryInfo{min-width:0} #jbb-app .jbb-entryInfoWide{grid-column:1/-1} #jbb-app .jbb-entryInfo h3{margin:0 0 7px;color:var(--jbb-ink);font-size:14px;font-weight:900} #jbb-app .jbb-entryDisclosure summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:var(--jbb-ink);font-size:14px;font-weight:900;cursor:pointer;list-style:none} #jbb-app .jbb-entryDisclosure summary::-webkit-details-marker{display:none} #jbb-app .jbb-entryDisclosure summary span{color:var(--jbb-brand);font-size:12px;font-weight:800} #jbb-app .jbb-entryDisclosure[open] summary{margin-bottom:7px} #jbb-app .jbb-entryDisclosure[open] summary span{font-size:0} #jbb-app .jbb-entryDisclosure[open] summary span::after{content:"[접기]";font-size:12px} #jbb-app .jbb-entryDisclosure .jbb-scrollNotice{height:180px} #jbb-app .jbb-scrollNotice{height:50px;overflow-y:auto;border:1px solid #dbe3ef;border-radius:10px;padding:12px 14px;background:#f8fafc;color:#475569;font-size:12px;line-height:1.6;outline:none;scrollbar-gutter:stable} #jbb-app .jbb-scrollNotice:focus{border-color:var(--jbb-brand);box-shadow:0 0 0 3px rgba(31,95,214,.1)} #jbb-app .jbb-scrollNotice ol,#jbb-app .jbb-scrollNotice ul{margin:0;padding-left:20px} #jbb-app .jbb-scrollNotice li+li{margin-top:8px} #jbb-app .jbb-scrollNotice p{margin:0 0 10px} #jbb-app .jbb-scrollNotice p:last-child{margin-bottom:0} #jbb-app .jbb-ageNotice{margin:12px 0 0!important;color:#dc2626;font-weight:800} #jbb-app .jbb-entryChecks{margin-top:18px;padding:14px 16px;border-radius:12px;background:#f8fafc;border:1px solid #e5e7eb} #jbb-app .jbb-consent{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-size:14px;line-height:1.45;cursor:pointer} #jbb-app .jbb-entryChecks .jbb-consent:first-child{margin-top:0} #jbb-app .jbb-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--jbb-brand)} #jbb-app .jbb-consent b{color:var(--jbb-danger)} #jbb-app .jbb-entryActions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} #jbb-app .jbb-entryActions .jbb-btn{min-width:112px} /* notice */ #jbb-app .jbb-notice{margin-top:24px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:16px 18px;font-size:15px;color:#9a3412} #jbb-app .jbb-notice b{color:var(--jbb-accent-d)} /* admin */ /* toast + overlays */ .jbb-toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:100000;font-family:'Paperlogy','Malgun Gothic','맑은 고딕',sans-serif} .jbb-toast.jbb-show{opacity:1} .jbb-loadingOverlay{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,24,39,.58);font-family:'Paperlogy','Malgun Gothic','맑은 고딕',sans-serif} .jbb-loadingOverlay.jbb-show{display:flex;animation:jbb-fade .15s} .jbb-loadingBox{width:min(360px,100%);display:flex;flex-direction:column;align-items:center;gap:9px;padding:28px 24px;border-radius:18px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;color:#17469e} .jbb-loadingBox strong{font-size:17px;font-weight:900;line-height:1.45;word-break:keep-all} .jbb-loadingBox>span:last-child{font-size:13px;color:#64748b} .jbb-spinner{display:block;flex-shrink:0;box-sizing:border-box;width:38px;height:38px;margin-bottom:4px;border:4px solid #dbeafe;border-top-color:#1f5fd6;border-radius:50%;animation:jbb-spin .75s linear infinite} @keyframes jbb-spin{to{transform:rotate(360deg)}} .jbb-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:none;align-items:center;justify-content:center;z-index:100000;font-family:'Paperlogy','Malgun Gothic','맑은 고딕',sans-serif} .jbb-overlay.jbb-show{display:flex;animation:jbb-fade .2s} .jbb-sticker{background:#fff;border-radius:22px;padding:30px 28px;max-width:340px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3);animation:jbb-drop .45s cubic-bezier(.2,1.3,.4,1)} @keyframes jbb-drop{0%{transform:translateY(-30px) scale(.8);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}} .jbb-sticker .jbb-badge{font-size:52px;line-height:1} .jbb-sticker h2{font-size:20px;margin:14px 0 8px;color:#17469e} .jbb-sticker p{font-size:14px;color:#6b7280;margin:0 0 18px} .jbb-eventModal{max-width:430px;padding:34px 30px} .jbb-eventModalLabel{display:inline-flex;border-radius:999px;background:#eaf1fd;color:#17469e;padding:6px 11px;font-size:12px;font-weight:900;letter-spacing:.08em} .jbb-eventModal h2{font-size:24px;margin-top:16px} .jbb-modalPrize{display:flex;flex-direction:column;gap:3px;margin:0 0 20px;padding:14px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412} .jbb-modalPrize b{font-size:17px;color:#c2410c} .jbb-modalPrize span{font-size:13px} .jbb-confirmBtns{display:flex;justify-content:center;gap:8px} /* footer */ .jbb-foot{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -4px 16px rgba(0,0,0,.06);z-index:9999;font-family:'Paperlogy','Malgun Gothic','맑은 고딕',sans-serif} .jbb-foot .jbb-inner{max-width:1180px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .jbb-foot .jbb-info{font-size:15px;color:#1f2937} .jbb-foot .jbb-info .jbb-big{font-size:20px;font-weight:800} .jbb-foot .jbb-info .jbb-today{color:#f97316} .jbb-foot .jbb-info .jbb-total{color:#1f5fd6} .jbb-footbtns{display:flex;gap:8px;flex-wrap:wrap} @media(max-width:560px){ #jbb-app .jbb-heroInner{aspect-ratio:390/350} #jbb-app .jbb-heroBackground{object-fit:cover} #jbb-app .jbb-heroObjectStage{top:6%;left:4%;width:92%;aspect-ratio:728/619;transform:none} #jbb-app .jbb-heroLeft{width:100%} #jbb-app .jbb-heroRight{display:none} #jbb-app .jbb-wrap{padding:0 14px 190px} #jbb-app .jbb-grid{grid-template-columns:1fr} #jbb-app .jbb-qstrip{margin-top:14px;padding:0 14px} #jbb-app .jbb-qcard{flex-direction:column;align-items:stretch;padding:18px 16px} #jbb-app .jbb-tabs{grid-template-columns:repeat(2,1fr)} #jbb-app .jbb-tab{min-height:50px;font-size:14px;white-space:normal;line-height:1.25} #jbb-app .jbb-tab:nth-child(2n){border-right:0} #jbb-app .jbb-tab:nth-child(-n+4){border-bottom:1px solid rgba(22,155,234,.32)} #jbb-app .jbb-item{align-items:flex-start;flex-direction:column} #jbb-app .jbb-votectl{width:100%;justify-content:flex-end} #jbb-app .jbb-entryWrap{padding:10px} #jbb-app .jbb-entry{max-height:calc(100dvh - 20px);padding:22px 16px;border-radius:16px} #jbb-app .jbb-entryHead{padding-right:0} #jbb-app .jbb-entryHead h2{font-size:23px} #jbb-app .jbb-entryActions .jbb-btn{flex:1 1 0;min-width:0} .jbb-foot .jbb-inner{align-items:stretch;padding:10px 14px} .jbb-footbtns{width:100%} .jbb-footbtns .jbb-btn{flex:1 1 0} } @media(prefers-reduced-motion:reduce){ #jbb-app .jbb-item.jbb-pop{animation:none} #jbb-app .jbb-item.jbb-glow::after{animation:none} #jbb-app .jbb-particle{display:none} .jbb-spinner{animation:none} } /* ===== 잡아바 공통 레이아웃 연동 보정 (이식 시 추가) ===== 하단 고정 바(.jbb-foot, z-index:9999)가 공통