/* yeojido U3 responsive — width rules only, source: design yeojido v3 styles.css. Load after components.css.
   v3 breakpoints: base (360 mobile first), 520, 768, 1100; plus one max-width:767px rule. Reference widths 360 and 1280. */

@media (max-width:767px){
  .hero-sub .sep{display:none}
}

/* ---------- 520+: wordmark back in the nav ---------- */
@media (min-width:520px){
  .brand-word{display:inline}
  .nav-wrap>.nav{padding:0 8px 0 14px}
  .nav-links a{padding:0 14px}
}

/* ---------- 768+ ---------- */
@media (min-width:768px){
  .wrap{padding:0 var(--s8)}
  .nav-wrap>.nav{padding:0 8px 0 18px;max-width:1168px}
  .nav-wrap{padding:12px 32px 0}
  .nav-links .nav-extra{display:inline-flex}
  .hero-shell{padding:0 16px;max-width:1232px;margin:-68px auto 0}
  .hero{padding:140px var(--s12) var(--s12);min-height:540px;display:flex;flex-direction:column;justify-content:flex-end}
  .hero.hero--sub{min-height:440px}
  .hero-grid{width:100%}
  .bento .tile--wide{grid-column:span 1}
  .tile--row{flex-direction:column;align-items:stretch}
  .display{font-size:80px}
  .display--store{font-size:64px}
  .hero-sub,.hero-flag{font-size:28px}
  .hero-intro p{font-size:15px}
  .hero-grid{grid-template-columns:1.25fr 1fr;align-items:end;gap:var(--s10)}
  .hero-card{padding:var(--s6)}
  .section{padding-top:var(--s16)}
  .sec-title{font-size:40px}
  .bento{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
  .tile{min-height:168px;padding:var(--s5)}
  .bento .tile--feature{grid-row:span 2;min-height:352px;padding:var(--s6)}
  .tile--feature .tile-count{font-size:64px}
  .prose{grid-template-columns:repeat(3,1fr)}
  .toolbar{grid-template-columns:300px 1fr auto;align-items:end;column-gap:var(--s6)}
  .toolbar .chips{margin:0;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
  .cards{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  .store-layout{grid-template-columns:1fr 340px;align-items:start;gap:var(--s8)}
  .side{display:block;position:sticky;top:88px}
  .staff{grid-template-columns:repeat(2,1fr)}
  .mini-cards{grid-template-columns:repeat(3,1fr)}
  .actionbar{display:none}
  .has-bar .foot{padding-bottom:var(--s12)}
  .cat-chips{margin:0;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
  /* home map slot: 16:9 from 768 (design 279) */
  .map-slot{aspect-ratio:16/9}
}

/* ---------- 1100+ ---------- */
@media (min-width:1100px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .sum-grid{grid-template-columns:repeat(4,1fr)}
  .calc{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8);align-items:start}
  .calc-out{margin-top:0;padding-top:0;border-top:0}
  .legend{grid-template-columns:1fr 1fr}
}