/* 2026-08-19: home ranking placement + clean ranking numbers */
.modern-welcome-card{display:flex!important;align-items:center!important;gap:14px!important;background:#fff!important;border:1px solid #e5e7eb!important;box-shadow:0 6px 18px rgba(20,24,32,.05)!important;color:#252a31!important}
.modern-welcome-card:before,.modern-welcome-card:after{display:none!important}
.modern-welcome-copy{min-width:0!important;flex:1!important}
.modern-welcome-copy h1,.modern-welcome-copy p{color:#252a31!important;text-shadow:none!important}
.modern-welcome-copy p{color:#6b7280!important}
.modern-welcome-ranks{display:none!important}

/* PC: ranking cards directly under the one-line greeting. */
.modern-bottom-ranks{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;margin-top:14px!important}
.modern-bottom-ranks .modern-rank-card{min-width:0!important;padding:16px 17px!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(20,24,32,.04)!important;color:#252a31!important}
.modern-rank-heading{display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:10px!important;color:#30343a!important}
.modern-rank-heading span{font-size:17px!important;line-height:1!important}
.modern-rank-heading strong{font-size:14px!important;font-weight:800!important;color:#30343a!important}
.modern-rank-list{min-height:0!important}
.modern-rank-list p{margin:0!important;color:#9ca3af!important;font-size:12px!important}
.modern-rank-list .badge-owner-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:7px 0!important;border:0!important;border-bottom:1px solid #f0f1f3!important;border-radius:0!important;background:transparent!important;color:#4b5563!important;font-size:12px!important}
.modern-rank-list .badge-owner-row:last-child{border-bottom:0!important}
.modern-rank-list .badge-owner-row>span{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;border:0!important;background:transparent!important;padding:0!important}
.modern-rank-list .badge-owner-row em{display:grid!important;place-items:center!important;flex:0 0 23px!important;width:23px!important;height:23px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#f1f3f5!important;color:#555d68!important;font-family:Arial,'Noto Sans KR',sans-serif!important;font-size:11px!important;line-height:1!important;font-style:normal!important;font-weight:800!important;box-sizing:border-box!important}
.modern-rank-list .badge-owner-row:nth-child(1) em{background:#fff1bf!important;color:#8a6500!important}
.modern-rank-list .badge-owner-row:nth-child(2) em{background:#edf0f4!important;color:#59616d!important}
.modern-rank-list .badge-owner-row:nth-child(3) em{background:#f5dfcf!important;color:#8a5732!important}
.modern-rank-list .badge-owner-row strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-weight:700!important;color:#4b5563!important;border:0!important;background:transparent!important}
.modern-rank-list .badge-owner-row b{flex:none!important;color:#6b7280!important;font-weight:700!important;border:0!important;background:transparent!important}
.modern-mobile-ranks{display:none!important}

/* 2026-08-19 PC: 12 shortcuts in a balanced 4 x 3 grid. */
@media (min-width:901px){
  body.clean-white-v4 #home.modern-home.active .modern-shortcut-grid,
  #home.modern-home.active .modern-shortcut-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-shortcut-card,
  #home.modern-home.active .modern-shortcut-card{
    min-height:102px!important;
    padding:13px 10px!important;
    gap:8px!important;
    cursor:pointer!important;
    font:inherit!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-shortcut-icon,
  #home.modern-home.active .modern-shortcut-icon{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
    font-size:21px!important;
  }
  #home.modern-home.active .modern-shortcut-card strong{font-size:13px!important}
  #home.modern-home.active .modern-shortcut-card small{font-size:10px!important}
}

.modern-fortune-cookie-card p{margin:2px 0 13px;color:#69717d;font-size:12px;line-height:1.65;text-align:center}
.modern-fortune-cookie-card>button{width:100%;height:38px;border:1px solid #dfe3e8;border-radius:9px;background:#f6f7f8;color:#343a43;font-weight:800;cursor:pointer}
.modern-fortune-cookie-card>button:hover{background:#eef0f3}
.calculator-hub-panel>p{margin:-4px 0 15px;color:#747b85;font-size:13px}
.calculator-hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.calculator-hub-grid>button{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:2px 8px;padding:13px;border:1px solid #e1e4e8;border-radius:10px;background:#fff;color:#343a43;text-align:left;cursor:pointer}
.calculator-hub-grid>button:hover{background:#f7f8f9}
.calculator-hub-grid span{grid-row:1/3;font-size:24px}.calculator-hub-grid strong{font-size:13px}.calculator-hub-grid small{color:#858c96;font-size:10px}

#home.modern-home.active,#home.modern-home.active *{text-shadow:none!important}
#home.modern-home.active .modern-greeting-card,#home.modern-home.active .modern-side-card,#home.modern-home.active .modern-shortcut-card,#home.modern-home.active .modern-announcement{background:#fff!important;border-color:#e5e7eb!important;color:#30343a!important;box-shadow:0 6px 18px rgba(20,24,32,.05)!important}
#home.modern-home.active .modern-announcement-label{background:#f3f4f6!important;color:#374151!important}
#home.modern-home.active .modern-greeting-card h2,#home.modern-home.active .modern-card-heading h2,#home.modern-home.active .modern-side-card h2{color:#30343a!important}
#home.modern-home.active .modern-greeting-card .section-title,#home.modern-home.active .modern-card-heading{color:#30343a!important}
#home.modern-home.active .modern-greeting-card .section-title:after,#home.modern-home.active .modern-greeting-card .section-title:before{background:#e5e7eb!important;border-color:#e5e7eb!important}

@media (max-width:900px){
  body.clean-white-v4 #home.modern-home.active .modern-shortcut-grid,
  #home.modern-home.active .modern-shortcut-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-calculator-shortcut,
  #home.modern-home.active .modern-calculator-shortcut{
    display:flex!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-fortune-cookie-card,
  #home.modern-home.active .modern-fortune-cookie-card{
    display:block!important;
    order:8!important;
    width:100%!important;
    margin-top:12px!important;
    margin-bottom:10px!important;
    box-sizing:border-box!important;
  }
  .modern-welcome-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-bottom:8px!important;padding:16px!important}
  /* Mobile: left/right two equal-width ranking cards, below greeting and above notice. */
  .modern-bottom-ranks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;margin-top:8px!important}
  .modern-bottom-ranks .modern-rank-card{padding:11px 10px!important;border-radius:12px!important}
  .modern-rank-heading{gap:5px!important;margin-bottom:7px!important}
  .modern-rank-heading span{font-size:14px!important}
  .modern-rank-heading strong{font-size:11px!important}
  .modern-rank-list .badge-owner-row{padding:5px 0!important;font-size:10px!important}
  .modern-rank-list .badge-owner-row>span{gap:6px!important}
  .modern-rank-list .badge-owner-row em{flex-basis:21px!important;width:21px!important;height:21px!important;font-size:10px!important}
  .modern-rank-list .badge-owner-row b{font-size:10px!important}
  .modern-home-layout{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .modern-home-center{display:flex!important;flex-direction:column!important}
  .modern-greeting-card{order:1!important}
  .modern-bottom-ranks{order:2!important}
  .modern-announcement{order:3!important;margin-bottom:0!important}
  .modern-shortcut-grid{order:4!important}
}

/* 2026-08-19 mobile-only final order: greeting -> notice -> rankings.
   Desktop layout is intentionally untouched. */
@media (max-width:900px){
  .modern-home-center .modern-greeting-card{order:1!important}
  .modern-home-center .modern-announcement{order:2!important}
  .modern-home-center .modern-bottom-ranks{order:3!important}
  .modern-home-center .modern-shortcut-grid{order:4!important}

  /* Mobile label requested by the final layout. */
  .modern-home-center .modern-bottom-ranks .modern-rank-card:nth-child(2) .modern-rank-heading strong{
    font-size:0!important;
  }
  .modern-home-center .modern-bottom-ranks .modern-rank-card:nth-child(2) .modern-rank-heading strong::after{
    content:'배지 현황 순위';
    font-size:11px!important;
    font-weight:800!important;
  }
}

/* 2026-08-19 FINAL MOBILE ALIGNMENT: make the two ranking cards fill the row evenly. */
@media (max-width: 900px){
  body.clean-white-v4 #home.modern-home.active .modern-bottom-ranks,
  #home.modern-home.active .modern-bottom-ranks{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    gap:8px !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    align-self:stretch !important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-bottom-ranks .modern-rank-card,
  #home.modern-home.active .modern-bottom-ranks .modern-rank-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
}

/* 2026-08-19 FINAL MOBILE HOME ORDER:
   welcome (outside this layout) -> notice -> fortune cookie -> login. */
@media (max-width:900px){
  body.clean-white-v4 #home.modern-home.active .modern-announcement,
  #home.modern-home.active .modern-announcement{
    order:1!important;
    margin:0 0 8px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-fortune-cookie-card,
  #home.modern-home.active .modern-fortune-cookie-card{
    order:2!important;
    margin:0 0 8px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-login-card,
  #home.modern-home.active .modern-login-card{
    order:3!important;
    margin:0 0 8px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-greeting-card,
  #home.modern-home.active .modern-greeting-card{order:4!important}
  body.clean-white-v4 #home.modern-home.active .modern-bottom-ranks,
  #home.modern-home.active .modern-bottom-ranks{
    order:5!important;
    margin:8px 0 10px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-shortcut-grid,
  #home.modern-home.active .modern-shortcut-grid{order:6!important}
  body.clean-white-v4 #home.modern-home.active .modern-home-right>.modern-post-card:nth-child(2),
  #home.modern-home.active .modern-home-right>.modern-post-card:nth-child(2){order:7!important}
  body.clean-white-v4 #home.modern-home.active .modern-home-right>.modern-post-card:nth-child(3),
  #home.modern-home.active .modern-home-right>.modern-post-card:nth-child(3){order:8!important}
  body.clean-white-v4 #home.modern-home.active .modern-visitors-card,
  #home.modern-home.active .modern-visitors-card{order:9!important}
}

/* Compact login card on both PC and mobile. */
body.clean-white-v4 #home.modern-home.active .modern-login-card,
#home.modern-home.active .modern-login-card{
  padding:14px!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-card .modern-card-heading,
#home.modern-home.active .modern-login-card .modern-card-heading{
  margin-bottom:9px!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form,
#home.modern-home.active .modern-login-form{
  gap:6px!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form>input,
#home.modern-home.active .modern-login-form>input{
  height:38px!important;
  box-sizing:border-box!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form>label,
#home.modern-home.active .modern-login-form>label{
  margin:0!important;
  white-space:nowrap!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form>button,
#home.modern-home.active .modern-login-form>button{
  height:37px!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form>.modern-register,
#home.modern-home.active .modern-login-form>.modern-register{
  height:20px!important;
}
body.clean-white-v4 #home.modern-home.active .modern-login-form>.member-auth-message:empty,
#home.modern-home.active .modern-login-form>.member-auth-message:empty{
  display:none!important;
}

/* Mobile first row: ID field on the left, save-ID option on the right. */
@media (max-width:900px){
  body.clean-white-v4 #home.modern-home.active .modern-login-form,
  #home.modern-home.active .modern-login-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:9px!important;
    row-gap:6px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-login-form>input:nth-of-type(1),
  #home.modern-home.active .modern-login-form>input:nth-of-type(1){
    grid-column:1!important;
    grid-row:1!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-login-form>label,
  #home.modern-home.active .modern-login-form>label{
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
    align-items:center!important;
    gap:4px!important;
    padding-right:2px!important;
  }
  body.clean-white-v4 #home.modern-home.active .modern-login-form>input:nth-of-type(2),
  #home.modern-home.active .modern-login-form>input:nth-of-type(2),
  body.clean-white-v4 #home.modern-home.active .modern-login-form>.member-auth-message,
  #home.modern-home.active .modern-login-form>.member-auth-message,
  body.clean-white-v4 #home.modern-home.active .modern-login-form>button,
  #home.modern-home.active .modern-login-form>button{
    grid-column:1/-1!important;
  }
}