/* LUKIK Popular Ranking v1.0.0 — page body only; Global Public Shell v0.2.1 remains canonical */
.lkp-ranking {
  --rank-blue:#0878f9;
  --rank-navy:#071a49;
  --rank-muted:#6b7890;
  --rank-line:#e5edf7;
  --rank-shadow:0 18px 48px rgba(31,70,130,.09);
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0,#fbfdff 42%,#fff 100%);
  color:var(--rank-navy);
}
.lkp-ranking *, .lkp-ranking *::before, .lkp-ranking *::after { box-sizing:border-box; }
.lkp-ranking a { text-decoration:none; }
.lkp-ranking__main { padding:0 0 58px; }
.lkp-ranking__breadcrumbs { display:flex; align-items:center; gap:9px; padding:28px 2px 6px; color:#8290a6; font-size:11px; font-weight:700; }
.lkp-ranking__breadcrumbs a { color:var(--rank-blue); }
.lkp-ranking__breadcrumbs i { font-size:8px; color:#b5c2d3; }

.lkp-ranking__hero { min-height:205px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(330px,.75fr); gap:52px; align-items:center; padding:24px 2px 22px; }
.lkp-ranking__eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:#62738d; font-size:12px; font-weight:800; }
.lkp-ranking__eyebrow i { color:var(--rank-blue); }
.lkp-ranking__hero h1 { margin:0; color:var(--rank-navy); font-size:48px; line-height:1.06; letter-spacing:-1.8px; font-weight:900; }
.lkp-ranking__hero p { max-width:760px; margin:16px 0 0; color:#6f7f98; font-size:14px; line-height:1.75; }
.lkp-ranking__hero-art { position:relative; height:180px; }
.lkp-ranking__chart-card { position:absolute; right:54px; top:13px; width:210px; height:145px; padding:22px 22px 18px; border:1px solid #e5eef8; border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(39,84,150,.09); color:#4e8eff; transform:rotate(1deg); }
.lkp-ranking__chart-card > span { display:block; width:72px; height:9px; margin-bottom:14px; border-radius:999px; background:#e8f0fb; }
.lkp-ranking__chart-card svg { width:100%; height:84px; }
.lkp-ranking__mini-card { position:absolute; left:4px; top:48px; width:98px; height:104px; padding:15px; border:1px solid #e7eef7; border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 15px 34px rgba(39,84,150,.07); }
.lkp-ranking__donut { display:block; width:39px; height:39px; margin-bottom:10px; border-radius:50%; background:conic-gradient(#7ed5ff 0 35%,#ffd3dc 35% 60%,#ffe3a9 60% 79%,#e8eff8 79%); position:relative; }
.lkp-ranking__donut::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.lkp-ranking__mini-card i { display:block; width:48px; height:5px; margin:5px 0; border-radius:999px; background:#edf2f8; }
.lkp-ranking__medal { position:absolute; right:10px; bottom:4px; width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#f3a91f; background:linear-gradient(145deg,#fff7d9,#fff); box-shadow:0 13px 28px rgba(214,153,35,.15); font-size:30px; }
.lkp-ranking__spark { position:absolute; color:#86b8ff; font-size:20px; font-style:normal; }
.lkp-ranking__spark--one { right:22px; top:28px; }
.lkp-ranking__spark--two { right:0; top:55px; color:#ffc85d; font-size:14px; }

.lkp-ranking__stats { display:grid; grid-template-columns:repeat(3,1fr); margin:8px 0 56px; border:1px solid var(--rank-line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(31,70,130,.055); overflow:hidden; }
.lkp-ranking__stat { min-height:84px; display:flex; align-items:center; gap:14px; padding:16px 24px; position:relative; }
.lkp-ranking__stat + .lkp-ranking__stat::before { content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:var(--rank-line); }
.lkp-ranking__stat-icon { flex:0 0 42px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:13px; font-size:17px; }
.lkp-ranking__stat-icon.is-blue { color:#0878f9; background:#eaf4ff; }
.lkp-ranking__stat-icon.is-green { color:#24ae68; background:#eaf9f1; }
.lkp-ranking__stat-icon.is-purple { color:#8c59e9; background:#f3edff; }
.lkp-ranking__stat > span:last-child { display:flex; flex-direction:column; gap:4px; }
.lkp-ranking__stat small { color:#75849b; font-size:10px; font-weight:700; }
.lkp-ranking__stat strong { color:var(--rank-navy); font-size:14px; font-weight:850; }
.lkp-ranking__stat strong em { color:#7a879b; font-size:10px; font-style:normal; font-weight:650; }

.lkp-ranking__podium { display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:22px; align-items:end; margin:0 24px 28px; }
.lkp-ranking__podium--2 { grid-template-columns:1fr 1fr; max-width:900px; margin-left:auto; margin-right:auto; }
.lkp-ranking__podium--1 { grid-template-columns:minmax(0,520px); justify-content:center; }
.lkp-ranking__podium-card { position:relative; min-height:212px; display:flex; flex-direction:column; padding:43px 28px 24px; border:1px solid #dce8f6; border-radius:22px; background:linear-gradient(145deg,#fff,#fbfdff); box-shadow:0 13px 34px rgba(31,70,130,.055); }
.lkp-ranking__podium-card.is-rank-1 { min-height:232px; border-color:rgba(236,19,207,.18); background:linear-gradient(145deg,#fff,#fffafd); box-shadow:0 18px 42px rgba(189,49,170,.08); }
.lkp-ranking__rank-medal { position:absolute; top:-28px; left:50%; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f4f7fb; box-shadow:0 7px 20px rgba(31,70,130,.12); border:5px solid #fff; }
.lkp-ranking__rank-medal::before,.lkp-ranking__rank-medal::after { content:""; position:absolute; width:18px; height:28px; border:2px solid currentColor; border-width:0 2px; border-radius:50%; opacity:.45; }
.lkp-ranking__rank-medal::before { left:-16px; transform:rotate(-24deg); }
.lkp-ranking__rank-medal::after { right:-16px; transform:rotate(24deg); }
.lkp-ranking__rank-medal span { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#66758e; background:linear-gradient(145deg,#eef2f8,#dfe7f1); font-size:19px; font-weight:900; }
.is-rank-1 .lkp-ranking__rank-medal span { color:#a96800; background:linear-gradient(145deg,#fff0a8,#f8b62c); }
.is-rank-2 .lkp-ranking__rank-medal span { color:#5e6c83; background:linear-gradient(145deg,#f8fbff,#d8e1ec); }
.is-rank-3 .lkp-ranking__rank-medal span { color:#9b5428; background:linear-gradient(145deg,#ffd4b7,#d98952); }
.lkp-ranking__podium-body { display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:center; }
.lkp-ranking__calculator-icon { width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:19px; color:var(--accent); background:rgba(var(--accent-rgb),.11); font-size:31px; }
.lkp-ranking__calculator-copy h2 { margin:0 0 7px; color:var(--rank-navy); font-size:16px; line-height:1.3; font-weight:850; }
.lkp-ranking__calculator-copy p { margin:0; min-height:32px; color:#738198; font-size:11px; line-height:1.5; }
.lkp-ranking__calculator-copy small { display:block; margin-top:8px; color:#8491a5; font-size:10px; font-weight:700; }
.lkp-ranking__calculator-copy small i { margin-right:4px; color:var(--accent); }
.lkp-ranking__open { align-self:flex-start; margin-top:auto; padding-top:19px; color:var(--rank-blue); font-size:11px; font-weight:850; }
.is-rank-1 .lkp-ranking__open { align-self:center; min-width:190px; padding:12px 17px; border-radius:10px; color:#fff; background:linear-gradient(90deg,#086ff0,#087ffc); text-align:center; box-shadow:0 9px 20px rgba(8,120,249,.19); }
.lkp-ranking__open i { margin-left:8px; font-size:10px; }

.lkp-ranking__toolbar { display:flex; align-items:center; gap:16px; justify-content:space-between; margin:36px 0 14px; padding:12px 14px; border:1px solid var(--rank-line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(31,70,130,.04); }
.lkp-ranking__filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lkp-ranking__filters a { min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #e2eaf4; border-radius:999px; color:#5e6d84; background:#fff; font-size:10px; font-weight:800; transition:.2s ease; }
.lkp-ranking__filters a i { color:var(--filter-color); }
.lkp-ranking__filters a:hover { border-color:#bfd5ef; color:var(--rank-blue); }
.lkp-ranking__filters a.is-active { color:#fff; border-color:var(--rank-blue); background:var(--rank-blue); box-shadow:0 7px 16px rgba(8,120,249,.18); }
.lkp-ranking__filters a.is-active i { color:#fff; }
.lkp-ranking__sort { flex:0 0 auto; min-height:36px; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid #e2eaf4; border-radius:999px; color:#6b7890; background:#fbfdff; font-size:10px; }
.lkp-ranking__sort > i { color:var(--rank-blue); }
.lkp-ranking__sort strong { color:#35445f; }

.lkp-ranking__list { border:1px solid var(--rank-line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(31,70,130,.045); }
.lkp-ranking__row { min-height:86px; display:grid; grid-template-columns:42px 50px minmax(220px,1.4fr) minmax(250px,.8fr) 40px; gap:15px; align-items:center; padding:12px 18px; }
.lkp-ranking__row + .lkp-ranking__row { border-top:1px solid #edf2f7; }
.lkp-ranking__row-rank { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid #e3eaf3; border-radius:10px; color:#1c2c54; background:#fff; font-size:13px; font-weight:900; }
.lkp-ranking__row-icon { width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:13px; color:var(--accent); background:rgba(var(--accent-rgb),.11); font-size:19px; }
.lkp-ranking__row-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.lkp-ranking__row-copy strong { color:var(--rank-navy); font-size:13px; font-weight:850; }
.lkp-ranking__row-copy small { color:#7a879b; font-size:10px; line-height:1.45; }
.lkp-ranking__row-popularity { display:flex; flex-direction:column; gap:9px; }
.lkp-ranking__row-popularity > span { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lkp-ranking__row-popularity small { color:#8592a5; font-size:9px; }
.lkp-ranking__row-popularity strong { color:#27395f; font-size:10px; font-weight:850; }
.lkp-ranking__row-popularity strong i { color:#ff7b23; margin-right:5px; }
.lkp-ranking__bar { width:100%; height:4px; display:block; overflow:hidden; border-radius:999px; background:#eaf0f7; }
.lkp-ranking__bar b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#0878f9,#3d9cff); }
.lkp-ranking__row-open { width:34px; height:34px; display:flex; align-items:center; justify-content:center; justify-self:end; border:1px solid #e3ebf5; border-radius:50%; color:var(--rank-blue); background:#fff; font-size:10px; transition:.2s ease; }
.lkp-ranking__row-open:hover { transform:translateX(2px); border-color:#bad5f5; background:#f6faff; }
.lkp-ranking__result-note { margin:11px 4px 0; color:#8794a7; font-size:10px; }

.lkp-ranking__empty { padding:58px 24px; border:1px solid var(--rank-line); border-radius:20px; text-align:center; background:#fff; }
.lkp-ranking__empty > span { width:54px; height:54px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; border-radius:16px; color:var(--rank-blue); background:#eaf4ff; font-size:22px; }
.lkp-ranking__empty h2 { margin:0; font-size:17px; font-weight:850; }
.lkp-ranking__empty p { margin:8px auto 15px; max-width:520px; color:#76849a; font-size:11px; }
.lkp-ranking__empty a { color:var(--rank-blue); font-size:11px; font-weight:850; }

.lkp-ranking__info { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) 210px; gap:18px; align-items:center; min-height:104px; margin-top:22px; padding:20px 24px; overflow:hidden; border:1px solid #d9e9fb; border-radius:18px; background:linear-gradient(100deg,#f5faff,#eef7ff); }
.lkp-ranking__info-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:var(--rank-blue); font-size:15px; box-shadow:0 8px 18px rgba(8,120,249,.2); }
.lkp-ranking__info h2 { margin:0 0 5px; color:var(--rank-navy); font-size:13px; font-weight:900; }
.lkp-ranking__info p { margin:0; max-width:860px; color:#62738d; font-size:10px; line-height:1.55; }
.lkp-ranking__info small { display:block; margin-top:5px; color:#8592a5; font-size:9px; }
.lkp-ranking__info-art { align-self:end; height:66px; display:flex; align-items:flex-end; justify-content:center; gap:8px; opacity:.55; }
.lkp-ranking__info-art i { width:15px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#8cc2ff,#ddecff); }
.lkp-ranking__info-art i:nth-child(1){height:18px}.lkp-ranking__info-art i:nth-child(2){height:30px}.lkp-ranking__info-art i:nth-child(3){height:44px}.lkp-ranking__info-art i:nth-child(4){height:54px}.lkp-ranking__info-art i:nth-child(5){height:64px}

.lkp-ranking__cta { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr) auto 180px; gap:20px; align-items:center; min-height:124px; margin-top:22px; padding:22px 24px; overflow:hidden; border:1px solid #d8e7fb; border-radius:20px; background:linear-gradient(110deg,#f8fbff,#eef6ff); }
.lkp-ranking__cta-icon { width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:17px; color:#fff; background:linear-gradient(145deg,#568ff9,#2d72ed); font-size:22px; box-shadow:0 10px 24px rgba(42,113,235,.2); }
.lkp-ranking__cta h2 { margin:0 0 7px; color:var(--rank-navy); font-size:18px; font-weight:900; }
.lkp-ranking__cta p { margin:0; color:#75839a; font-size:11px; line-height:1.55; }
.lkp-ranking__cta > a { z-index:2; min-width:190px; padding:13px 18px; border-radius:11px; color:#fff; background:linear-gradient(90deg,#086ff0,#087ffc); text-align:center; font-size:11px; font-weight:850; box-shadow:0 9px 20px rgba(8,120,249,.17); }
.lkp-ranking__cta > a i { margin-left:8px; }
.lkp-ranking__cta-art { display:flex; justify-content:center; align-items:center; gap:8px; opacity:.42; }
.lkp-ranking__cta-art i { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#fff; color:#5ba5ff; box-shadow:0 9px 20px rgba(31,70,130,.08); transform:rotate(-8deg); }
.lkp-ranking__cta-art i:nth-child(2){color:#7c8eff;transform:translateY(-9px) rotate(7deg)}.lkp-ranking__cta-art i:nth-child(3){color:#52d89b;transform:rotate(12deg)}

@media (max-width:1100px) {
  .lkp-ranking__hero { grid-template-columns:1fr 330px; gap:28px; }
  .lkp-ranking__hero h1 { font-size:42px; }
  .lkp-ranking__podium { margin-left:0; margin-right:0; gap:14px; }
  .lkp-ranking__podium-card { padding-left:20px; padding-right:20px; }
  .lkp-ranking__podium-body { grid-template-columns:58px 1fr; gap:13px; }
  .lkp-ranking__calculator-icon { width:58px; height:58px; font-size:25px; }
  .lkp-ranking__row { grid-template-columns:38px 48px minmax(190px,1.25fr) minmax(220px,.85fr) 36px; gap:12px; padding-left:14px; padding-right:14px; }
  .lkp-ranking__cta { grid-template-columns:58px minmax(0,1fr) auto; }
  .lkp-ranking__cta-art { display:none; }
}

@media (max-width:860px) {
  .lkp-ranking__main { padding-bottom:42px; }
  .lkp-ranking__breadcrumbs { padding-top:20px; }
  .lkp-ranking__hero { grid-template-columns:1fr; min-height:0; padding-top:18px; text-align:center; }
  .lkp-ranking__hero-copy { max-width:720px; margin:0 auto; }
  .lkp-ranking__hero h1 { font-size:39px; }
  .lkp-ranking__hero p { margin-left:auto; margin-right:auto; }
  .lkp-ranking__hero-art { width:min(390px,100%); margin:0 auto; height:160px; }
  .lkp-ranking__stats { grid-template-columns:1fr; margin-bottom:48px; }
  .lkp-ranking__stat + .lkp-ranking__stat::before { top:0; left:24px; right:24px; width:auto; height:1px; }
  .lkp-ranking__podium,.lkp-ranking__podium--2 { grid-template-columns:1fr; max-width:640px; margin:0 auto 28px; gap:45px; }
  .lkp-ranking__podium-card,.lkp-ranking__podium-card.is-rank-1 { min-height:0; }
  .lkp-ranking__podium-card.is-rank-1 { order:-1; }
  .lkp-ranking__toolbar { align-items:flex-start; flex-direction:column; }
  .lkp-ranking__sort { align-self:flex-end; }
  .lkp-ranking__row { grid-template-columns:38px 48px minmax(0,1fr) 36px; }
  .lkp-ranking__row-popularity { grid-column:3 / 4; width:100%; }
  .lkp-ranking__row-open { grid-column:4; grid-row:1 / span 2; }
  .lkp-ranking__info { grid-template-columns:44px 1fr; }
  .lkp-ranking__info-art { display:none; }
  .lkp-ranking__cta { grid-template-columns:54px 1fr; }
  .lkp-ranking__cta > a { grid-column:1 / -1; justify-self:stretch; }
}

@media (max-width:560px) {
  .lkp-ranking__breadcrumbs { padding-top:16px; font-size:10px; }
  .lkp-ranking__hero { padding-top:15px; gap:16px; }
  .lkp-ranking__hero h1 { font-size:34px; letter-spacing:-1.2px; }
  .lkp-ranking__hero p { font-size:12px; line-height:1.65; }
  .lkp-ranking__hero-art { height:135px; transform:scale(.88); transform-origin:center top; margin-bottom:-8px; }
  .lkp-ranking__stats { margin-top:0; margin-bottom:42px; }
  .lkp-ranking__stat { min-height:72px; padding:12px 16px; }
  .lkp-ranking__stat strong { font-size:12px; }
  .lkp-ranking__podium,.lkp-ranking__podium--2 { gap:42px; }
  .lkp-ranking__podium-card { padding:39px 18px 20px; border-radius:18px; }
  .lkp-ranking__podium-body { grid-template-columns:52px 1fr; }
  .lkp-ranking__calculator-icon { width:52px; height:52px; border-radius:15px; font-size:22px; }
  .lkp-ranking__calculator-copy h2 { font-size:14px; }
  .lkp-ranking__calculator-copy p { min-height:0; font-size:10px; }
  .is-rank-1 .lkp-ranking__open { min-width:0; width:100%; }
  .lkp-ranking__toolbar { margin-top:28px; padding:10px; }
  .lkp-ranking__filters { width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
  .lkp-ranking__filters::-webkit-scrollbar { display:none; }
  .lkp-ranking__filters a { flex:0 0 auto; }
  .lkp-ranking__sort { align-self:stretch; justify-content:center; }
  .lkp-ranking__list { border-radius:16px; }
  .lkp-ranking__row { grid-template-columns:31px 42px minmax(0,1fr) 32px; gap:9px; padding:11px 10px; }
  .lkp-ranking__row-rank { width:29px; height:29px; font-size:11px; }
  .lkp-ranking__row-icon { width:40px; height:40px; font-size:17px; }
  .lkp-ranking__row-copy strong { font-size:11px; }
  .lkp-ranking__row-copy small { font-size:9px; }
  .lkp-ranking__row-popularity { gap:6px; }
  .lkp-ranking__row-popularity > span { align-items:flex-start; flex-direction:column; gap:2px; }
  .lkp-ranking__row-open { width:30px; height:30px; }
  .lkp-ranking__info { grid-template-columns:36px 1fr; gap:11px; padding:16px 14px; }
  .lkp-ranking__info-icon { width:34px; height:34px; font-size:12px; }
  .lkp-ranking__cta { grid-template-columns:44px 1fr; gap:12px; padding:18px 15px; }
  .lkp-ranking__cta-icon { width:44px; height:44px; border-radius:14px; font-size:18px; }
  .lkp-ranking__cta h2 { font-size:15px; }
  .lkp-ranking__cta p { font-size:10px; }
}

@media (min-width:861px) {
  .lkp-ranking__podium--3 .is-rank-1 { grid-column:2; grid-row:1; }
  .lkp-ranking__podium--3 .is-rank-2 { grid-column:1; grid-row:1; }
  .lkp-ranking__podium--3 .is-rank-3 { grid-column:3; grid-row:1; }
}