@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --bg: #EFF1FB;
  --card: #FFFFFF;
  --ink: #1B1B2F;
  --ink-soft: #55597A;
  --ink-faint: #9497B5;
  --line: #DCDFF0;
  --accent: #FF5A3C;
  --accent-dark: #D6431F;
  --accent-pale: #FFE4DB;
  --lime: #C6F135;
  --lime-ink: #4A6006;
  --radius: 18px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard', -apple-system, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

.bg-blob{
  position:fixed;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
  opacity:0.55;
}
.bg-blob.b1{ width:420px; height:420px; background:var(--accent-pale); top:-140px; left:-120px; }
.bg-blob.b2{ width:360px; height:360px; background:var(--lime); opacity:0.28; bottom:-140px; right:-100px; }
.bg-blob.b3{ width:260px; height:260px; background:#C9CFFB; top:40%; right:-140px; opacity:0.5; }

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes popIn{
  0%{ opacity:0; transform:scale(0.7); }
  70%{ transform:scale(1.06); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes confettiFall{
  0%{ transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(160px) rotate(340deg); opacity:0; }
}
.fade-up{ animation:fadeInUp .5s ease both; }
.fade-up.d1{ animation-delay:.05s; }
.fade-up.d2{ animation-delay:.12s; }
.fade-up.d3{ animation-delay:.19s; }
.fade-up.d4{ animation-delay:.26s; }

.page-center{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.app-card{
  width:100%;
  max-width:480px;
  background:var(--card);
  border-radius:28px;
  box-shadow:0 24px 60px -20px rgba(27,27,47,0.28), 0 4px 16px -8px rgba(27,27,47,0.12);
  overflow:hidden;
  position:relative;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0 0;
  position:relative;
  z-index:1;
}
.topbar .brand{
  font-weight:800;
  font-size:13px;
  letter-spacing:-0.01em;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:6px;
}
.topbar .brand .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  display:inline-block;
}
.home-btn{
  position:absolute;
  left:18px;
  top:14px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-soft);
  background:var(--bg);
  border:1.5px solid var(--line);
  padding:8px 16px;
  border-radius:100px;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.home-btn:hover{
  background:var(--accent-pale);
  border-color:var(--accent);
  color:var(--accent-dark);
  transform:translateY(-1px);
}
@media (max-width:480px){
  .home-btn{ left:10px; top:10px; padding:7px 12px; font-size:12.5px; }
}

.shell{
  padding:24px 26px 36px;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

.screen{ display:none; flex:1; flex-direction:column; }
.screen.active{ display:flex; }

/* ---------- start screen ---------- */
#screen-start{ justify-content:center; text-align:center; padding:20px 0 4px; }
.icon-cluster{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}
.icon-chip{
  width:56px; height:56px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  box-shadow:0 8px 18px -8px rgba(27,27,47,0.25);
}
.icon-chip:nth-child(1){ background:var(--accent-pale); transform:rotate(-8deg) translateY(4px); }
.icon-chip:nth-child(2){ background:var(--lime); opacity:0.85; transform:rotate(5deg); }
.icon-chip:nth-child(3){ background:#DCE0FB; transform:rotate(-4deg) translateY(6px); }
.icon-chip:nth-child(4){ background:var(--accent-pale); transform:rotate(9deg); }
.eyebrow{
  font-size:13px;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-pale);
  display:inline-block;
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:18px;
}
h1{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.3;
  margin:0 0 14px;
}
.lede{
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:38ch;
  margin:0 auto 32px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  padding:16px 28px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(27,27,47,0.45);
}
.btn-primary:hover{ background:#2b2b47; }
.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--ink-soft); color:var(--ink); }
.btn-kakao{
  background:#FEE500;
  color:#3C1E1E;
  box-shadow:0 10px 24px -10px rgba(60,30,30,0.35);
}
.btn-kakao:hover{ background:#FCDA00; }
.btn-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.meta-row{
  margin-top:36px;
  font-size:12.5px;
  color:var(--ink-faint);
}

/* ---------- quiz screen ---------- */
.progress-wrap{ margin-bottom:26px; }
.progress-steps{
  display:flex;
  gap:5px;
  margin-bottom:10px;
}
.progress-steps .step{
  flex:1;
  height:5px;
  border-radius:100px;
  background:var(--line);
  overflow:hidden;
}
.progress-steps .step .fill{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:100px;
  transition:width .3s ease;
}
.progress-label{
  font-size:12.5px;
  color:var(--ink-faint);
  font-weight:600;
}
#screen-quiz{ justify-content:flex-start; }
.q-block{ transition:opacity .22s ease, transform .22s ease; }
.q-block.q-hidden{ opacity:0; transform:translateX(-14px); }
.q-text{
  font-size:21px;
  font-weight:800;
  line-height:1.4;
  margin:0 0 22px;
  letter-spacing:-0.01em;
}
.options{ display:flex; flex-direction:column; gap:10px; }
.option-btn{
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  cursor:pointer;
  transition:border-color .15s ease, transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.option-btn .opt-icon{
  width:36px; height:36px;
  border-radius:11px;
  background:var(--accent-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.option-btn .opt-chevron{
  margin-left:auto;
  color:var(--ink-faint);
  font-size:14px;
  flex-shrink:0;
}
.option-btn:hover{
  border-color:var(--accent);
  background:var(--accent-pale);
  transform:translateY(-2px);
  box-shadow:0 10px 20px -12px rgba(255,90,60,0.45);
}
.option-btn:active{ transform:scale(0.99) translateY(0); }
.back-link{
  margin-top:22px;
  font-size:13px;
  color:var(--ink-faint);
  text-decoration:none;
  align-self:flex-start;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  cursor:pointer;
}
.back-link:hover{ color:var(--ink-soft); }

/* ---------- result screen ---------- */
#screen-result{ text-align:center; padding-top:4px; }
.result-badge-wrap{ position:relative; margin:0 auto 18px; width:132px; height:132px; }
.confetti{ position:absolute; inset:-30px; pointer-events:none; overflow:visible; }
.confetti span{
  position:absolute;
  top:50%; left:50%;
  width:7px; height:7px;
  border-radius:2px;
  animation:confettiFall 1.1s ease-out forwards;
}
.result-badge{
  width:132px; height:132px;
  border-radius:50%;
  background:conic-gradient(from 200deg, var(--lime), var(--accent-pale), var(--lime));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.result-badge::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--card);
}
.result-badge span{ position:relative; font-size:52px; z-index:1; }
.shared-note{
  font-size:13px;
  color:var(--ink-faint);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:100px;
  padding:6px 14px;
  display:inline-block;
  margin-bottom:18px;
}
.result-name{
  font-size:30px;
  font-weight:800;
  color:var(--accent-dark);
  margin:4px 0 6px;
  letter-spacing:-0.01em;
}
.result-tagline{
  font-size:15px;
  font-weight:600;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.result-desc{
  font-size:14px;
  color:var(--ink-soft);
  max-width:40ch;
  margin:0 auto 22px;
  text-align:left;
}
.reason-card{
  background:linear-gradient(180deg, var(--card), #FBFBFF);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  text-align:left;
  margin-bottom:16px;
}
.reason-card .r-title{
  font-size:12px;
  font-weight:700;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin:0 0 12px;
}
.reason-card ul{ list-style:none; margin:0; padding:0; }
.reason-card li{
  font-size:14px;
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
}
.reason-card li .chk{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--lime);
  color:var(--lime-ink);
  font-size:11px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.tag-chip{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--card);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:100px;
}

.other-types{ margin-top:36px; text-align:left; }
.other-types .ot-title{
  font-size:13px;
  font-weight:700;
  color:var(--ink-faint);
  margin-bottom:12px;
  text-align:center;
}
.ot-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.ot-item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 6px;
  text-align:center;
}
.ot-item .ot-emoji{ font-size:20px; display:block; margin-bottom:4px; }
.ot-item .ot-name{ font-size:11px; color:var(--ink-faint); font-weight:600; }
.ot-item{ transition:border-color .15s ease, transform .12s ease; }
.ot-item:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ---------- hub page ---------- */
.hub-body{ min-height:100vh; position:relative; }
.hub-wrap{
  max-width:1400px;
  margin:0 auto;
  padding:48px 24px 64px;
  position:relative;
  z-index:1;
}
.hub-top{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}
.hub-hero{ text-align:center; margin-bottom:44px; }
.hub-hero .icon-cluster{ margin-bottom:24px; }
.hub-hero .icon-chip{ width:64px; height:64px; font-size:30px; border-radius:20px; }
.hub-hero h1{ font-size:40px; }
.hub-hero .lede{ font-size:16.5px; max-width:46ch; }
.hub-title-oneline{ font-size:46px; white-space:nowrap; }

@media (max-width:760px){
  .hub-title-oneline{ font-size:32px; white-space:normal; }
}
@media (max-width:520px){
  .hub-title-oneline{ font-size:24px; }
}
.selector-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.selector-card{
  flex:1 1 200px;
  max-width:260px;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:20px;
  padding:22px 20px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;
  overflow:hidden;
}
.selector-card.live:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px -16px rgba(27,27,47,0.3);
  border-color:var(--accent);
}
.selector-card .sc-icon{
  width:48px; height:48px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
}
.selector-card .sc-title{ font-size:16px; font-weight:800; margin:0; }
.selector-card .sc-desc{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.5; }
.selector-card .sc-meta{ font-size:11.5px; color:var(--ink-faint); font-weight:600; margin-top:auto; }
.selector-card.soon{ opacity:0.55; cursor:default; }
.selector-card.soon .sc-meta{ color:var(--accent-dark); }
.sc-badge{
  position:absolute;
  top:14px; right:14px;
  font-size:10.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:100px;
}
.sc-badge.new{ background:var(--lime); color:var(--lime-ink); }
.sc-badge.soon{ background:var(--line); color:var(--ink-faint); }
.sc-rec{
  align-self:flex-start;
  font-size:11px;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-pale);
  padding:3px 9px;
  border-radius:100px;
}

/* ---------- age gate (허브 온보딩) ---------- */
.age-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 auto;
}
.age-pill{
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:100px;
  padding:12px 22px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.age-pill:hover{
  border-color:var(--accent);
  background:var(--accent-pale);
  transform:translateY(-2px);
}
.agegate-card{
  background:var(--card);
  border-radius:28px;
  box-shadow:0 24px 60px -20px rgba(27,27,47,0.18), 0 4px 16px -8px rgba(27,27,47,0.06);
  padding:56px 40px;
  max-width:760px;
  margin:0 auto;
}
@media (max-width:820px){
  .age-pill{ padding:11px 18px; font-size:14px; }
}
.agegate-card .hub-hero{ margin-bottom:32px; }

/* ---------- popular widget (허브 "최근 많이 본 테스트") ---------- */
.popular-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 22px 20px;
  margin:0 auto 32px;
  max-width:760px;
  box-shadow:0 14px 30px -22px rgba(27,27,47,0.22);
}
.popular-card .popular-title{
  font-size:12px;
  font-weight:700;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin:0 0 14px;
  text-align:center;
}
.popular-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.popular-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg);
  border-radius:14px;
  padding:8px 16px 8px 8px;
  text-decoration:none;
  color:var(--ink);
  flex:1 1 220px;
  transition:transform .12s ease, background .15s ease;
}
.popular-item:hover{ background:var(--accent-pale); transform:translateY(-2px); }
.popular-item .p-rank{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--card);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--ink-soft);
  flex-shrink:0;
}
.popular-item .p-icon{
  width:34px; height:34px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  flex-shrink:0;
}
.popular-item .p-title{ font-size:13.5px; font-weight:700; }

