/* Two readable mobile rows instead of compressing navigation to 9px. */
/* Short landscape screens keep usable controls without spending a fifth of the
   viewport on navigation. Scene geometry reads the same --nav-height token. */
@media (min-width:601px) and (max-height:500px) and (orientation:landscape){
  :root{--nav-height:56px}
  .site-nav{height:var(--nav-height);padding-top:0;padding-bottom:0}
  .site-nav .nav-logo,.site-nav nav,.site-nav .nav-tools{height:44px;transform:none;align-self:center}
  .site-nav .nav-logo img{height:42px}
  .site-nav nav a,.site-nav .nav-tool,.site-nav .nav-lang__btn{min-height:44px}
  .ot__instruction{font-size:11px}
  .ot__counter{font-size:11px}
}
/* The theater hides the navigation mascot; its current-section label must remain visible. */
/* Other works belong to the displayed frame, not to the actor's floor area.
   Use the same projected foot coordinate as the gallery's contact shadow. */
@media(max-width:900px) and (orientation:portrait){
  /* Keep the four alternate works visible without placing controls over the actor.
     The host owns the lower-left floor area; the compact A3 strip sits on the
     opposite side and follows the projected frame baseline. */
  .original-table .ot__thumbs{left:auto;right:max(10px,env(safe-area-inset-right));top:var(--ot-preview-top,calc(var(--ot-shadow-center-y,65%) + 8px));bottom:auto;transform:none;gap:clamp(4px,1.2vw,7px);align-items:center}
  .original-table .ot__thumb{width:clamp(34px,9vw,40px);height:auto;min-height:46px;flex:0 0 clamp(34px,9vw,40px);aspect-ratio:1060/1484;padding:3px;background:#21130e;border-color:#b89a63;border-radius:2px}
  .original-table .ot__thumb img{object-fit:contain}
  .original-table .ot__instruction{font-size:12px;line-height:1.45;color:#f1e4cb}
  .original-table .ot__counter{font-size:12px;color:#f1e4cb}
}
@media(max-width:350px) and (orientation:portrait){
  /* Four portrait previews cannot remain tappable in one row beside the actor.
     A compact two-by-two rail keeps the first preview off the mascot's bezel. */
  .original-table .ot__thumbs{display:grid;grid-template-columns:repeat(2,44px);gap:6px;align-items:start}
  .original-table .ot__thumb{width:44px;min-height:60px;flex:none}
}
@media(min-width:701px) and (max-width:900px) and (orientation:portrait){
  .ot__instruction{left:auto;right:4%;width:40%;transform:none;text-align:center;white-space:normal;font-size:11px;bottom:42px}
}
.site-nav:has(a[href="#original"][aria-current="location"]) nav a[href="#original"]{color:var(--nav-theater-ink);text-decoration:underline;text-underline-offset:6px}
@media(max-width:600px){
  :root{--nav-height:100px}
  .site-nav{display:grid;grid-template-columns:1fr auto;grid-template-rows:48px 44px;align-content:center;align-items:center;padding:4px 14px;gap:0 12px;height:var(--nav-height)}
  .site-nav .nav-logo{grid-column:1;grid-row:1;transform:none;height:44px;align-self:center}
  .site-nav .nav-logo img{height:42px;margin-left:0}
  .site-nav .nav-tools{grid-column:2;grid-row:1;transform:none;height:44px;gap:8px}
  .site-nav .nav-tool{height:44px;padding:0 10px;font-size:11px;letter-spacing:.03em}
  .site-nav .nav-lang__btn{height:44px;min-width:34px;font-size:12px;padding:0 5px}
  .site-nav .nav-lang__bar{font-size:12px}
  .site-nav nav{grid-column:1/-1;grid-row:2;transform:none;width:100%;height:44px;padding:0;gap:12px;justify-content:space-between;align-items:stretch}
  .site-nav nav a{font-size:12px;letter-spacing:.05em;min-height:44px;padding:0 5px;justify-content:center}
  .ot__instruction{font-size:11px;line-height:1.5}
  .original-table .ot__instruction{left:auto;right:4%;width:52%;transform:none;word-break:keep-all;overflow-wrap:normal}
  .original-table .ot__counter{left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);font-size:12px}
}
@media(max-width:600px) and (max-height:500px) and (orientation:landscape){
  :root{--nav-height:56px}
  .site-nav{display:flex;grid-template-columns:none;grid-template-rows:none;align-items:center;gap:4px;padding:0 10px;height:var(--nav-height)}
  .site-nav .nav-logo{height:44px;min-width:42px}
  .site-nav .nav-logo img{height:34px}
  .site-nav nav{flex:1;width:auto;height:44px;padding:0;gap:0;justify-content:space-evenly}
  .site-nav nav a{font-size:10px;min-height:44px;padding:0 1px}
  .site-nav .nav-tools{height:44px;gap:2px}
  .site-nav .nav-tool{height:40px;min-height:40px;padding:0 5px;font-size:9px}
  .site-nav .nav-lang__btn{height:40px;min-width:28px;padding:0 2px;font-size:10px}
}
/* 2026-10-08 메뉴에 ONLY TVA 가 들어가 다섯 칸이 됐다. 휴대폰 둘째 줄에서 12px 간격을 없애고(남는 폭은 space-between 이 고르게 나눔)
   좌우 여백을 2px 로 줄인다. 400px 이하 폰은 글자도 한 단계(12→11px) 줄여 320px 에서도 다섯 칸이 잘리지 않게 한다. 누르는 높이 44px 는 그대로. */
@media(max-width:600px){
  .site-nav nav{gap:0}
  .site-nav nav a{padding:0 2px}
}
@media(max-width:400px){
  .site-nav nav a{font-size:11px;letter-spacing:.03em}
}