/* ===========================================================
   KINOJO Ranking Responsive - 20260821
   역할: 통합 순위 카드의 태블릿·모바일 배치만 관리합니다.
=========================================================== */
@media (max-width:980px){
  .ranking-wrap{width:min(100% - 20px,var(--ranking-content-max))}
  .ranking-toolbar{grid-template-columns:1fr;gap:12px}
  .ranking-action-box{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    align-items:center;
    gap:12px;
    padding:12px 0 0;
    border-left:0;
    border-top:1px solid rgba(120,145,180,.18);
  }
  .ranking-switch-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ranking-panel-head h2{font-size:15px}
  .ranking-actual-legion{display:none}
}

@media (min-width:700px) and (max-width:1220px){
  body.kinojo-page-ranking .ranking-toolbar{
    grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
    grid-template-areas:
      "search filters"
      "actions filters";
    align-items:start;
    column-gap:12px;
    row-gap:7px;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-filter-main{
    display:contents;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-search-box{
    grid-area:search;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    min-width:0;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-filter-box{
    grid-area:filters;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    min-width:0;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-filter-title{padding:0}
  body.kinojo-page-ranking .ranking-toolbar .ranking-class-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    width:100%;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-class-tab{
    box-sizing:border-box;
    width:100%;
    height:27px;
    padding-inline:4px;
    font-size:10px;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-action-box{
    grid-area:actions;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    align-self:end;
    padding:6px 0 0;
    border-top:1px solid rgba(120,145,180,.18);
    border-left:0;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-switch-group{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-action-box .kinojo-filter-switch{
    width:auto;
    min-height:34px;
    gap:7px;
    padding-inline:9px;
    white-space:nowrap;
  }
  body.kinojo-page-ranking .ranking-toolbar .ranking-scope-heading{display:none}
}

@media (min-width:700px) and (max-width:980px){
  .ranking-board{
    --ranking-board-height:clamp(560px,calc(100dvh - var(--kinojo-topbar-actual-height,var(--kinojo-shell-top,68px)) - var(--kinojo-attached-subbar-height,0px) - 82px),650px);
    min-height:560px;
    border-radius:18px;
  }
  .ranking-panel-head{min-height:54px;padding:10px 11px}
  .ranking-panel-head h2{font-size:14px}
  .ranking-panel-head p{font-size:9px}
  .ranking-panel-chip{height:22px;padding:0 7px;font-size:10px}
  .ranking-my-rank-jump{padding-inline:11px}
  .ranking-card-main{grid-template-columns:36px 36px minmax(0,1fr) 78px 80px;gap:5px;height:80px;min-height:80px;padding-left:5px}
  .ranking-rank-current{font-size:18px}
  .ranking-rank-crown{font-size:13px}
  .ranking-class-emblem{width:33px;height:33px}
  .ranking-class-emblem img{width:27px;height:27px}
  .ranking-name-line strong{font-size:12px}
  .ranking-owner-note,.ranking-main-badge{max-width:58px;overflow:hidden;font-size:7px;text-overflow:ellipsis}
  .ranking-legion,.ranking-server-tag{font-size:8px}
  .ranking-metric.power{grid-template-columns:14px minmax(0,1fr);gap:3px}
  .ranking-metric.item{grid-template-columns:10px minmax(0,1fr);gap:3px}
  .ranking-metric.power .ranking-metric-icon{width:14px;height:14px}
  .ranking-metric.item .ranking-metric-icon{width:8px;height:13px}
  .ranking-metric strong{font-size:9px}
  .ranking-portrait{height:66px;border-radius:0 12px 0 0}
  .ranking-card-footer{height:26px;min-height:26px}
}

@media (max-width:699px){
  .ranking-wrap{width:calc(100% - 16px);padding:8px 0 86px}
  .ranking-mobile-mode-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin:0 0 7px;
    padding:5px;
    border:1px solid var(--ranking-line);
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 7px 18px rgba(31,47,79,.05);
  }
  .ranking-mobile-mode-tabs button{
    height:32px;
    border:1px solid var(--ranking-line);
    border-radius:9px;
    background:#fff;
    color:#344054;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
  }
  .ranking-mobile-mode-tabs button.is-active{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.16)}
  .ranking-mobile-mode-tabs button:focus-visible{outline:3px solid rgba(37,99,235,.16);outline-offset:1px}
  .ranking-mobile-filter-head{
    display:flex;
    grid-column:1/-1;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:30px;
  }
  .ranking-mobile-filter-head span{color:var(--ranking-muted);font-size:11px;font-weight:950}
  .ranking-mobile-filter-head .kinojo-btn{
    box-sizing:border-box;
    height:28px;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(120,145,180,.34);
    border-radius:8px;
    background:#fff;
    color:#475569;
    font:inherit;
    font-size:10px;
    font-weight:900;
  }
  body.kinojo-page-ranking>.ranking-toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding:7px 9px;
    border-radius:0 0 14px 14px;
  }
  body.kinojo-page-ranking>.ranking-toolbar .ranking-filter-main{display:grid;grid-template-columns:1fr;gap:7px}
  body.kinojo-page-ranking>.ranking-toolbar .ranking-search-box{display:grid;grid-template-columns:1fr;gap:4px}
  body.kinojo-page-ranking>.ranking-toolbar .ranking-filter-box{display:none}
  body.kinojo-page-ranking>.ranking-toolbar .ranking-action-box{display:none}
  body.kinojo-page-ranking>.ranking-toolbar.is-filter-open .ranking-filter-box{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    padding-top:7px;
    border-top:1px solid rgba(120,145,180,.16);
  }
  body.kinojo-page-ranking>.ranking-toolbar.is-filter-open .ranking-action-box{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:7px 0 0;
    border-top:1px solid rgba(120,145,180,.16);
    border-left:0;
  }
  body.kinojo-page-ranking>.ranking-toolbar .ranking-switch-group{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:6px}
  .ranking-search-controls{grid-template-columns:minmax(0,1fr) 62px 62px;gap:5px}
  .ranking-search-controls input{height:35px;padding-inline:10px;font-size:11px}
  body.kinojo-page-ranking .ranking-search-controls .kinojo-btn{height:35px;min-height:35px;padding:0 5px;border-radius:9px;font-size:10px}
  .ranking-filter-title{padding:0}
  .ranking-class-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%}
  .ranking-class-tab{width:100%;height:27px;padding:0 3px;border-radius:8px;font-size:10px}
  .ranking-scope-heading{width:100%;grid-template-columns:auto 1fr;align-items:center;gap:6px}
  .ranking-scope-heading span{text-align:right}
  body.kinojo-page-ranking .ranking-action-box .kinojo-filter-switch{width:100%;min-height:36px;border-radius:9px;font-size:10px}
  .ranking-board{
    --ranking-board-height:clamp(520px,calc(100dvh - var(--kinojo-topbar-actual-height,var(--kinojo-shell-top,63px)) - var(--kinojo-attached-subbar-height,0px) - 110px),610px);
    grid-template-columns:1fr;
    height:var(--ranking-board-height);
    min-height:520px;
    border-radius:17px;
  }
  .ranking-board[data-mobile-mode="PVE"] .ranking-panel.pvp,.ranking-board[data-mobile-mode="PVP"] .ranking-panel.pve{display:none}
  .ranking-panel.pvp{border-left:0}
  .ranking-panel-head{min-height:52px;padding:9px 12px}
  .ranking-panel-head h2{font-size:14px}
  .ranking-panel-head p{font-size:9px}
  .ranking-panel-chip{height:22px;padding:0 8px;font-size:10px}
  .ranking-my-rank-jump{min-height:36px;padding:0 11px}
  .ranking-my-rank-jump>span{font-size:10px}
  .ranking-my-rank-jump>small{font-size:8px}
  .ranking-scroll-shell::after{height:52px}
  .ranking-card-list{gap:6px;padding:7px 6px 42px}
  .ranking-card{border-radius:13px}
  .ranking-card-main{grid-template-columns:32px 34px minmax(0,1fr) 70px 72px;gap:4px;height:80px;min-height:80px;padding:5px 0 5px 4px}
  .ranking-rank-current{font-size:17px}
  .ranking-rank-crown{height:10px;font-size:12px}
  .ranking-rank-change{min-height:14px;padding-inline:3px;font-size:7px}
  .ranking-class-emblem{width:31px;height:31px}
  .ranking-class-emblem img{width:25px;height:25px}
  .ranking-legion-line{gap:3px;margin-bottom:4px}
  .ranking-legion{max-width:48%;font-size:8px}
  .ranking-server-tag{font-size:8px}
  .ranking-name-line{gap:3px}
  .ranking-name-line strong{font-size:12px}
  .ranking-owner-note,.ranking-main-badge{max-width:48px;min-height:15px;overflow:hidden;padding-inline:4px;font-size:7px;text-overflow:ellipsis}
  .ranking-metrics{gap:2px}
  .ranking-metric.power{grid-template-columns:13px minmax(0,1fr);gap:3px}
  .ranking-metric.item{grid-template-columns:9px minmax(0,1fr);gap:3px}
  .ranking-metric.power .ranking-metric-icon{width:13px;height:13px}
  .ranking-metric.item .ranking-metric-icon{width:8px;height:12px}
  .ranking-metric-content{grid-template-rows:11px auto}
  .ranking-metric strong{font-size:9px}
  .ranking-metric-delta{height:10px;padding-inline:2px;font-size:6px}
  .ranking-portrait{height:66px;border-radius:0 12px 0 0}
  .ranking-portrait.is-empty{font-size:22px}
  .ranking-card-footer{gap:4px;height:26px;min-height:26px;padding:3px 5px}
  .ranking-review-badge{height:16px;padding:0 4px;font-size:7px}
  .ranking-card-footer p{font-size:8px}
  .ranking-card.top-one,.ranking-card.top-two,.ranking-card.top-three{--flow-radius:13px}
}

@media (max-width:390px){
  .ranking-search-controls{grid-template-columns:minmax(0,1fr) 56px 56px;gap:4px}
  .ranking-search-controls input{padding-inline:8px}
  .ranking-card-main{grid-template-columns:29px 31px minmax(0,1fr) 64px 64px;gap:3px;padding-left:3px}
  .ranking-rank-current{font-size:16px}
  .ranking-class-emblem{width:29px;height:29px}
  .ranking-class-emblem img{width:23px;height:23px}
  .ranking-name-line strong{font-size:11px}
  .ranking-owner-note,.ranking-main-badge{max-width:42px;padding-inline:3px}
  .ranking-legion,.ranking-server-tag{font-size:7px}
  .ranking-metric.power{grid-template-columns:11px minmax(0,1fr);gap:2px}
  .ranking-metric.item{grid-template-columns:8px minmax(0,1fr);gap:2px}
  .ranking-metric.power .ranking-metric-icon{width:11px;height:11px}
  .ranking-metric.item .ranking-metric-icon{width:7px;height:11px}
  .ranking-metric strong{font-size:8px}
  .ranking-portrait.is-empty{font-size:20px}
}

@media (max-width:360px){
  .ranking-class-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ranking-my-rank-jump>small{display:none}
  .ranking-card-main{grid-template-columns:28px 29px minmax(0,1fr) 58px 58px}
  .ranking-owner-note,.ranking-main-badge{display:none}
}