@media (max-width:520px){
  .selector-grid{ grid-template-columns:1fr; }
  .hub-hero h1{ font-size:26px; }
}

/* ---------- ranked results (top1/2/3) ---------- */
.result-rank-label{
  font-size:12px;
  font-weight:700;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin:0 0 10px;
}
.rank-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.rank-item{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  text-align:left;
}
.rank-item .rank-num{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--bg);
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.rank-item .rank-emoji{ font-size:24px; flex-shrink:0; }
.rank-item .rank-name{ font-size:14.5px; font-weight:700; margin:0; }
.rank-item .rank-cat{ font-size:12px; color:var(--ink-faint); margin:0; }
a.rank-item{ color:inherit; text-decoration:none; transition:transform .12s ease, border-color .15s ease; }
a.rank-item:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ---------- ad slot (placeholder only) ---------- */
.ad-slot{
  width:100%;
  max-width:480px;
  margin:16px auto 0;
  padding:14px;
  border:1.5px dashed var(--line);
  border-radius:14px;
  text-align:center;
  color:var(--ink-faint);
  font-size:11.5px;
  font-weight:600;
}
.ad-slot.wide{ max-width:100%; }
.ad-slot .ad-label{ margin:0; letter-spacing:0.04em; }

@media (max-width:480px){
  h1{ font-size:25px; }
  .q-text{ font-size:19px; }
  .result-name{ font-size:27px; }
  .ot-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .page-center{ padding:0; }
  .app-card{ border-radius:0; min-height:100vh; max-width:100%; box-shadow:none; }
}


