:root{
  --card:#ffffff;
  --surface:#f6f8fb;
  --text:#1f2937;
  --muted:#64748b;
  --muted2:#94a3b8;
  --line:#dbe3ec;
  --line2:#e2e8f0;
  --brand:#10b981;
  --brand-dark:#059669;
  --navy:#374151;
  --navy-soft:#4b5563;
  --shadow:0 14px 30px rgba(15,23,42,0.05);
  --shadow2:0 12px 24px rgba(15,23,42,0.06);
  --radius:20px;
}

.main-content{
  max-width:960px;
  background:var(--card);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 40px;
  overflow:visible;
}

/* ===== 전체 래핑 ===== */
.home-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding: 0;
}

/* ===== 상단 검색 ===== */
.search-section{
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  border:none;
  box-sizing:border-box;
  min-width:0;
}

.search-title{
  font-size:36px;
  color:var(--text);
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:-0.9px;
  text-align:center;
  font-family:'FCOVR', 'IBM Plex Sans KR', sans-serif;
}

.search-desc{
  font-size:14px;
  color:var(--muted);
  margin:0 0 18px;
  text-align:center;
  line-height:1.5;
  font-weight:600;
}

.input-area{
  width:100%;
  max-width: 620px;
  position:relative;
  min-width:0;
}
.search-section form{
  width:100%;
  max-width:620px;
}

/* 검색바: 넓게 + 슬림 + 버튼 정렬 */
.input-area input[type="text"]{
  width:100%;
  font-size:18px;
  border-radius:16px;
  border:1.5px solid var(--line);
  background:#ffffff;
  height:56px;
  padding:0 112px 0 18px;
  line-height:56px;
  box-sizing:border-box;
  outline:none;
  font-family:inherit;
  font-weight:800;
  color:var(--text);
  box-shadow:none;
  transition:none;
}
.input-area input[type="text"]::placeholder{ color:#90a09a; font-weight:700; }
.input-area input[type="text"]:focus{
  border-color:#4b5563;
  background:#fff;
  box-shadow:none;
}

.search-icon-btn{
  position:absolute;
  right:6px;
  top:6px;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid #263640;
  background:#263640;
  background-image:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:none;
}
.search-icon-btn i{ font-size:20px; }

.home-filter-btn{
  position:absolute;
  right:56px;
  top:6px;
  width:44px;
  height:44px;
  border:1px solid #263640;
  border-radius:10px;
  background:#263640;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.home-filter-btn.is-active{
  border-color:var(--brand-dark);
  background:var(--brand-dark);
}
.home-filter-btn i{ font-size:20px; }
.home-filter-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  background:#10b981;
  color:#fff;
  font-size:9px;
  font-weight:950;
  line-height:14px;
  box-sizing:border-box;
  display:none;
}
.home-filter-count.is-visible{ display:block; }

