@media(max-width:820px){
  .nations-view{margin:0}
  .nation-archive{min-height:calc(100dvh - 190px);position:relative;--picker-h:clamp(286px,38dvh,330px)}
  .na-head{padding:2px 1px 12px;align-items:flex-start}.na-head>div span{font-size:6px}.na-head>div b{font-size:26px;margin-top:5px}.na-head p{font-size:5px;max-width:130px;line-height:1.5}

  .na-layout{display:block;min-height:0;border-bottom:0;position:relative}
  .na-index{
    position:relative;top:auto;z-index:12;width:100%;height:var(--picker-h);padding:0;
    border:1px solid #2b363a;background:
      linear-gradient(#ffffff018 1px,transparent 1px),
      linear-gradient(90deg,#ffffff018 1px,transparent 1px),
      radial-gradient(circle at 50% 50%,#172126 0,transparent 64%),#06090a;
    background-size:26px 26px,26px 26px,auto,auto;
    overflow:hidden;box-shadow:inset 0 0 42px #0008,0 12px 26px #0005;
    transition:height .2s cubic-bezier(.2,.76,.2,1)
  }
  .na-index:before{
    content:"선택한 국가";position:absolute;z-index:7;left:10px;top:50%;
    transform:translateY(calc(-50% - 8px));font:700 5px ui-monospace,SFMono-Regular,monospace;
    letter-spacing:.18em;color:#7e9298;pointer-events:none
  }
  .na-index:after{
    content:"";position:absolute;z-index:6;left:12px;right:12px;
    top:calc(42px + (var(--picker-h) - 42px)/2);height:112px;transform:translateY(-56px);
    border-top:1px solid #a9c4cb;border-bottom:1px solid #a9c4cb;
    box-shadow:inset 0 0 28px #bfe6ed0b,0 0 18px #9fcbd31b;pointer-events:none
  }
  .nation-archive.index-open .na-index{position:relative;height:var(--picker-h);box-shadow:inset 0 0 42px #0008,0 15px 35px #000a}
  .nation-archive.index-open .na-index:before,.nation-archive.index-open .na-index:after{display:none}

  .na-index-mobile-bar{display:flex;height:42px;align-items:center;border-bottom:1px solid #273135;background:#090d0ef2}
  .na-index-toggle,.na-index-close{border:0;background:transparent;color:#8ea0a5;height:42px;cursor:pointer;font:700 6px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}
  .na-index-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 11px;text-align:left}.na-index-toggle span{font-size:6px;color:#65757a}.na-index-toggle b{font-size:13px}
  .na-index-close{display:none;margin-left:auto;width:42px;font-size:18px;color:#a9bcc1}
  .nation-archive.index-open .na-index-toggle{width:auto;flex:1;border-right:1px solid #273135}
  .nation-archive.index-open .na-index-close{display:block}

  .na-index-head{display:none;padding:10px 10px 8px;margin:0;border-bottom:1px solid #253034;background:#080c0d}
  .nation-archive.index-open .na-index-head{display:grid;gap:8px}
  .na-index-head>div{display:flex;justify-content:space-between;align-items:center}.na-index-head>div span,.na-index-head>div b{font-size:5px}
  .na-search{display:grid;grid-template-columns:auto 1fr;min-height:33px}.na-search span{font-size:5px}.na-search input{font-size:8px}

  .na-index-list{
    position:relative;display:block;overflow-y:auto;overflow-x:hidden;
    height:calc(var(--picker-h) - 42px);max-height:none;
    padding-block:calc((var(--picker-h) - 42px - 112px)/2);
    scrollbar-width:none;overscroll-behavior:contain;scroll-snap-type:y mandatory;
    scroll-padding-block:calc((var(--picker-h) - 42px - 112px)/2);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)
  }
  .na-index-list::-webkit-scrollbar{display:none}
  .nation-archive.index-open .na-index-list{
    height:calc(var(--picker-h) - 125px);padding:4px 0 10px;scroll-snap-type:none;scroll-padding:0;
    -webkit-mask-image:none;mask-image:none
  }

  .na-index-btn{
    width:100%;height:112px;display:grid;grid-template-columns:1fr;place-items:center;position:relative;
    border:0;background:transparent;padding:0;cursor:pointer;scroll-snap-align:center;color:#718187
  }
  .na-index-btn>span,.na-index-btn>div{display:none}
  .na-index-btn>em{
    position:absolute;z-index:5;left:0;right:0;bottom:4px;text-align:center;
    font:760 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;color:#64757a;font-style:normal
  }
  .na-flag-card{
    display:block;position:relative;width:min(52vw,190px);aspect-ratio:5/3;overflow:hidden;border:1px solid #455358;
    background:#0b0d0d;box-shadow:0 9px 18px #0009;transform:scale(.76);
    opacity:.4;filter:saturate(.42) brightness(.62) contrast(1.16);
    transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .18s,filter .18s,border-color .18s,box-shadow .18s
  }
  .na-flag-card img{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .16s}.na-index-btn.flag-ready .na-flag-card img{opacity:1}
  .na-flag-card:before{
    content:"";position:absolute;z-index:2;inset:-1px;pointer-events:none;
    background:
      radial-gradient(ellipse at 3% 6%,#170b04d9 0 7%,transparent 23%),
      radial-gradient(ellipse at 97% 94%,#120904c9 0 8%,transparent 26%),
      linear-gradient(90deg,#0008 0,transparent 8%,transparent 92%,#0009 100%);
    mix-blend-mode:multiply
  }
  .na-flag-card:after{
    content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
    background:repeating-linear-gradient(167deg,transparent 0 11px,#e8f2f20a 12px,transparent 13px 21px),linear-gradient(180deg,#fff0 55%,#02030378 100%);
    box-shadow:inset 0 0 0 1px #d5e7e70c,inset 0 0 20px #0008
  }
  .na-flag-card u{position:absolute;z-index:4;inset:0;text-decoration:none;pointer-events:none;background:linear-gradient(112deg,transparent 0 38%,#d5eef014 44%,transparent 50%);opacity:.35}
  .na-index-btn.active .na-flag-card{
    transform:scale(1);opacity:1;filter:saturate(.94) brightness(.98) contrast(1.05);
    border-color:#afc7cd;box-shadow:0 0 0 4px #bfe7ed0a,0 12px 28px #000d,0 0 22px #a4d1d82d
  }
  .na-index-btn.active>em{color:#e1edf0}.na-index-btn:active .na-flag-card{transform:scale(.96)}

  .nation-archive.index-open .na-index-btn{
    height:52px;grid-template-columns:24px 58px minmax(0,1fr) 40px;gap:8px;place-items:initial;align-items:center;
    padding:0 9px;text-align:left;border-bottom:1px solid #20282b;scroll-snap-align:none
  }
  .nation-archive.index-open .na-index-btn>span{display:block;font:650 6px ui-monospace,SFMono-Regular,monospace;color:#56656a}
  .nation-archive.index-open .na-index-btn>div{display:block;min-width:0}
  .nation-archive.index-open .na-index-btn>div b{display:block;font-size:10px;color:#b9c6c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nation-archive.index-open .na-index-btn>div small{display:block;margin-top:3px;font:600 5px ui-monospace,SFMono-Regular,monospace;color:#56656a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nation-archive.index-open .na-index-btn>em{position:static;text-align:right;font-size:6px;color:#829399}
  .nation-archive.index-open .na-flag-card{width:54px;transform:none;opacity:.66;filter:saturate(.55) brightness(.72)}
  .nation-archive.index-open .na-index-btn.active{background:#101719;box-shadow:inset 2px 0 #bddce3}
  .nation-archive.index-open .na-index-btn.active .na-flag-card{opacity:1;filter:saturate(.9) brightness(.92);box-shadow:0 5px 12px #0008}

  .na-dossier{padding:0 0 28px;min-width:0;overflow:visible}
  .na-dossier:before{right:0;top:18px;font-size:78px}

  .na-identity{
    display:block;min-height:0;padding:16px 11px 14px;border:1px solid #2b363a;border-top:0;
    background:linear-gradient(180deg,#0c1113 0,#080b0c 100%)
  }
  .na-flag-frame{display:none}
  .na-identity-copy{padding:0}
  .na-code{font-size:6px;letter-spacing:.16em;color:#8ea0a5}.na-identity h2{font-size:clamp(30px,10vw,46px);margin:8px 0 7px;line-height:.9}.na-eng{font-size:7px;line-height:1.5}
  .na-state-line{display:grid;grid-template-columns:auto 1fr auto;margin-top:13px;padding-top:10px;gap:7px;align-items:center}
  .na-state-line span{font-size:5px}.na-state-line b{font-size:9px;text-align:left}.na-state-line i{display:block;font-size:5px;text-align:right}

  .na-tabs{margin-top:0;display:grid;grid-template-columns:repeat(3,1fr)}.na-tabs button{margin:0;padding:12px 1px;text-align:center}.na-tabs button:after{left:12%;right:12%}
  .na-panels{min-height:0}.na-panel{padding:18px 4px 0}.na-panel-label{font-size:5px}.na-brief,.na-defense-note{font-size:12px;line-height:1.78;margin-top:14px}
  .na-overview-grid,.na-defense-grid{grid-template-columns:1fr 1fr;margin-top:16px}.na-defense-grid article:last-child{grid-column:1/-1}.na-overview-grid article,.na-defense-grid article{min-height:66px;padding:12px 10px}
  .na-history article{grid-template-columns:42px 1fr;gap:9px;padding:12px 0}.na-history article em{grid-column:2}.na-history time{font-size:9px}.na-history div b{font-size:10px}
  .na-data-rail{display:none}
  .na-mobile-pager{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px;padding:0 4px}.na-mobile-pager button{border:1px solid #2f3a3e;background:#090d0e;color:#8d9ca1;min-height:46px;padding:8px 10px;text-align:left}.na-mobile-pager button:last-child{text-align:right}.na-mobile-pager button:disabled{opacity:.25}.na-mobile-pager span,.na-mobile-pager b{display:block;font:650 5px ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em;color:#59686d}.na-mobile-pager b{margin-top:4px;font-size:7px;color:#aebdc1}

  .na-dossier.swap-next,.na-dossier.swap-prev{animation:naMobileFileSwap .18s ease both}
  @keyframes naMobileFileSwap{from{opacity:.34;transform:translateY(6px)}to{opacity:1;transform:none}}
  .nation-handoff{inset:8px}.nation-handoff-core>div{width:70px;height:70px}
}
@media(max-width:380px){
  .nation-archive{--picker-h:278px}
  .na-flag-card{width:min(54vw,176px)}
  .na-identity h2{font-size:30px}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .na-index,.na-index-btn,.na-flag-card,.na-dossier.swap-next,.na-dossier.swap-prev,.na-panel.fade-in,.nation-handoff.active,.nation-handoff.active .nation-handoff-core>div{animation:none;transition:none}
}