/* ===== 사이트 푸터 / 정책 페이지 (광고 승인 준비) ===== */
.site-footer{
  width:100%;
  max-width:480px;
  margin:20px auto 0;
  text-align:center;
  font-size:12px;
  line-height:1.8;
  color:var(--ink-faint);
}
.site-footer a{ color:var(--ink-soft); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.hub-wrap > .site-footer{ max-width:100%; padding:24px 0 8px; }
.legal{ padding:32px 28px 36px; }
.legal h1{ font-size:24px; margin:0 0 6px; color:var(--ink); }
.legal .legal-date{ font-size:12.5px; color:var(--ink-faint); margin:0 0 22px; }
.legal h2{ font-size:16px; margin:26px 0 8px; color:var(--ink); }
.legal p, .legal li{ font-size:14px; line-height:1.75; color:var(--ink-soft); }
.legal ul{ padding-left:20px; margin:8px 0; }
.legal a{ color:var(--accent-dark); }
.legal table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.legal th, .legal td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; color:var(--ink-soft); }
.legal th{ background:#F6F7FD; color:var(--ink); }
.legal .legal-home{ position:static; display:inline-block; margin:0 0 18px; }


/* ===== 테스트 소개 섹션 / 허브 소개 (콘텐츠 보강) ===== */
.about-test{
  width:100%;
  max-width:480px;
  margin:20px auto 0;
  padding:26px 24px 22px;
  background:var(--card);
  border-radius:22px;
  box-shadow:0 12px 32px -18px rgba(27,27,47,0.22);
  text-align:left;
}
.about-test h2{ font-size:16px; margin:22px 0 8px; color:var(--ink); line-height:1.4; }
.about-test h2:first-child{ margin-top:0; }
.about-test p, .about-test li{ font-size:13.5px; line-height:1.75; color:var(--ink-soft); }
.about-test p{ margin:0 0 8px; }
.about-test ul{ margin:6px 0 4px; padding-left:20px; }
.about-test li{ margin:3px 0; }
.about-test li strong{ color:var(--ink); }
.about-test a{ color:var(--accent-dark); text-decoration:none; }
.about-test a:hover{ text-decoration:underline; }
.about-test .about-links{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:2px; }
.hub-about{
  max-width:720px;
  margin:36px auto 0;
  padding:0 8px;
  text-align:left;
}
.hub-about h2{ font-size:17px; margin:20px 0 8px; color:var(--ink); }
.hub-about p{ font-size:14px; line-height:1.8; color:var(--ink-soft); margin:0 0 8px; }


/* ===== 허브 카테고리 / 검색 ===== */
.hub-filters{ width:100%; min-width:0; box-sizing:border-box; max-width:900px; margin:0 auto 18px; padding:0 4px; }
.hub-search{
  width:100%; box-sizing:border-box;
  padding:13px 18px; font-size:15px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink); outline:none;
  box-shadow:0 6px 18px -12px rgba(27,27,47,0.25);
}
.hub-search:focus{ border-color:var(--accent); }
.cat-chips{
  display:flex; gap:8px; margin-top:12px; min-width:0; max-width:100%;
  overflow-x:auto; padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cat-chips::-webkit-scrollbar{ display:none; }
.cat-chip{
  flex:0 0 auto; padding:9px 16px; font-size:13.5px; font-weight:700; font-family:inherit;
  color:var(--ink-soft); background:var(--card);
  border:1.5px solid var(--line); border-radius:999px; cursor:pointer;
  transition:all .15s ease;
}
.cat-chip:hover{ border-color:var(--accent); color:var(--accent-dark); }
.cat-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hub-count{ margin:4px 4px 0; font-size:12.5px; color:var(--ink-faint); text-align:right; }
.hub-empty{ text-align:center; color:var(--ink-soft); padding:40px 0; font-size:14px; }

/* 허브: 미니게임 배너 */
.games-promo{ display:flex; align-items:center; gap:12px; max-width:560px; margin:0 auto 22px; padding:14px 16px; border-radius:18px; background:var(--card); border:1.5px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .12s ease, border-color .15s ease; box-sizing:border-box; }
.games-promo:hover{ transform:translateY(-2px); border-color:var(--accent); }
.games-promo .gp-emoji{ font-size:30px; }
.games-promo .gp-text{ flex:1; font-size:12.5px; line-height:1.55; color:var(--ink-soft); min-width:0; }
.games-promo .gp-text b{ font-size:15px; color:var(--ink); }
.games-promo .gp-go{ font-size:20px; font-weight:800; color:var(--accent); }

/* ---------- 플레이픽 포털(메인) ---------- */
.portal{ max-width:960px; }
.portal .hub-hero h1{ font-size:44px; letter-spacing:-0.02em; }
.portal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 34px; }
.portal-card{ display:flex; flex-direction:column; gap:8px; padding:24px 20px; border-radius:24px; background:var(--card); border:1.5px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease; box-sizing:border-box; min-width:0; }
a.portal-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 40px -22px rgba(27,27,47,.35); }
.portal-card .pc-emoji{ font-size:38px; line-height:1; }
.portal-card .pc-title{ font-size:20px; margin:4px 0 0; }
.portal-card .pc-desc{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin:0; }
.portal-card .pc-meta{ font-size:12px; font-weight:700; color:var(--ink-faint); margin-top:auto; padding-top:6px; }
.portal-card .pc-go{ font-size:14px; font-weight:800; color:var(--accent-dark); }
.portal-card.soon{ opacity:.55; }
.portal-h{ font-size:17px; margin:0 0 12px; text-align:center; }
.portal-picks{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:34px; }
.portal-pick{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 8px; border-radius:18px; background:var(--card); border:1.5px solid var(--line); text-decoration:none; color:var(--ink); text-align:center; transition:transform .12s ease, border-color .15s ease; min-width:0; }
.portal-pick:hover{ transform:translateY(-2px); border-color:var(--accent); }
.portal-pick .pp-emoji{ font-size:26px; }
.portal-pick .pp-title{ font-size:12.5px; font-weight:700; line-height:1.4; }
@media (max-width:760px){
  .portal-grid{ grid-template-columns:1fr; }
  .portal-picks{ grid-template-columns:repeat(2,1fr); }
  .portal .hub-hero h1{ font-size:34px; }
}