.home-filter-panel{
  position:absolute;
  z-index:120;
  top:calc(100% + 8px);
  right:0;
  width:min(520px, 100%);
  max-height:min(72vh, 620px);
  overflow-y:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.16);
  box-sizing:border-box;
  display:none;
}
.home-filter-panel.is-open{ display:block; }
.home-filter-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.home-filter-title{
  color:var(--text);
  font-size:15px;
  font-weight:950;
}
.home-filter-close{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:8px;
  background:#f1f5f9;
  color:#475569;
  cursor:pointer;
}
.home-filter-section{ margin-top:14px; }
.home-filter-label{
  display:block;
  margin-bottom:7px;
  color:#475569;
  font-size:12px;
  font-weight:900;
}
.home-ovr-range{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:8px;
}
.home-filter-control,
.home-class-search{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:800;
  box-sizing:border-box;
  outline:none;
}
.home-filter-control:focus,
.home-class-search:focus{
  border-color:#4b5563;
  box-shadow:none;
}
.home-position-groups{ display:grid; gap:9px; }
.home-position-group{
  padding:9px;
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#f8fafc;
}
.home-position-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.home-position-group-title{
  color:#334155;
  font-size:12px;
  font-weight:950;
}
.home-position-all{
  padding:4px 8px;
  border:1px solid #a7f3d0;
  border-radius:999px;
  background:#fff;
  color:#047857;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.home-position-all.is-selected{ background:#d1fae5; border-color:#34d399; }
.home-position-options{ display:flex; flex-wrap:wrap; gap:6px; }
.home-filter-check{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.home-filter-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.home-filter-check span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#475569;
  font-size:11px;
  font-weight:900;
}
.home-filter-check input:checked + span{
  border-color:#10b981;
  background:#ecfdf5;
  color:#047857;
}
.home-filter-check input:focus-visible + span{ outline:3px solid rgba(16,185,129,.18); }
.home-class-box{
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#f8fafc;
}
.home-class-box summary{
  padding:10px 11px;
  color:#334155;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.home-class-box-body{ padding:0 9px 9px; }
.home-class-search{ height:36px; background:#fff; }
.home-class-options{
  max-height:170px;
  margin-top:7px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
.home-class-option{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px;
  border-radius:7px;
  color:#334155;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}
.home-class-option input{ flex:0 0 auto; accent-color:var(--brand); }
.home-class-option span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-filter-actions{
  position:sticky;
  bottom:-16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:16px -16px -16px;
  padding:12px 16px;
  border-top:1px solid #e2e8f0;
  background:#fff;
}
.home-filter-reset,
.home-filter-apply{
  min-height:38px;
  padding:0 14px;
  border-radius:9px;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.home-filter-reset{ border:1px solid #cbd5e1; background:#fff; color:#475569; }
.home-filter-apply{ border:1px solid var(--brand-dark); background:var(--brand-dark); color:#fff; }
.home-filter-hint{
  margin-top:9px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  line-height:1.45;
}
.home-filter-detail-link{
  margin-top:10px;
  text-align:right;
}
.home-filter-detail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:36px;
  padding:6px 0;
  box-sizing:border-box;
  border:none;
  background:transparent;
  color:#087f5b;
  font:inherit;
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  white-space:normal;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:rgba(8,127,91,.35);
  transition:color .12s ease;
}
.home-filter-detail-btn:hover{
  color:#065a41;
  text-decoration-color:rgba(6,90,65,.6);
}
html[data-theme="dark"] .home-filter-detail-btn{ color:#9ee3c4; }
html[data-theme="dark"] .home-filter-detail-btn:hover{ color:#c8f4df; }

/* ===== 자동완성 ===== */
.autocomplete-box{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  background:#fff;
  border:1px solid #ecf0f1;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  max-height:240px;
  overflow-y:auto;
  z-index:99;
  display:none;
}
.autocomplete-item{
  padding:12px 16px;
  font-size:15px;
  color:#32424c;
  border-bottom:1px solid #f1f5f9;
  cursor:pointer;
  transition:.12s;
  font-weight:800;
}
.autocomplete-item:last-child{ border-bottom:none; }
.autocomplete-item strong{ color:var(--brand-dark); }

/* ===== 최근 검색어: 중앙정렬 + PC 5개 / 모바일 3개 ===== */
.recent-row{
  width:100%;
  max-width: 800px;
  margin:12px 0 0;
  display:none;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.recent-pill{
  padding:7px 12px;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:13px;
  cursor:pointer;
  border:1px solid var(--line);
  font-weight:900;
  transition:.12s;
  user-select:none;
  max-width:100%;
}

/* ===== 최신 리뷰 · 선수 장단점 ===== */
.latest-review-section{
  width:100%;
  max-width:800px;
  margin-top:20px;
  min-width:0;
}
.latest-review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.latest-review-title{
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:950;
  letter-spacing:-.3px;
}
.latest-review-more{
  color:var(--brand-dark);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.latest-review-list{
  display:grid;
  gap:9px;
}
.latest-review-item{
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) auto;
  gap:13px;
  align-items:center;
  min-width:0;
  padding:11px 13px 11px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8fafc;
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.latest-review-art{
  width:54px;
  height:70px;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background-color:#e9eef5;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.latest-review-art img{
  position:absolute;
  left:50%;
  bottom:0;
  width:94%;
  height:94%;
  transform:translateX(-50%);
  object-fit:contain;
}
.latest-review-main{ min-width:0; }
.latest-review-topline{
  display:flex;
  align-items:center;
  gap:6px 9px;
  min-width:0;
  flex-wrap:wrap;
}
.latest-review-kind{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 7px;
  border-radius:999px;
  background:#dcfce7;
  color:#047857;
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
}
.latest-review-kind.summary{
  background:#e0f2fe;
  color:#0369a1;
}
.latest-review-name{
  color:var(--brand-dark);
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
}
.latest-review-post-title{
  margin-top:4px;
  overflow:hidden;
  color:#172033;
  font-size:14px;
  font-weight:950;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.latest-review-excerpt{
  margin-top:4px;
  overflow:hidden;
  color:#64748b;
  font-size:11px;
  font-weight:650;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.latest-review-side{
  display:grid;
  justify-items:end;
  gap:5px;
  color:#64748b;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
.latest-review-score{
  color:#d97706;
  font-size:13px;
  font-weight:950;
}
.latest-review-author{
  max-width:92px;
  overflow:hidden;
  color:#475569;
  font-weight:900;
  text-overflow:ellipsis;
}
.latest-review-empty{
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

/* ===== 홈 프로모션 스와이프 배너 ===== */
.home-promo-shell{
  position:relative;
  width:100%;
  max-width:800px;
  margin-top:16px;
}
.home-promo-rail{
  width:100%;
  max-width:800px;
  padding:0 0 4px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.home-promo-rail::-webkit-scrollbar{ display:none; }
.home-promo-nav{
  position:absolute;
  top:50%;
  z-index:4;
  width:32px;
  height:32px;
  margin-top:-16px;
  border:1px solid #34d399;
  border-radius:50%;
  background:#ffffff;
  color:#047857;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:15px;
  transition:border-color .15s ease, opacity .15s ease;
}
.home-promo-nav:disabled{ opacity:0; pointer-events:none; }
.home-promo-prev{ left:8px; }
.home-promo-next{ right:8px; }
.prime-home-banner{
  position:relative;
  isolation:isolate;
  flex:0 0 100%;
  width:auto;
  max-width:none;
  min-height:106px;
  margin:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 135px;
  align-items:center;
  border:1px solid rgba(128,236,224,.34);
  border-radius:17px;
  background:#1a1940;
  box-shadow:none;
  color:#fff;
  text-decoration:none;
  box-sizing:border-box;
  scroll-snap-align:start;
  transition:transform .18s ease, border-color .18s ease;
}
.prime-home-banner::before{
  position:absolute;
  inset:0;
  z-index:-1;
  content:"";
}
.prime-home-content{
  min-width:0;
  padding:14px 8px 14px 18px;
}
.prime-home-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#82eee3;
  font-size:9px;
  font-weight:950;
  letter-spacing:.11em;
}
.prime-home-kicker::before{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#69f4df;
  box-shadow:none;
  content:"";
}
.prime-home-title{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.45px;
  line-height:1.25;
}
.prime-home-desc{
  display:block;
  margin-top:5px;
  color:#c7cbe3;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
}
.prime-home-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  margin-top:7px;
  padding:0 9px;
  border:1px solid rgba(164,255,241,.25);
  border-radius:999px;
  background:rgba(113,242,224,.11);
  color:#d9fff9;
  font-size:9px;
  font-weight:900;
}
.prime-home-visual{
  position:relative;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.prime-home-visual::before{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:50%;
  content:"";
}
.prime-home-logo{
  position:relative;
  width:92px;
  height:auto;
  margin-top:3px;
  filter:none;
  transform:rotate(3deg);
  transition:transform .2s ease;
}
.pack-home-banner{background:linear-gradient(110deg,rgba(19,13,44,.88),rgba(53,23,87,.4)),url('/static/pack-opener/images/background.png') center/cover;border-color:#a886df}
.pack-home-banner .prime-home-kicker{color:#e3caff;letter-spacing:0}
.pack-home-banner .prime-home-kicker::before{display:none}
.pack-home-banner .prime-home-title{margin-top:5px}
.pack-home-graphic{height:92px;width:auto;object-fit:contain;transform:rotate(8deg)}
.pack-home-moon{position:absolute;left:12px;bottom:10px;width:42px;height:44px;background:url('/static/pack-opener/images/kkaebi/moon-token.png') center/contain no-repeat;filter:drop-shadow(0 0 8px #bc8aff44)}
@media(max-width:740px){.pack-home-banner .prime-home-kicker{font-size:9px}.pack-home-banner .pack-home-graphic{height:78px}.pack-home-moon{left:0;bottom:7px;width:31px;height:33px}}
.career-home-banner{
  border-color:#86efac;
  background:#ecfdf5;
  color:#16352c;
}
.career-home-banner::before{
  background:none;
}
.career-home-banner .prime-home-kicker{ color:#047857; }
.career-home-banner .prime-home-kicker::before{ background:#10b981; }
.career-home-banner .prime-home-title{ margin-top:0; color:#16352c; }
.career-home-banner .prime-home-desc{ color:#4b635b; }
.career-home-banner .prime-home-cta{
  border-color:#6ee7b7;
  background:#ffffff;
  color:#047857;
}
.career-home-visual::before{
  width:90px;
  height:90px;
  border:1px solid #a7f3d0;
  background:#ffffff;
  filter:none;
}
.career-home-graphic{
  position:relative;
  width:105px;
  max-width:88%;
  height:auto;
  display:block;
}
.power-ranking-home-banner{
  border-color:#8db7ff;
  background:#163b70;
}
.power-ranking-home-banner::before{
  background:none;
}
.power-ranking-home-banner .prime-home-kicker{ color:#bfdbfe; }
.power-ranking-home-banner .prime-home-kicker::before{ background:#93c5fd; }
.power-ranking-home-banner .prime-home-cta{
  border-color:rgba(191,219,254,.4);
  background:rgba(15,45,85,.28);
  color:#eff6ff;
}
.power-ranking-home-visual::before{
  width:94px;
  height:94px;
}
.power-ranking-home-board{
  position:relative;
  display:grid;
  gap:5px;
  width:74px;
  padding:9px 8px;
  border:1px solid rgba(219,234,254,.45);
  border-radius:8px;
  background:rgba(10,31,62,.36);
  transform:rotate(3deg);
}
.power-ranking-home-board span{
  display:grid;
  grid-template-columns:14px 1fr;
  align-items:center;
  gap:5px;
  height:8px;
}
.power-ranking-home-board b{
  color:#dbeafe;
  font-size:8px;
  font-weight:950;
  line-height:1;
}
.power-ranking-home-board i{
  display:block;
  height:5px;
  border-radius:999px;
  background:#93c5fd;
}
.power-ranking-home-board span:nth-child(2) i{ width:76%; background:#bfdbfe; }
.power-ranking-home-board span:nth-child(3) i{ width:55%; background:#dbeafe; }

/* ===== 추천 툴 ===== */
.tools-wrap{
  width:100%;
  max-width: 800px;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.tools-title{
  font-size:16px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.2px;
  visibility:hidden;
}

.quick-links{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  width:100%;
  min-width:0;
}
.quick-card{
  position:relative;
  padding:10px 8px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  background:#ffffff;
  box-shadow:none;
  border:1px solid #34d399;
  transition:border-color .18s ease, transform .18s ease;
  min-height:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  text-align:center;
}
.tool-glyph{
  width:36px;
  height:36px;
  border:1px solid #a7f3d0;
  border-radius:10px;
  background:#ffffff;
  color:var(--brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:none;
}
.tool-name{
  font-size:15px;
  font-weight:900;
  letter-spacing:-0.2px;
  line-height:1.1;
}
.tool-coupon,
.tool-traits,
.tool-times,
.tool-community,
.tool-squad{
  background:#ffffff;
  color:var(--text);
  border-color:#34d399;
  box-shadow:none;
}
.tool-coupon .tool-glyph,
.tool-traits .tool-glyph,
.tool-times .tool-glyph,
.tool-community .tool-glyph,
.tool-squad .tool-glyph{
  border-color:#a7f3d0;
  background:#ffffff;
  color:var(--brand-dark);
}
@media (min-width: 641px){
  .quick-links{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .quick-card{
    height:auto;
    min-height:88px;
    padding:10px 8px;
    border-radius:12px;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    text-align:center;
  }
  .tool-glyph{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:20px;
  }
  .tool-name{
    font-size:13px;
    letter-spacing:-0.4px;
    white-space:nowrap;
  }
}
@media (max-width: 640px){
  .tools-title{ font-size:7px; line-height:1; }
  .quick-links{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .quick-card{
    min-height:0;
    height:44px;
    padding:0 12px;
    border-radius:10px;
    box-shadow:none;
    flex-direction:row;
    justify-content:flex-start;
    gap:9px;
    text-align:left;
  }
  .tool-glyph{
    width:28px;
    height:28px;
    border-radius:8px;
    font-size:15px;
    flex:0 0 auto;
  }
  .tool-name{
    font-size:14px;
    margin-top:0;
    flex:1;
    white-space:nowrap;
  }
  .latest-review-section{ margin-top:16px; }
  .latest-review-title{ font-size:15px; }
  .latest-review-item{
    grid-template-columns:46px minmax(0, 1fr);
    gap:10px;
    padding:9px;
    border-radius:11px;
  }
  .latest-review-art{ width:44px; height:58px; border-radius:7px; }
  .latest-review-post-title{ font-size:13px; }
  .latest-review-excerpt{ font-size:10px; }
  .latest-review-side{
    grid-column:2;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-top:-3px;
  }
  .latest-review-score{ font-size:11px; }
  .home-promo-shell{ margin-top:13px; }
  .home-promo-rail{ gap:8px; }
  .home-promo-nav{ display:none; }
  .prime-home-banner{
    flex-basis:calc(100% - 22px);
    min-height:92px;
    grid-template-columns:minmax(0, 1fr) 84px;
    border-radius:13px;
  }
  .prime-home-banner:only-child{ flex-basis:100%; }
  .prime-home-content{ padding:11px 0 11px 12px; }
  .prime-home-title{ margin-top:4px; font-size:15px; }
  .prime-home-desc{ display:none; }
  .prime-home-cta{ min-height:22px; margin-top:6px; padding:0 7px; font-size:8px; }
  .prime-home-logo{ width:70px; }
  .prime-home-visual::before{ width:72px; height:72px; }
  .career-home-graphic{ width:70px; max-width:88%; }
  .power-ranking-home-board{ width:58px; padding:7px; }
}

.data-source{
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  text-align:right;
  width:100%;
  max-width: 860px;
  font-weight:600;
  letter-spacing:0;
}

.coupon-panel{
  width:100%;
  max-width: 800px;
}

.weekly-panel{
  width:100%;
  max-width:800px;
  margin-bottom:16px;
}
.weekly-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
}
.weekly-title{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.2px;
}
.weekly-sub{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.weekly-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.weekly-card{
  min-width:0;
  display:grid;
  grid-template-columns:80px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
  box-shadow:none;
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease;
}
.weekly-player-art{
  width:80px;
  aspect-ratio:0.72;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.weekly-player-art img{
  position:absolute;
  left:50%;
  bottom:1%;
  transform:translateX(-50%);
  width:94%;
  height:94%;
  object-fit:contain;
}
.weekly-card .weekly-player-art :is(.fimo-card-rating, .fimo-card-position, .fimo-card-name){
  text-shadow:none!important;
}
.weekly-player-info{
  width:100%;
  min-width:0;
  text-align:left;
}
.weekly-player-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:13px;
  font-weight:900;
}
.weekly-player-meta{
  margin-top:2px;
  color:var(--brand-dark);
  font-size:11px;
  font-weight:900;
}
.weekly-player-price{
  margin-top:4px;
  color:#0f172a;
  font-size:12px;
  font-weight:900;
}
.weekly-player-price .price-unit-icon{ width:1.1em; height:1.1em; vertical-align:-0.2em; object-fit:contain; }
.home-notice {
  display:block;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  color:var(--text);
  text-decoration:none;
}
.home-notice-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}
.home-notice-label {
  color:var(--brand-dark);
  font-size:12px;
  font-weight:900;
}
.home-notice-date {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.home-notice-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:900;
}
.home-notice-preview {
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-notice-empty {
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  background:#f8fafc;
}

.panel{
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border:0;
  border-top:1px solid var(--line);
  padding:22px 0 0;
  box-sizing:border-box;
  min-width:0;
}

/* ===== 최근 쿠폰 미리보기(심플 + 클릭 이동) ===== */
.coupon-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  min-width:0;
}
.coupon-title{
  font-size:16px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.2px;
  margin:0;
}
.coupon-sub{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  margin-top:2px;
  font-weight:700;
}
.ghost-btn{
  min-height:34px;
  padding:0 11px;
  border:1px solid #34d399;
  background:#ffffff;
  color:var(--brand-dark);
  border-radius:9px;
  font-weight:900;
  text-decoration:none;
  box-shadow:none;
  white-space:nowrap;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.coupon-list{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  min-width:0;
}
.coupon-card{
  width:100%;
  min-height:68px;
  background:#ffffff;
  border:1px solid #d1fae5;
  border-left:3px solid #10b981;
  border-radius:10px;
  padding:10px 11px;
  box-shadow:none;
  box-sizing:border-box;
  min-width:0;
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 18px;
  align-items:center;
  gap:9px;
  color:var(--text);
  text-decoration:none;
}
.coupon-card-icon{
  width:30px;
  height:30px;
  border:1px solid #a7f3d0;
  border-radius:8px;
  color:var(--brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.coupon-card-main{
  min-width:0;
}
.coupon-badge{
  display:block;
  color:var(--muted);
  font-weight:900;
  font-size:10px;
  line-height:1.2;
}
.code-chip{
  display:block;
  margin-top:3px;
  color:#0f172a;
  font-family:inherit;
  font-size:14px;
  font-weight:900;
  letter-spacing:0.35px;
  line-height:1.25;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.coupon-card-arrow{
  color:#10b981;
  font-size:14px;
  justify-self:end;
}

.coupon-link{
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.empty{
  text-align:center;
  color:#94a3b8;
  padding:18px 0;
  width:100%;
  border:1px solid #d6dee8;
  border-radius:12px;
  background:#f8fafc;
  font-weight:900;
  font-size:13px;
}

/* ===== 반응형 ===== */
@media (min-width: 1024px){
  .input-area{
    max-width:100%;
  }
}

@media (max-width: 520px){
  .main-content{ padding:6px 14px 28px; }
  .home-wrap{ gap:22px; padding:0; }
  .search-section{ padding:0; border-radius:0; }
  .search-title{ font-size:26px; }
  .search-desc{ font-size:14px; margin-bottom:14px; }

  .input-area{ max-width: 100%; }
  .search-section form{ max-width:100%; }
  .input-area input[type="text"]{
    height:52px;
    line-height:52px;
    font-size:16px;
    padding:0 102px 0 14px;
    border-radius:14px;
  }
  .search-icon-btn{
    width:40px; height:40px; border-radius:9px;
    top:6px; right:6px;
  }
  .search-icon-btn i{ font-size:18px; }
  .home-filter-btn{
    width:40px;
    height:40px;
    right:52px;
    border-radius:9px;
  }
  .home-filter-btn i{ font-size:18px; }
  .home-filter-panel{
    position:fixed;
    inset:auto 10px 10px;
    width:auto;
    max-height:min(76vh, 620px);
    border-radius:16px;
  }
  .home-class-options{ grid-template-columns:1fr; }

  .quick-card{ height:50px; min-height:0; padding:0 18px; }

  .panel{ padding:18px 0 0; border-radius:0; }

  .coupon-header{ align-items:center; }
  .ghost-btn{ width:auto; }
  .weekly-panel{ margin-bottom:22px; }
  .weekly-header{ margin-bottom:10px; }
  .weekly-grid{ gap:8px; }
  .weekly-card{ display:flex; flex-direction:column; padding:8px 6px; border-radius:12px; gap:6px; }
  .weekly-player-art{ width:100%; max-width:92px; border-radius:10px; }
  .weekly-player-info{ text-align:center; }
  .weekly-player-name{ font-size:12px; }
  .weekly-player-meta{ font-size:10px; }
  .weekly-player-price{ font-size:11px; margin-top:4px; }
  .home-notice { padding:10px 11px; border-radius:12px; }
  .home-notice-title { font-size:13px; }
  .home-notice-preview { font-size:11px; }

  .recent-row{ gap:7px; margin-top:10px; }
  .recent-pill{ font-size:12px; padding:7px 11px; }

  .coupon-list{ grid-template-columns:1fr; gap:8px; }
  .coupon-card{ min-height:62px; padding:9px 10px; }
  .code-chip{ font-size:13px; }

}

/* The home page starts at the same height as every other page (base.html: 12px, 6px on phones). */
body.home-page .main-content{ padding-top:12px; }
@media (max-width:550px){ body.home-page .main-content{ padding-top:6px; } }

/* 트래핑의 신 시뮬레이터 배너: 홈 추천 배너 첫 번째(기본) 항목 */
/* 단색 면: 게임 속 트래핑 화면의 자주색을 그대로 가져온 것이라 목적지와 색이 이어진다. */
.trapping-home-banner{background:#43174f;border-color:#6a2c78;color:#fff}
.trapping-home-banner .prime-home-kicker{color:#ffd6f0;letter-spacing:0}
.trapping-home-banner .prime-home-kicker::before{display:none}
.trapping-home-banner .prime-home-title{margin-top:5px;color:#fff}
.trapping-home-banner .prime-home-desc{color:#f1d3ec}
.trapping-home-banner .prime-home-cta{color:#fff}
.trapping-home-graphic{height:92px;width:auto;max-width:140px;object-fit:contain;filter:drop-shadow(0 6px 10px #0006)}
@media(max-width:740px){.trapping-home-banner .prime-home-kicker{font-size:9px}.trapping-home-graphic{height:74px;max-width:110px}}

/* Rounded search field and compact history buttons. */
#home-search-form .input-area input#names{
  height:56px;line-height:normal;border:1px solid #dae6df;border-radius:999px;
  padding:0 124px 0 50px;background:#fff;color:#263c33;font-size:16px;font-weight:500;
}
#home-search-form .input-area input#names::placeholder{color:#65746d;font-weight:400;opacity:1}
#home-search-form .input-area input#names:focus{border-color:#26835d;box-shadow:0 0 0 3px #26835d18}
.home-search-leading{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:19px;color:#40594c;pointer-events:none}
#home-search-form .home-filter-btn{top:6px;right:76px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#40594c}
#home-search-form .home-filter-btn i{font-size:20px}
#home-search-form .home-filter-btn:hover,#home-search-form .home-filter-btn.is-active{background:#e7f4ed;color:#176442}
#home-search-form .search-icon-btn{top:8px;right:8px;width:62px;height:40px;border:0;border-radius:999px;background:#205b43;color:#fff;font:inherit;font-size:14px;font-weight:600}
#home-search-form .search-icon-btn:hover{background:#174832}
#home-search-form button:focus-visible,.recent-row .recent-pill:focus-visible{outline:2px solid #26835d;outline-offset:3px}
.recent-row{max-width:620px;gap:6px;margin-top:10px}
.recent-row .recent-pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;max-width:100%;padding:4px 11px 4px 9px;border:0;border-radius:8px;background:#eef1f4;color:#3b4650;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.4;cursor:pointer}
.recent-row .recent-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-row .recent-pill:hover{background:#e1e6ea}
html[data-theme="dark"] #home-search-form .input-area input#names{background:#1b2a24;border-color:#3a5045;color:#edf5f0}
html[data-theme="dark"] #home-search-form .input-area input#names::placeholder{color:#a6b8ad}
html[data-theme="dark"] .home-search-leading,html[data-theme="dark"] #home-search-form .home-filter-btn{color:#b4d0bf}
html[data-theme="dark"] #home-search-form .home-filter-btn:hover,html[data-theme="dark"] #home-search-form .home-filter-btn.is-active{background:#2d493a;color:#c9edd8}
html[data-theme="dark"] #home-search-form .search-icon-btn{background:#b3e5c7;color:#183e2b}
html[data-theme="dark"] .recent-row .recent-pill{background:#2a3138!important;color:#d3dae0!important;border-color:transparent!important}
html[data-theme="dark"] .recent-row .recent-pill:hover{background:#36404a!important}
@media(max-width:520px){
  #home-search-form .input-area input#names{height:52px;font-size:16px;padding:0 108px 0 40px}
  .home-search-leading{left:15px;font-size:17px}
  #home-search-form .home-filter-btn{top:4px;right:64px;width:40px;height:44px}
  #home-search-form .home-filter-btn i{font-size:19px}
  #home-search-form .search-icon-btn{top:6px;right:6px;width:54px;height:40px;font-size:13px}
  .recent-row{gap:6px;margin-top:8px}
  .recent-row .recent-pill{min-height:28px;gap:5px;padding:3px 10px 3px 8px;font-size:12px}
}