/* Archive Pro App — style.css
   Extracted verbatim from dungzaklab-site/archivepro/index.html (live production Archive Pro).
   Two original inline <style> blocks combined here in original cascade order:
   1) Tablet/filter UX layer  2) Main layout/component styles.
   NOTE: viewer.css is currently a placeholder — lightbox/viewer rules below
   are interleaved with grid/controls rules inside shared @media blocks in the
   original, so splitting them out risks breaking responsive behavior. See viewer.css. */

/* 2026-07-24 추가 (F5 새로고침 직후 레이아웃 어긋남 대응):
   이 스크롤바 자리 확보가 없으면, 첫 페인트 때는 아직 세로 스크롤바가
   없다가(짧은 문서) 작품이 채워지며 스크롤바가 나타나는 순간 콘텐츠
   폭이 스크롤바 두께(보통 15~17px)만큼 줄어들어 grid column-count·
   헤더·툴바 폭이 재계산된다 — "새로고침 직후엔 깨졌다가 리사이즈하면
   정상"인 증상과 정확히 일치하는 전형적인 원인이다. 처음부터 스크롤바
   자리를 고정 확보해 이 재계산 자체가 일어나지 않게 한다. 지원
   브라우저에서만 적용되고, 미지원 브라우저는 기존과 동일하게 동작한다. */
html{
  scrollbar-gutter: stable;
}

/* 2026-07-24 추가 (모바일 좌우 폭 이탈/가로 스크롤 방지):
   기존에 html/body 레벨의 overflow-x 안전장치가 전혀 없었다 — 특정
   요소가 실수로 뷰포트보다 넓어지면(고정 px 폭, 넘치는 텍스트 등)
   그대로 가로 스크롤이 생기고, 모바일에서는 이게 "전체 페이지가
   확대된 것처럼" 느껴지는 원인이 될 수 있다. 기존 레이아웃 크기는
   전혀 바꾸지 않고, 혹시 넘치는 것만 잘라내는 안전망이다. */
html, body{
  overflow-x: hidden;
  max-width: 100%;
}

/* ===================================================================
   Archive Pro — Filter UI (universal) + Tablet Layout (final pass)
   Two independent scopes in this one block:

   1) FILTER TOGGLE / COLLAPSE — plain, unscoped selectors below.
      Applies identically on iPhone, iPad, and Desktop: a single
      Filter ▼/▲ button shows/hides the Section/Sort/Search panel.
      Selected Section, Sort, search text, and language are untouched
      by collapsing — only #searchArea's own box is animated.

   2) TABLET-ONLY COSMETICS — every rule prefixed html.ap-tablet-ui
      (set in <head> from a 768px+ AND coarse/touch-pointer check).
      Grid column counts, card sizing, the LAB button, and the top
      stats format stay tablet-exclusive; Desktop and phone keep their
      existing look for these specific properties.
   =================================================================== */

.ap-filter-toggle{
  display:none;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  margin:0 0 12px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(212,180,109,.34);
  background:rgba(212,180,109,.045);
  color:#d4b46d;
  font-family:inherit;
  font-size:14px;
  font-weight:650;
  letter-spacing:.06em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease, border-color .2s ease, background-color .2s ease;
}
body.archive-entered .ap-filter-toggle{
  display:flex;
  order:4;
}
body:not(.archive-entered) .ap-filter-toggle{
  display:none !important;
}
.ap-filter-toggle:hover,
.ap-filter-toggle:focus-visible{
  opacity:.92;
  border-color:rgba(212,180,109,.56);
  background:rgba(212,180,109,.08);
  outline:none;
}
.ap-filter-toggle-arrow{
  display:inline-block;
  font-size:11px;
  line-height:1;
}

/* Collapsed / expanded Filter panel — animated with a CSS-only
   max-height + opacity transition (~0.22s, within the 0.2–0.25s spec)
   instead of a hard display:none toggle. Hero (KR/EN + stats) and the
   results grid are left untouched, so they simply move up and more
   artwork cards become visible. */
body.archive-entered #searchArea{
  overflow:hidden;
  max-height:560px;
  opacity:1;
  transition:max-height .22s ease, opacity .2s ease, padding .22s ease, margin .22s ease;
}
.ap-filter-collapsed body.archive-entered #searchArea{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  pointer-events:none;
}

/* Search icon inside the search input (placeholder text is untouched) */
.ap-search-input-wrap{
  position:relative;
  display:block;
}
.ap-search-input-wrap .ap-search-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  line-height:1;
  opacity:.6;
  pointer-events:none;
}
#searchArea .ap-search-input-wrap .input[type="search"]{
  padding-left:42px !important;
}

/* ---- Column rules: 768px→3 / 1100px→4 / 1600px→5, tablet-scoped ---- */
@media (min-width:768px) and (max-width:1099.98px){
  html.ap-tablet-ui .grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (min-width:1100px) and (max-width:1599.98px){
  html.ap-tablet-ui .grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media (min-width:1600px){
  html.ap-tablet-ui .grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}

/* ---- Card height trimmed ~7% (image aspect-ratio untouched) so one
   extra row fits on the first screen ---- */
html.ap-tablet-ui .grid{gap:11px}
html.ap-tablet-ui .card-body{padding:8px 10px 9px}
html.ap-tablet-ui .card-top{margin-bottom:5px}
html.ap-tablet-ui .title{margin-bottom:4px}

/* ---- LAB button ~12% smaller ---- */
html.ap-tablet-ui .lab-link-btn,
html.ap-tablet-ui .lab-external-open,
html.ap-tablet-ui #labExternalOpen{
  min-width:47px;
  height:33px;
  padding:0 11px;
  font-size:12px;
}

/* ---- Top stats: "Works · Sections" before a search, "Results" only
   once a search/filter is active — no redundant text either way ---- */
.ap-stats-tablet{display:none}
html.ap-tablet-ui .stats-inline{display:none}
html.ap-tablet-ui .ap-stats-tablet{
  display:block;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.02em;
}
html.ap-tablet-ui .ap-stats-tablet .ap-stats-tablet-results{display:none}
html.ap-tablet-ui .ap-stats-tablet.ap-has-results .ap-stats-tablet-default{display:none}
html.ap-tablet-ui .ap-stats-tablet.ap-has-results .ap-stats-tablet-results{display:inline}

html, body {
    background:#070A14 !important;
  }

  .entry-panel {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:28px 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    contain:layout paint;
  }

  #enterArchivePro,
  .critical-entry-btn {
    width:100%;
    max-width:100%;
    min-height:56px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(212,180,109,.52);
    color:#d4b46d;
    text-decoration:none;
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Segoe UI",Roboto,sans-serif;
    font-size:16px;
    line-height:1.5;
    letter-spacing:.04em;
    background:rgba(212,180,109,.08);
    box-shadow:none;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  @media (max-width:640px){
    .entry-panel{
      padding:14px;
    }
  }

    .visually-hidden{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0 0 0 0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }

    .section-nav,
    .section-nav-panel,
    .section-buttons,
    .section-nav-title{
      display:none !important;
    }

    .hero.hero-compressed{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      gap:10px !important;
      align-items:center !important;
      padding-top:10px !important;
      margin-top:0 !important;
    }

    .lang-inline{
      display:flex !important;
      align-items:center !important;
      gap:10px !important;
      padding:8px 12px !important;
      min-height:auto !important;
      background:transparent !important;
      border:1px solid rgba(212,180,109,.14) !important;
      border-radius:14px !important;
      box-shadow:none !important;
      contain:layout paint;
    }

    .lang-inline .lang-tabs{
      display:inline-flex !important;
      align-items:center !important;
      gap:8px !important;
      min-height:auto !important;
    }

    .lang-inline .lang-tab{
      min-height:34px !important;
      height:34px !important;
      padding:0 12px !important;
      font-size:12px !important;
      line-height:34px !important;
      border-radius:999px !important;
      white-space:nowrap !important;
    }

    .lang-inline .hero-mode-line{
      margin:0 !important;
      color:var(--muted) !important;
      font-size:12px !important;
      letter-spacing:.08em !important;
      text-transform:uppercase !important;
      white-space:nowrap !important;
    }

    .stats-inline{
      display:flex !important;
      align-items:center !important;
      justify-content:flex-end !important;
      gap:6px !important;
      padding:6px 12px !important;
      min-height:36px !important;
      color:rgba(244,239,230,.72) !important;
      font-size:14px !important;
      line-height:1.25 !important;
      border:1px solid rgba(212,180,109,.12) !important;
      border-radius:14px !important;
      background:transparent !important;
      box-shadow:none !important;
      white-space:nowrap !important;
      contain:layout paint;
    }

    .stats-inline #statTotal,
    .stats-inline #statFiltered,
    .stats-inline #statSections{
      color:var(--gold) !important;
      font-size:14px !important;
      font-weight:700 !important;
      line-height:1.25 !important;
      letter-spacing:.02em !important;
    }

    .controls{
      margin-top:10px !important;
      padding:10px !important;
      margin-bottom:10px !important;
      display:grid !important;
      grid-template-columns:minmax(280px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto !important;
      gap:10px !important;
      align-items:end !important;
    }

    .controls .field{gap:4px !important;}
    .controls .field label{
      font-size:10px !important;
      line-height:1 !important;
      opacity:.74 !important;
    }

    .controls .input,
    .controls .select,
    .controls .control-actions .btn{
      height:40px !important;
      min-height:40px !important;
      line-height:40px !important;
      border-radius:12px !important;
      font-size:13px !important;
    }

    .controls .input{padding:0 42px 0 12px !important;}
    .controls .select{padding:0 40px 0 12px !important;}

    .control-actions{
      display:flex !important;
      gap:8px !important;
      align-items:end !important;
      justify-content:flex-end !important;
    }

    .control-actions .btn{
      padding:0 12px !important;
      white-space:nowrap !important;
    }

    .meta-row{
      margin:10px 2px 8px !important;
    }

    #resultsMeta{
      margin-top:0px !important;
      margin-bottom:6px !important;
    }

    @media (max-width:1040px){
      .hero.hero-compressed{
        grid-template-columns:1fr !important;
      }
      .stats-inline{
        justify-content:flex-start !important;
        flex-wrap:wrap !important;
        white-space:normal !important;
      }
      .controls{
        grid-template-columns:1fr 1fr !important;
      }
      .controls .field:first-child,
      .control-actions{
        grid-column:1/-1 !important;
      }
      .control-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
      }
    }

    @media (max-width:640px){
      .hero.hero-compressed{
        gap:8px !important;
      }
      .lang-inline{
        flex-wrap:wrap !important;
        padding:8px 10px !important;
      }
      .lang-inline .hero-mode-line{
        width:100% !important;
      }
      .stats-inline{
        font-size:13px !important;
        padding:7px 10px !important;
      }
      .controls{
        grid-template-columns:1fr !important;
        padding:12px !important;
      }
      .control-actions{
        grid-column:auto !important;
        grid-template-columns:1fr 1fr !important;
      }
    }

    :root{
      --bg:#0b0f14;
      --panel:#101722;
      --line:rgba(212,180,109,.18);
      --line-strong:rgba(212,180,109,.34);
      --text:#f4efe6;
      --muted:rgba(244,239,230,.68);
      --soft:rgba(244,239,230,.48);
      --gold:#d4b46d;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --radius:18px;
      --max:1460px;
      --header-h:56px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Segoe UI",Roboto,sans-serif;
      min-height:100vh;
      line-height:1.5;
      letter-spacing:.01em;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,select{font:inherit}

    .site-bg{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(circle at 15% 20%, rgba(212,180,109,.08), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(98,129,175,.10), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(212,180,109,.06), transparent 34%),
        linear-gradient(180deg, #0a0e14 0%, #0b0f14 42%, #0c1018 100%);
    }

    .site-shell{
      position:relative;
      z-index:1;
      width:min(calc(100% - 28px), var(--max));
      margin:0 auto;
      padding:8px 0 44px;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      background:linear-gradient(180deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.72) 100%);
      border-bottom:1px solid rgba(255,255,255,.03);
    }

    .header-inner{
      width:min(calc(100% - 28px), var(--max));
      min-height:var(--header-h);
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:flex-start;
      padding:10px 0;
    }

    .brand-wrap{min-width:0}
    .eyebrow{
      margin:0 0 4px;
      color:var(--gold);
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brand-row{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      gap:10px 14px;
    }

    .brand-home-link{
      display:inline-flex;
      align-items:flex-end;
      color:inherit;
      text-decoration:none;
      border-radius:12px;
      transition:.18s ease;
    }

    .brand-home-link:hover h1{color:var(--gold)}

    .brand-row h1{
      margin:0;
      font-size:clamp(26px,4vw,42px);
      line-height:1;
      letter-spacing:.04em;
      font-weight:700;
      color:var(--text);
    }

    .brand-title-group{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }

    .brand-subtitle{
      margin:5px 0 24px;
      font-family:Georgia,"Times New Roman","Noto Serif KR",serif;
      font-size:clamp(15px,2.4vw,24px);
      line-height:1;
      letter-spacing:.14em;
      font-weight:500;
      color:var(--gold);
      opacity:.88;
      text-align:left;
    }

    @media (min-width:881px){
      .brand-subtitle{
        font-size:clamp(16px,2.5vw,25px);
      }
    }

    .subline{
      margin:0;
      color:var(--muted);
      font-size:13px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .back-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 14px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      color:var(--gold);
      background:rgba(212,180,109,.04);
      transition:.2s ease;
      white-space:nowrap;
    }

    .back-link:hover{
      border-color:rgba(212,180,109,.52);
      background:rgba(212,180,109,.08);
      transform:translateY(-1px);
    }
    .lab-link-btn,
    .lab-external-open,
    #labExternalOpen {
      background: transparent;
      color: #d6b76f;
      border: 1px solid rgba(214, 183, 111, 0.42);
      border-radius: 999px;

      min-width: 54px;
      height: 38px;

      padding: 0 14px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      box-shadow: none;
    }

    #labLink{
      margin-top:12px;
      padding-left:19px;
      padding-right:19px;
    }

    @media (max-width:640px){
      #labLink{
        margin-top:8px;
      }
    }

    .lab-link-btn:active,
    .lab-external-open:active,
    #labExternalOpen:active {
      opacity: 0.75;
    }

    .entry-layer{
      margin-top:18px;
      padding:18px;
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .entry-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 24px;
      border-radius:999px;
      border:1px solid rgba(212,180,109,.48);
      background:rgba(212,180,109,.08);
      color:var(--gold);
      cursor:pointer;
      transition:.2s ease;
      letter-spacing:.04em;
      white-space:pre-line;
    }

    .entry-btn:hover{
      transform:translateY(-1px);
      background:rgba(212,180,109,.12);
      border-color:rgba(212,180,109,.68);
      color:var(--text);
    }

    .hero{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:16px;
      padding-top:18px;
    }

    .panel{
      background:linear-gradient(180deg, rgba(19,28,41,.92), rgba(16,23,34,.90));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }

    .hero-card{
      padding:20px;
      min-height:148px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
    }

    .hero-topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }

    .lang-tabs{
      display:inline-flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .lang-tab{
      min-height:37px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      cursor:pointer;
      transition:.18s ease;
    }

    .lang-tab:hover{
      border-color:rgba(212,180,109,.34);
      color:var(--text);
    }

    .lang-tab.active{
      color:var(--gold);
      border-color:rgba(212,180,109,.52);
      background:rgba(212,180,109,.08);
      box-shadow:0 0 0 3px rgba(212,180,109,.06);
    }

    .hero-home-link{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(212,180,109,.28);
      background:rgba(212,180,109,.04);
      color:var(--gold);
      transition:.18s ease;
      white-space:nowrap;
    }

    .hero-home-link:hover{
      border-color:rgba(212,180,109,.52);
      background:rgba(212,180,109,.08);
      color:var(--text);
    }

    .hero-mode-line{
      margin:0;
      color:var(--muted);
      font-size:14px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      padding:18px;
    }

    .stat{
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.04);
      border-radius:16px;
      padding:16px 14px;
      min-height:96px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:4px;
    }

    .stat .k{
      font-size:12px;
      color:var(--soft);
      text-transform:uppercase;
      letter-spacing:.12em;
    }

    .stat .v{
      font-size:clamp(20px,3vw,32px);
      line-height:1;
      color:var(--gold);
      font-weight:700;
      letter-spacing:.02em;
    }

    .stat .d{
      font-size:12px;
      color:var(--muted);
    }

    .section-nav{
      margin-top:16px;
      padding:16px;
    }

    .section-nav-title{
      margin:0 0 12px;
      color:var(--soft);
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .section-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .section-btn{
      min-height:44px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      cursor:pointer;
      transition:.18s ease;
      white-space:pre-line;
      text-align:center;
    }

    .section-btn:hover{
      color:var(--text);
      border-color:rgba(212,180,109,.34);
      background:rgba(212,180,109,.06);
      transform:translateY(-1px);
    }

    .section-btn.active{
      color:var(--gold);
      border-color:rgba(212,180,109,.54);
      background:rgba(212,180,109,.10);
    }

    .controls{
      margin-top:16px;
      padding:16px;
      display:grid;
      grid-template-columns:1.3fr .9fr .9fr auto;
      gap:12px;
      align-items:end;
      scroll-margin-top:110px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:7px;
      min-width:0;
    }

    .field label{
      font-size:12px;
      color:var(--soft);
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .input,
    .select{
      width:100%;
      min-height:46px;
      padding:0 14px;
      color:var(--text);
      background:#0f1621;
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      outline:none;
      transition:.18s ease;
    }

    .input::placeholder{color:rgba(244,239,230,.42)}
    .input:focus,
    .select:focus{
      border-color:rgba(212,180,109,.55);
      box-shadow:0 0 0 4px rgba(212,180,109,.08);
    }

    .control-actions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }

    .btn{
      min-height:46px;
      padding:0 16px;
      border-radius:12px;
      border:1px solid var(--line-strong);
      background:rgba(212,180,109,.06);
      color:var(--gold);
      cursor:pointer;
      transition:.18s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
      background:rgba(212,180,109,.10);
      border-color:rgba(212,180,109,.58);
    }

    .btn.secondary{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.08);
    }

    .meta-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:16px 2px 10px;
      color:var(--muted);
      font-size:14px;
      flex-wrap:wrap;
    }

    .meta-left,
    .meta-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .meta-pill{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
      white-space:pre-line;
    }

    .status{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
    }

    .status.error{
      color:#ffb0b0;
      border-color:rgba(255,110,110,.28);
      background:rgba(255,110,110,.08);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin-top:6px;
    }

    .card{
      overflow:hidden;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(20,28,40,.92), rgba(13,18,27,.94));
      border:1px solid rgba(255,255,255,.05);
      box-shadow:0 14px 34px rgba(0,0,0,.26);
      transition:.22s ease;
      cursor:pointer;
      min-width:0;
    }

    .card:hover{
      transform:translateY(-3px);
      border-color:rgba(212,180,109,.22);
      box-shadow:0 18px 40px rgba(0,0,0,.34);
    }

    .thumb-wrap{
      position:relative;
      aspect-ratio:5/4;
      overflow:hidden;
      background:#0a0f16;
    }

    .thumb-wrap::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 50%, rgba(212,180,109,.08), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
      pointer-events:none;
    }

    .thumb{
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center center;
      transform:scale(1.001);
      transition:transform .45s ease, opacity .22s ease;
      opacity:0;
      background:#0a0f16;
    }

    .thumb.is-loaded,
    .thumb.is-error,
    .thumb.is-priority{
      opacity:1;
    }

    .thumb.is-error{
      object-fit:contain;
      padding:22%;
      filter:grayscale(.12) brightness(.88);
    }

    .card:hover .thumb{transform:scale(1.035)}

    .detail-hover{
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      z-index:3;
      min-height:36px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(212,180,109,.34);
      background:rgba(8,12,18,.68);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      color:var(--gold);
      font-size:12px;
      letter-spacing:.04em;
      text-align:center;
      opacity:0;
      transform:translateY(6px);
      transition:.2s ease;
      pointer-events:none;
      white-space:pre-line;
    }

    .card:hover .detail-hover,
    .card:focus-visible .detail-hover{
      opacity:1;
      transform:translateY(0);
    }

    .card-body{
      padding:12px 12px 13px;
      min-width:0;
    }

    .card-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:8px;
    }

    .work-id{
      color:var(--gold);
      font-size:12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      word-break:break-word;
    }

    .section-tag{
      flex:0 0 auto;
      font-size:11px;
      color:var(--soft);
      padding:3px 8px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:999px;
      background:rgba(255,255,255,.02);
      max-width:58%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .title{
      margin:0 0 6px;
      font-size:14px;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .title.empty{
      color:var(--muted);
      font-style:italic;
    }

    .caption{
      margin:0;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .empty-state{
      padding:38px 18px;
      border:1px dashed rgba(255,255,255,.08);
      border-radius:18px;
      text-align:center;
      color:var(--muted);
      background:rgba(255,255,255,.02);
    }

    .empty-state-line{
      margin:4px 0;
    }

    .load-wrap{
      display:flex;
      justify-content:center;
      padding:18px 0 8px;
    }
.lightbox{
      position:fixed;
      inset:0;
      z-index:120;
      display:none;
      background:rgba(6,10,14,.99);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      overflow:hidden;
      isolation:isolate;
    }

    .lightbox::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background:#060a0e;
      opacity:.98;
      pointer-events:none;
    }

    .lightbox.open,
    .lightbox.active{display:block}

    .lightbox-close{
      position:absolute;
      top:max(16px, env(safe-area-inset-top));
      right:max(16px, env(safe-area-inset-right));
      z-index:4;
      min-width:46px;
      min-height:46px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.26);
      color:var(--text);
      cursor:pointer;
      font-size:20px;
    }

    .lightbox-inner{
      position:absolute;
      inset:0;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,1fr) 380px;
      gap:0;
    }

    .lightbox-stage{
      position:relative;
      min-width:0;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:74px 22px 24px;
    }

    .lightbox-stage img{
      max-width:100%;
      max-height:calc(100vh - 110px);
      object-fit:contain;
      box-shadow:0 20px 60px rgba(0,0,0,.42);
      border-radius:8px;
      background:#091018;
    }

    .lightbox-side{
      border-left:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(18,26,38,1), rgba(12,18,27,1));
      padding:78px 22px 22px;
      overflow:auto;
    }

    .lightbox-side .lb-id{
      margin:0 0 8px;
      font-size:12px;
      color:var(--gold);
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .lightbox-side .lb-title{
      margin:0 0 10px;
      font-size:24px;
      line-height:1.2;
      word-break:keep-all;
    }

    /* VIEWER TITLE — KR+EN two-line layout (display only).
       KR 제목은 첫 줄·기존 시각적 우선순위 유지, EN 제목은 둘째 줄·약간 작은 크기.
       컬러/테마/여백 분위기는 변경하지 않는다. */
    .lb-title.lb-title--stacked{
      display:flex;
      flex-direction:column;
    }
    .lb-title.lb-title--stacked .lb-title-kr{
      display:block;
    }
    .lb-title.lb-title--stacked .lb-title-en{
      display:block;
      margin-top:.22em;
      font-size:.82em;
      line-height:1.25;
      opacity:.92;
    }

    .lightbox-side .lb-section{
      margin:0 0 18px;
      color:var(--muted);
      font-size:14px;
    }

    .lb-meta{
      display:grid;
      gap:10px;
      margin:0 0 20px;
    }

    .lb-row{
      display:grid;
      grid-template-columns:88px minmax(0,1fr);
      gap:10px;
      align-items:start;
      font-size:14px;
    }

    .lb-key{color:var(--soft)}
    .lb-val{color:var(--text);word-break:break-word}

    .lb-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:18px;
    }

    .lb-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid rgba(212,180,109,.34);
      background:rgba(212,180,109,.06);
      color:var(--gold);
      white-space:pre-line;
    }

    .loading-screen{
      padding:46px 18px;
      text-align:center;
      color:var(--muted);
    }

.controls{
  grid-template-columns:minmax(260px, 1.35fr) minmax(220px, .9fr) minmax(220px, .9fr) auto;
  align-items:end;
  gap:12px;
}
.field{position:relative;}
.input,.select{
  height:52px;
  min-height:52px;
  line-height:52px;
  border-radius:14px;
  background-color:#0c121b;
  border:1px solid rgba(244,239,230,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.input{padding:0 48px 0 16px;}
.field:first-child::after{
  content:"";
  position:absolute;
  right:17px;
  bottom:15px;
  width:15px;
  height:15px;
  border:2px solid rgba(244,239,230,.62);
  border-radius:50%;
  pointer-events:none;
}
.field:first-child::before{
  content:"";
  position:absolute;
  right:13px;
  bottom:13px;
  width:8px;
  height:2px;
  background:rgba(244,239,230,.62);
  transform:rotate(45deg);
  transform-origin:center;
  pointer-events:none;
  border-radius:99px;
}
.select{
  appearance:none;
  -webkit-appearance:none;
  padding:0 48px 0 16px;
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(244,239,230,.78) 50%),
    linear-gradient(135deg, rgba(244,239,230,.78) 50%, transparent 50%);
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 16px) 50%;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
}
.select option{color:#f4efe6;background:#0c121b;}
.input:hover,.select:hover{border-color:rgba(212,180,109,.34);background-color:#0e1621;}
.input:focus,.select:focus{
  border-color:rgba(212,180,109,.68);
  background-color:#0c121b;
  box-shadow:0 0 0 3px rgba(212,180,109,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.control-actions{
  display:grid;
  grid-template-columns:auto auto;
  gap:10px;
  align-items:end;
}
.control-actions .btn{
  height:52px;
  min-height:52px;
  border-radius:14px;
  white-space:nowrap;
}
@media (max-width:1040px){
  .controls{grid-template-columns:1fr 1fr;}
  .controls .field:first-child{grid-column:1/-1;}
  .control-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .controls{grid-template-columns:1fr;gap:11px;}
  .controls .field:first-child,.control-actions{grid-column:auto;}
  .control-actions{grid-template-columns:1fr 1fr;}
  .input,.select,.control-actions .btn{height:50px;min-height:50px;line-height:50px;}
}

.card,
.btn,
.section-btn,
.entry-btn,
.back-link,
.hero-home-link,
.lb-link,
.lang-tab,
.brand-home-link{
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(184,150,62,0.20);
}

.card,
.btn,
.section-btn,
.entry-btn,
.back-link,
.hero-home-link,
.lb-link,
.lang-tab,
.brand-home-link{
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  will-change:transform;
}

.card:hover,
.btn:hover,
.section-btn:hover,
.entry-btn:hover,
.back-link:hover,
.hero-home-link:hover,
.lb-link:hover,
.lang-tab:hover,
.brand-home-link:hover{
  transform:scale(1.01);
  border-color:rgba(184,150,62,0.42);
  box-shadow:0 0 12px rgba(184,150,62,0.25);
}

.card:active,
.btn:active,
.section-btn:active,
.entry-btn:active,
.back-link:active,
.hero-home-link:active,
.lb-link:active,
.lang-tab:active,
.brand-home-link:active{
  transform:scale(0.98);
  box-shadow:0 0 6px rgba(184,150,62,0.35);
}

.card:focus-visible,
.btn:focus-visible,
.section-btn:focus-visible,
.entry-btn:focus-visible,
.back-link:focus-visible,
.hero-home-link:focus-visible,
.lb-link:focus-visible,
.lang-tab:focus-visible,
.brand-home-link:focus-visible{
  outline:1px solid #B8963E;
  outline-offset:2px;
}

    .work-status {
      margin-top: 6px;
      font-size: 11px;
      color: #B8963E;
      opacity: 1;
    }

    .status-label {
      display: block;
      margin-bottom: 3px;
      color: #B8963E;
      opacity: 0.92;
      font-weight: 500;
    }

    .status-inquiry {
      display: inline-block;
      margin-top: 1px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #B8963E;
      text-decoration: none;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: 0.01em;
      opacity: 0.88;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(184,150,62,0.18);
      transition: opacity 0.14s ease, color 0.14s ease, text-decoration-color 0.14s ease;
    }

    .status-inquiry:hover,
    .status-inquiry:focus-visible {
      color: #D4B46D;
      opacity: 1;
      text-decoration: underline;
      text-underline-offset: 3px;
      outline: none;
    }

    .status-inquiry:active {
      opacity: 0.82;
    }

    @media (max-width:1180px){
      .hero{grid-template-columns:1fr}
      .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .lightbox-inner{grid-template-columns:1fr 340px}
    }

    @media (max-width:880px){
      .controls{grid-template-columns:1fr 1fr}
      .control-actions{
        grid-column:1/-1;
        justify-content:stretch;
      }
      .control-actions .btn{flex:1 1 0}
      .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .lightbox-inner{grid-template-columns:1fr}
      .lightbox-side{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.06);
        padding-top:22px;
      }
      .lightbox-stage{padding:74px 14px 14px}
      .lightbox-stage img{max-height:56vh}
    }

    @media (max-width:640px){
      .site-shell{width:min(calc(100% - 18px), var(--max))}
      .header-inner{width:min(calc(100% - 18px), var(--max))}
      .stats{grid-template-columns:1fr}
      .controls{grid-template-columns:1fr}
      .grid{gap:10px}
      .card-body{padding:10px 10px 12px}
      .title{font-size:13px}
      .caption{font-size:11px}
      .meta-row{font-size:13px}
      .back-link{min-height:42px;padding:0 12px}
      .hero-card{min-height:auto;padding:16px}
      .lang-tab{min-height:35px;padding:0 12px}
      .hero-home-link{min-height:40px;padding:0 12px}
      .hero-mode-line{font-size:13px}
      .lightbox-side .lb-title{font-size:20px}
      .lb-row{grid-template-columns:72px minmax(0,1fr)}
      .entry-layer{padding:14px}
      .entry-btn{width:100%}
      .section-buttons{display:grid;grid-template-columns:1fr 1fr}
      .section-btn{width:100%}
    }

    html,
    body{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
      touch-action:pan-y;
      overscroll-behavior-x:none;
    }

    body.viewer-open{
      overflow:hidden !important;
      touch-action:none;
      overscroll-behavior:none;
    }

    .archive-root,
    .app,
    .site-shell,
    main,
    .grid,
    .work-grid,
    .cards,
    .card{
      max-width:100%;
      overflow-x:hidden;
    }

    .card,
    .work-card,
    .card img,
    .work-card img,
    button,
    a{
      touch-action:manipulation;
    }

    .viewer,
    .lightbox,
    #viewer,
    #lightbox{
      touch-action:none;
      overscroll-behavior:none;
    }

    .viewer img,
    .lightbox img,
    #viewer img,
    #lightbox img{
      touch-action:none;
      user-select:none;
      -webkit-user-drag:none;
    }

    .lightbox-stage{
      overflow:hidden;
      touch-action:none;
      cursor:default;
    }

    .lightbox-stage img{
      will-change:transform;
      transform-origin:center center;
      transform:translate3d(0,0,0) scale(1);
      transition:transform .05s linear;
      user-select:none;
      -webkit-user-drag:none;
      touch-action:none;
    }

    body.viewer-open .lightbox-stage.is-zoomed{ cursor:grab; }
    body.viewer-open .lightbox-stage.is-zoomed.is-dragging{ cursor:grabbing; }

    html.viewer-open,
    body.viewer-open{
      overflow:hidden !important;
      width:100%;
      height:100%;
      overscroll-behavior:none;
    }

    @media (max-width:768px){
      .viewer,
      .lightbox,
      #viewer,
      #lightbox{
        position:fixed;
        inset:0;
        width:100vw;
        height:100dvh;
        overflow:hidden;
        background:#070A14;
      }

      .viewer-inner,
      .lightbox-inner{
        position:absolute;
        inset:0;
        height:100dvh;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:minmax(0,52dvh) minmax(0,48dvh);
        overflow:hidden;
      }

      .viewer-media,
      .lightbox-media,
      .lightbox-stage{
        position:relative;
        min-width:0;
        min-height:0;
        height:100%;
        padding:calc(env(safe-area-inset-top, 0px) + 58px) 18px 14px 18px;
        box-sizing:border-box;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        touch-action:none;
      }

      .viewer-media img,
      .lightbox-media img,
      .lightbox-stage img,
      #lightboxImage{
        width:100%;
        height:100%;
        max-width:100%;
        max-height:100%;
        object-fit:contain;
        display:block;
        border-radius:10px;
      }

      .viewer-close,
      .lightbox-close,
      .close-viewer,
      #lightboxClose{
        position:fixed;
        top:calc(env(safe-area-inset-top, 0px) + 18px);
        right:18px;
        z-index:9999;
        width:54px;
        height:54px;
        min-width:54px;
        min-height:54px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:rgba(7,10,20,.72);
        border:1px solid rgba(255,255,255,.18);
        color:#fff;
      }

      .viewer-caption,
      .lightbox-caption,
      .detail-panel,
      .lightbox-side{
        min-height:0;
        max-height:none;
        height:100%;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:28px 22px calc(env(safe-area-inset-bottom, 0px) + 96px) 22px;
        box-sizing:border-box;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.06);
        overflow-wrap:anywhere;
        word-break:break-word;
      }

      .detail-row.image-url,
      .detail-row.zoom-url,
      .meta-row.image-url,
      .meta-row.zoom-url,
      .lb-meta .lb-row:nth-child(4),
      .lb-meta .lb-row:nth-child(5){
        display:none;
      }
    }

    .viewer-close,
    .lightbox-close,
    .close-viewer,
    #viewerCloseBtn,
    #lightboxClose{
      pointer-events:auto;
    }

    @media (max-width:768px){
      .image-open-btn,
      .zoom-open-btn,
      .open-image-btn,
      .open-zoom-btn,
      #lbOpenImage,
      #lbOpenZoom,
      .lb-actions .lb-link{
        display:none !important;
      }

      .viewer-close,
      .lightbox-close,
      .close-viewer,
      #viewerCloseBtn,
      #lightboxClose{
        position:fixed !important;
        top:calc(env(safe-area-inset-top, 0px) + 16px) !important;
        right:16px !important;
        z-index:99999 !important;
        pointer-events:auto !important;
        touch-action:manipulation !important;
      }

      .viewer-media img,
      .lightbox-media img,
      .lightbox-stage img,
      #lightboxImage{
        pointer-events:none !important;
      }
    }

    .viewer,
    .lightbox,
    .viewer-inner,
    .lightbox-inner{
      pointer-events:auto;
    }

    #grid{ contain:layout paint style; }
    .card{ content-visibility:auto; contain-intrinsic-size:360px 520px; will-change:auto; }
    .thumb{ will-change:auto; }

    #loadingScreen{
      display:none !important;
    }

    .bio-panel {
      content-visibility:auto;
      contain-intrinsic-size:360px 520px;
    }

    @media (max-width:768px){
      header,
      .site-header,
      .glass,
      .panel,
      .modal,
      .bio-modal,
      .lightbox,
      .detail-hover{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }

      *:hover{
        transform:none !important;
        box-shadow:none !important;
      }
    }

    .entry-btn{
      transition:none !important;
      animation:none !important;
      will-change:auto !important;
    }

    #grid{
      contain:layout paint style;
    }

    .card{
      content-visibility:auto;
      contain-intrinsic-size:360px 520px;
      will-change:auto !important;
    }

    .thumb{
      will-change:auto !important;
    }

    @media (max-width:768px){
      .site-header,
      header,
      .panel,
      .lightbox,
      .detail-hover{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }

      .entry-btn,
      .card,
      .btn,
      .section-btn,
      .back-link,
      .hero-home-link,
      .lb-link,
      .lang-tab,
      .brand-home-link{
        transition:none !important;
        animation:none !important;
      }
    }

    body{
      overflow-anchor:none;
    }

    header,
    .site-header,
    .hero,
    .entry-layer,
    .entry-btn,
    .hero-card,
    .lang-tabs,
    .lang-tab,
    .stats,
    .stat,
    #statTotal,
    #statFiltered,
    #statSections,
    .entry-panel,
    .archive-entry,
    .archive-enter,
    .enter-archive,
    #archiveEntry,
    #enterArchive,
    #enterArchivePro,
    #entryBtn{
      opacity:1 !important;
      transform:none !important;
      translate:none !important;
      animation:none !important;
      transition:none !important;
      will-change:auto !important;
    }

    .hero,
    .site-shell,
    .main-panel,
    .panel,
    .card{
      animation:none !important;
      transition-property:border-color, background-color !important;
      transform:none !important;
    }

    main,
    .site-shell,
    .stats{
      contain:layout paint;
    }

    .stat{
      min-height:128px;
    }

    .entry-layer,
    .entry-panel,
    .archive-entry-wrap{
      min-height:84px;
      contain:layout paint;
    }

    #entryBtn,
    #enterArchive,
    #enterArchivePro,
    .archive-enter{
      min-height:56px;
    }

    html,
    body{
      background:#070A14 !important;
    }

    body{
      overflow-anchor:none;
    }

    header,
    .site-header,
    .header-inner,
    .brand-wrap,
    .brand-row,
    .hero,
    .archive-shell,
    .archive-top,
    .entry-panel,
    .entry-layer,
    .archive-entry,
    .archive-entry-wrap,
    .archive-enter,
    .enter-archive,
    .entry-btn,
    #archiveEntry,
    #enterArchive,
    #enterArchivePro,
    #entryBtn,
    .lang-panel,
    .hero-card,
    .hero-topbar,
    .lang-tabs,
    .lang-tab,
    .stats-panel,
    .stats,
    .stat-card,
    .stat,
    #statTotal,
    #statFiltered,
    #statSections{
      opacity:1 !important;
      transform:none !important;
      translate:none !important;
      filter:none !important;
      visibility:visible !important;
      animation:none !important;
      transition:none !important;
      transition-delay:0s !important;
      animation-delay:0s !important;
      will-change:auto !important;
    }

    .entry-layer,
    .entry-panel,
    .archive-entry-wrap,
    .archive-entry{
      min-height:84px;
      contain:layout paint;
    }

    #entryBtn,
    #enterArchive,
    #enterArchivePro,
    .archive-enter,
    .entry-btn{
      min-height:56px;
    }

    .hero,
    .hero-card,
    .stats,
    .stats-panel,
    main,
    .site-shell,
    .archive-shell{
      contain:layout paint;
    }

    .stat,
    .stat-card{
      min-height:128px;
    }

    #criticalEntry,
    .critical-entry,
    #enterArchivePro,
    .critical-entry-btn{
      opacity:1 !important;
      transform:none !important;
      translate:none !important;
      filter:none !important;
      visibility:visible !important;
      animation:none !important;
      transition:none !important;
      transition-delay:0s !important;
      animation-delay:0s !important;
      will-change:auto !important;
    }

    .entry-layer.archive-entry-wrap{
      min-height:84px;
      contain:layout paint;
    }

    #archiveWorks{
      display:block;
      scroll-margin-top:110px;
    }

    body{
      overflow-anchor:none;
    }

    .entry-panel,
    .archive-entry,
    .archive-enter,
    #enterArchivePro{
      opacity:1 !important;
      transform:none !important;
      translate:none !important;
      filter:none !important;
      visibility:visible !important;
      animation:none !important;
      transition:none !important;
      transition-delay:0s !important;
      animation-delay:0s !important;
      will-change:auto !important;
    }

    .entry-panel{
      min-height:84px;
      contain:layout paint;
    }

    .hero-card,
    .lang-tabs{
      min-height:132px;
    }

    .stat,
    .stat-card{
      min-height:128px;
    }

    .site-shell,
    .entry-panel,
    .stats,
    .stats-panel{
      contain:layout paint;
    }

    .entry-panel{
      padding:18px 24px !important;
      min-height:auto !important;
      border-color:rgba(212,180,109,.22) !important;
    }

    #enterArchivePro,
    .archive-enter,
    .critical-entry-btn{
      min-height:48px !important;
      height:auto !important;
      box-sizing:border-box;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.48) !important;
      font-size:20px !important;
      line-height:1.4 !important;
      text-align:center !important;
      white-space:pre-line !important;
      padding:6px 18px !important;
    }

    @media (max-width:640px){
      .entry-panel{
        padding:14px !important;
      }

      #enterArchivePro,
      .archive-enter,
      .critical-entry-btn{
        font-size:18px !important;
      }
    }

    .entry-panel{
      border:1px solid rgba(212,180,109,0.18) !important;
      background:transparent !important;
      padding:20px 24px !important;
    }

    #enterArchivePro{
      border:1px solid rgba(212,180,109,0.48) !important;
      min-height:48px !important;
    }

    @media (max-width:768px){

      .stats-panel,
      .stats{
        padding:18px 18px !important;
        gap:12px !important;
      }

      .stat-card,
      .stat{
        min-height:84px !important;
        padding:18px 20px !important;
      }

      .stat-card .value,
      .stat .v,
      #totalCount,
      #filteredCount,
      #sectionCount,
      #statTotal,
      #statFiltered,
      #statSections{
        font-size:28px !important;
        line-height:1 !important;
      }

      .section-nav-panel,
      .section-nav{
        padding:18px 18px !important;
      }

      .section-nav .section-buttons,
      .section-buttons{
        gap:10px !important;
      }

      .section-nav button,
      .section-btn{
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        font-size:14px !important;
        line-height:1.15 !important;
        padding:0 10px !important;
      }

      .search-panel,
      .controls{
        padding:18px 18px !important;
      }

      .search-panel input,
      .search-panel select,
      .controls input,
      .controls select,
      .input,
      .select{
        height:54px !important;
        min-height:54px !important;
        font-size:16px !important;
      }

      .search-actions button,
      .control-actions button,
      .control-actions .btn{
        height:52px !important;
        min-height:52px !important;
      }

    }

    .lightbox-nav{
      display:none !important;
    }

    @media (min-width:881px){
      .lightbox-inner{
        grid-template-columns:minmax(0, 1fr) 380px !important;
      }

      .lightbox-stage{
        position:relative !important;
        min-width:0 !important;
        min-height:0 !important;
        width:100% !important;
        height:100vh !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:74px 110px 42px 110px !important;
        overflow:hidden !important;
        contain:layout paint size !important;
      }

      .lightbox-stage img,
      #lightboxImage{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:min(calc(100vw - 380px - 260px), 880px) !important;
        max-height:calc(100vh - 160px) !important;
        object-fit:contain !important;
        /* 2026-07-24 제거: transform/transition을 scale(1)·none으로
           강제 고정하던 !important 규칙이 viewer.js의 마우스 휠 확대
           기능을 완전히 무력화시키고 있었음(내부 scale 값은 바뀌어
           커서는 손모양으로 변하지만 실제 이미지는 절대 확대되지
           않던 원인). transform-origin만 유지하고 나머지는 JS
           인라인 스타일이 그대로 제어하도록 둔다. */
        transform-origin:center center !important;
      }

      #lightboxImage.is-loading{
        opacity:0 !important;
      }

      #lightboxImage.is-ready{
        opacity:1 !important;
      }

      .lightbox.open .lightbox-nav,
      .lightbox.active .lightbox-nav{
        display:flex !important;
        position:fixed !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        z-index:10020 !important;
        width:52px !important;
        height:72px !important;
        min-width:52px !important;
        min-height:72px !important;
        border-radius:999px !important;
        border:1px solid rgba(212,180,109,.30) !important;
        background:rgba(7,10,20,.58) !important;
        color:var(--gold) !important;
        font-size:34px !important;
        line-height:1 !important;
        align-items:center !important;
        justify-content:center !important;
        cursor:pointer !important;
        -webkit-tap-highlight-color:transparent !important;
        backdrop-filter:blur(6px) !important;
        -webkit-backdrop-filter:blur(6px) !important;
        box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
        opacity:.86 !important;
        transition:opacity .16s ease, border-color .16s ease, background .16s ease !important;
        touch-action:manipulation !important;
      }

      .lightbox.open .lightbox-nav:hover,
      .lightbox.active .lightbox-nav:hover{
        opacity:1 !important;
        border-color:rgba(212,180,109,.56) !important;
        background:rgba(7,10,20,.76) !important;
        transform:translateY(-50%) !important;
        box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
      }

      .lightbox-prev{
        left:calc(28px + env(safe-area-inset-left, 0px)) !important;
      }

      .lightbox-next{
        right:calc(380px + 28px + env(safe-area-inset-right, 0px)) !important;
      }
    }

    @media (min-width:881px) and (max-width:1180px){
      .lightbox-inner{
        grid-template-columns:minmax(0, 1fr) 340px !important;
      }

      .lightbox-stage{
        padding:74px 96px 38px 96px !important;
      }

      .lightbox-stage img,
      #lightboxImage{
        max-width:min(calc(100vw - 340px - 230px), 760px) !important;
        max-height:calc(100vh - 160px) !important;
      }

      .lightbox-next{
        right:calc(340px + 24px + env(safe-area-inset-right, 0px)) !important;
      }

      .lightbox-prev{
        left:calc(24px + env(safe-area-inset-left, 0px)) !important;
      }
    }

    @media (min-width:881px) and (max-width:1020px){
      .lightbox-stage{
        padding:74px 82px 36px 82px !important;
      }

      .lightbox-stage img,
      #lightboxImage{
        max-width:calc(100vw - 340px - 190px) !important;
        max-height:calc(100vh - 165px) !important;
      }
    }

    @media (max-width:880px){
      .lightbox-nav{
        display:none !important;
      }
    }

    body:not(.archive-entered) #searchArea,
    body:not(.archive-entered) .archive-source-meta,
    body:not(.archive-entered) #archiveMain,
    body:not(.archive-entered) #filterToggleWrap{
      display:none !important;
    }

    body:not(.archive-entered) .hero{
      display:flex !important;
      justify-content:flex-start !important;
      align-items:center !important;
      padding-top:18px !important;
      margin-bottom:0 !important;
    }

    body:not(.archive-entered) .hero .stats-inline,
    body:not(.archive-entered) .hero .hero-home-link{
      display:none !important;
    }

    body.archive-entered .archive-entry-wrap{
      display:none !important;
    }

    body.archive-entered .site-shell{
      display:flex;
      flex-direction:column;
    }

    body.archive-entered #archiveMain{
      display:flex;
      flex-direction:column;
      order:1;
    }

    body.archive-entered #grid{order:1;}
    body.archive-entered #resultsMeta{order:2;}
    body.archive-entered #emptyState{order:3;}
    body.archive-entered #loadWrap{order:4;}
body.archive-entered #filterToggleWrap{
      display:flex;
      justify-content:center;
      order:2;
      margin:10px 0 8px;
    }

    body.archive-entered .hero{order:3;}
    body.archive-entered #searchArea{order:4;}
    body.archive-entered .archive-source-meta{order:5;}

    body.archive-entered:not(.archive-filter-open) .hero,
    body.archive-entered:not(.archive-filter-open) #searchArea,
    body.archive-entered:not(.archive-filter-open) .archive-source-meta{
      display:none !important;
    }

    body.archive-entered.archive-filter-open .hero,
    body.archive-entered.archive-filter-open #searchArea,
    body.archive-entered.archive-filter-open .archive-source-meta{
      display:grid !important;
    }

    body.archive-entered.archive-filter-open .archive-source-meta{
      display:flex !important;
      opacity:.78;
    }

    #filterToggleBtn{
      min-height:40px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(212,180,109,.34);
      background:rgba(212,180,109,.045);
      color:var(--gold);
      cursor:pointer;
      letter-spacing:.06em;
      transition:opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease !important;
      transform:none !important;
      box-shadow:none !important;
      white-space:pre-line;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:active,
    #filterToggleBtn:focus-visible{
      transform:none !important;
      box-shadow:none !important;
      opacity:.92;
      border-color:rgba(212,180,109,.56);
      background:rgba(212,180,109,.08);
      outline:none;
    }

    body.archive-entered .card,
    body.archive-entered .btn,
    body.archive-entered .section-btn,
    body.archive-entered .entry-btn,
    body.archive-entered .back-link,
    body.archive-entered .hero-home-link,
    body.archive-entered .lb-link,
    body.archive-entered .lang-tab,
    body.archive-entered .brand-home-link,
    body.archive-entered #filterToggleBtn{
      transition:opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease !important;
      transform:none !important;
      box-shadow:none !important;
      will-change:auto !important;
    }

    body.archive-entered .card:hover,
    body.archive-entered .btn:hover,
    body.archive-entered .section-btn:hover,
    body.archive-entered .entry-btn:hover,
    body.archive-entered .back-link:hover,
    body.archive-entered .hero-home-link:hover,
    body.archive-entered .lb-link:hover,
    body.archive-entered .lang-tab:hover,
    body.archive-entered .brand-home-link:hover{
      transform:none !important;
      box-shadow:none !important;
    }

    body.archive-entered .card:hover .thumb{
      transform:scale(1.001) !important;
    }

    body.archive-entered #activeFilterText:empty,
    body.archive-entered #renderedText:empty,
    body.archive-entered #resultText:empty{
      display:none !important;
    }

    @media (max-width:640px){
      #filterToggleBtn{
        width:100%;
        min-height:42px;
      }
    }

    .brand-row h1{
      color:rgba(212,180,109,.94) !important;
      text-shadow:0 0 18px rgba(212,180,109,.16), 0 0 34px rgba(78,110,164,.10) !important;
    }

    .brand-home-link:hover h1{
      color:#d4b46d !important;
      text-shadow:0 0 20px rgba(212,180,109,.22), 0 0 38px rgba(78,110,164,.12) !important;
    }

    body:not(.archive-entered) .lang-inline{
      width:100% !important;
      justify-content:flex-start !important;
      border-color:rgba(212,180,109,.18) !important;
      background:rgba(12,18,27,.20) !important;
    }

    body:not(.archive-entered) .entry-layer{
      margin-top:12px !important;
    }

    #enterArchivePro{
      color:#d4b46d !important;
    }

    .lang-inline{
      padding:12px 16px !important;
      border:1px solid rgba(212,180,109,.26) !important;
      border-radius:18px !important;
      background:linear-gradient(180deg, rgba(17,28,44,.48), rgba(9,15,25,.36)) !important;
      box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02) !important;
    }

    .lang-inline .lang-tabs{
      gap:10px !important;
    }

    .lang-inline .lang-tab{
      min-height:44px !important;
      height:44px !important;
      padding:0 18px !important;
      font-size:14px !important;
      line-height:44px !important;
      font-weight:700 !important;
      letter-spacing:.08em !important;
      color:rgba(212,180,109,.78) !important;
      border:1px solid rgba(212,180,109,.30) !important;
      background:rgba(212,180,109,.055) !important;
      border-radius:999px !important;
      box-shadow:none !important;
      transform:none !important;
    }

    .lang-inline .lang-tab.active{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.72) !important;
      background:rgba(212,180,109,.16) !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 0 18px rgba(212,180,109,.20) !important;
    }

    .lang-inline .lang-tab:hover,
    .lang-inline .lang-tab:focus-visible{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.62) !important;
      background:rgba(212,180,109,.13) !important;
      box-shadow:0 0 16px rgba(212,180,109,.16) !important;
      outline:none !important;
      transform:none !important;
    }

    body:not(.archive-entered) .lang-inline{
      width:100% !important;
      justify-content:flex-start !important;
      padding:14px 18px !important;
      border-color:rgba(212,180,109,.30) !important;
      background:linear-gradient(180deg, rgba(17,28,44,.56), rgba(9,15,25,.40)) !important;
    }

    body:not(.archive-entered) .lang-inline .lang-tab{
      min-height:48px !important;
      height:48px !important;
      padding:0 22px !important;
      font-size:15px !important;
      line-height:48px !important;
    }

    #loadMoreBtn{
      min-height:34px !important;
      height:34px !important;
      padding:0 13px !important;
      font-size:12px !important;
      line-height:34px !important;
      font-weight:500 !important;
      letter-spacing:.07em !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.22) !important;
      background:rgba(212,180,109,.035) !important;
      color:rgba(212,180,109,.72) !important;
      box-shadow:none !important;
      transform:none !important;
    }

    #loadMoreBtn:hover,
    #loadMoreBtn:focus-visible{
      color:rgba(212,180,109,.92) !important;
      border-color:rgba(212,180,109,.38) !important;
      background:rgba(212,180,109,.065) !important;
      box-shadow:none !important;
      transform:none !important;
      outline:none !important;
    }

    #filterToggleWrap{
      margin:16px 0 10px !important;
    }

    #filterToggleBtn{
      min-height:58px !important;
      padding:0 32px !important;
      font-size:17px !important;
      line-height:58px !important;
      font-weight:800 !important;
      letter-spacing:.075em !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.72) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.18), rgba(212,180,109,.10)) !important;
      color:#d4b46d !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 0 22px rgba(212,180,109,.22), 0 14px 30px rgba(0,0,0,.24) !important;
      transform:none !important;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:focus-visible{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.92) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.25), rgba(212,180,109,.14)) !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.12), 0 0 30px rgba(212,180,109,.34), 0 16px 34px rgba(0,0,0,.28) !important;
      outline:none !important;
      transform:none !important;
    }

    @media (max-width:640px){
      .lang-inline{
        padding:12px !important;
      }

      .lang-inline .lang-tabs{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 1fr 1.15fr !important;
        gap:8px !important;
      }

      .lang-inline .lang-tab,
      body:not(.archive-entered) .lang-inline .lang-tab{
        width:100% !important;
        min-height:44px !important;
        height:44px !important;
        padding:0 8px !important;
        font-size:13px !important;
        line-height:44px !important;
      }

      #filterToggleBtn{
        width:100% !important;
        min-height:56px !important;
        line-height:56px !important;
        font-size:16px !important;
      }

      #loadMoreBtn{
        min-height:34px !important;
        height:34px !important;
        line-height:34px !important;
      }
    }

    .brand-row{
      align-items:center !important;
      gap:12px 14px !important;
    }

    .brand-home-link{
      position:relative !important;
      align-items:center !important;
      padding:6px 10px 7px 0 !important;
      border-radius:16px !important;
      transition:opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease !important;
      transform:none !important;
      box-shadow:none !important;
    }

    .brand-home-link h1{
      color:rgba(212,180,109,.96) !important;
      text-shadow:0 0 18px rgba(212,180,109,.18), 0 0 36px rgba(78,110,164,.12) !important;
    }

    .brand-home-link:hover,
    .brand-home-link:focus-visible{
      background:rgba(212,180,109,.045) !important;
      outline:none !important;
      transform:none !important;
      box-shadow:none !important;
    }

    .brand-home-link:hover h1,
    .brand-home-link:focus-visible h1{
      color:#d4b46d !important;
      text-shadow:0 0 22px rgba(212,180,109,.26), 0 0 42px rgba(78,110,164,.16) !important;
    }

    .subline{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      min-height:34px !important;
      padding:0 13px !important;
      border-radius:999px !important;
      border:1px solid rgba(88,126,185,.24) !important;
      background:linear-gradient(180deg, rgba(78,110,164,.16), rgba(12,18,27,.08)) !important;
      color:rgba(244,239,230,.78) !important;
      font-size:12px !important;
      font-weight:700 !important;
      letter-spacing:.075em !important;
      text-transform:uppercase !important;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important;
      white-space:nowrap !important;
    }

    .subline::before{
      content:"";
      display:inline-block;
      width:7px;
      height:7px;
      margin-right:9px;
      border-radius:50%;
      background:#d4b46d;
      box-shadow:0 0 12px rgba(212,180,109,.42);
      opacity:.9;
    }

    @media (max-width:760px){
      .brand-row{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:8px !important;
      }

      .brand-home-link{
        padding-right:0 !important;
      }

      .subline{
        min-height:32px !important;
        padding:0 11px !important;
        font-size:10px !important;
        letter-spacing:.055em !important;
        white-space:normal !important;
        text-align:left !important;
        justify-content:flex-start !important;
      }
    }

    body.archive-entered #loadWrap{
      order:4;
      padding:24px 0 30px !important;
      margin:0 !important;
      position:relative;
    }

    body.archive-entered #loadWrap::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:4px;
      width:min(420px, 42vw);
      height:1px;
      transform:translateX(-50%);
      background:linear-gradient(90deg, transparent, rgba(212,180,109,.16), transparent);
      pointer-events:none;
    }

    #loadMoreBtn{
      min-height:42px !important;
      height:42px !important;
      padding:0 24px !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.28) !important;
      background:rgba(212,180,109,.025) !important;
      color:rgba(244,239,230,.76) !important;
      font-size:13px !important;
      font-weight:600 !important;
      line-height:42px !important;
      letter-spacing:.055em !important;
      box-shadow:none !important;
      transform:none !important;
      opacity:.92 !important;
    }

    #loadMoreBtn:hover,
    #loadMoreBtn:focus-visible{
      color:rgba(212,180,109,.92) !important;
      border-color:rgba(212,180,109,.46) !important;
      background:rgba(212,180,109,.055) !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.05) !important;
      transform:none !important;
      outline:none !important;
    }

    body.archive-entered #filterToggleWrap{
      margin:18px 0 14px !important;
      padding:0 0 10px !important;
      display:flex !important;
      justify-content:center !important;
      align-items:center !important;
    }

    #filterToggleBtn{
      min-height:60px !important;
      height:auto !important;
      padding:0 42px !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.62) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.18), rgba(212,180,109,.075)) !important;
      color:#d4b46d !important;
      font-size:18px !important;
      font-weight:750 !important;
      line-height:1.2 !important;
      letter-spacing:.07em !important;
      box-shadow:
        0 0 0 1px rgba(212,180,109,.07),
        0 12px 34px rgba(0,0,0,.24),
        0 0 26px rgba(212,180,109,.16) !important;
      transform:none !important;
      opacity:1 !important;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:focus-visible{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.82) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.24), rgba(212,180,109,.105)) !important;
      box-shadow:
        0 0 0 1px rgba(212,180,109,.12),
        0 14px 38px rgba(0,0,0,.28),
        0 0 34px rgba(212,180,109,.24) !important;
      transform:none !important;
      outline:none !important;
    }

    #filterToggleBtn:active{
      color:#d4b46d !important;
      background:linear-gradient(180deg, rgba(212,180,109,.14), rgba(212,180,109,.065)) !important;
      box-shadow:
        0 0 0 1px rgba(212,180,109,.07),
        0 8px 22px rgba(0,0,0,.22),
        0 0 18px rgba(212,180,109,.14) !important;
      transform:none !important;
    }
@media (max-width:640px){
      body.archive-entered #loadWrap{
        padding:22px 0 28px !important;
      }

      body.archive-entered #loadWrap::after{
        width:76vw;
      }

      #loadMoreBtn{
        min-height:40px !important;
        height:40px !important;
        line-height:40px !important;
        padding:0 22px !important;
        font-size:13px !important;
      }

      body.archive-entered #filterToggleWrap{
        margin:16px 0 12px !important;
      }

      #filterToggleBtn{
        width:100% !important;
        min-height:58px !important;
        padding:0 26px !important;
        font-size:17px !important;
      }
    }

    #filterToggleBtn{
      min-height:58px !important;
      padding:0 34px !important;
      font-size:17px !important;
      line-height:58px !important;
      font-weight:800 !important;
      letter-spacing:.12em !important;
      text-transform:uppercase !important;
      border-radius:10px !important;
      border:1px solid rgba(212,180,109,.74) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.18), rgba(212,180,109,.085)) !important;
      color:#d4b46d !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 8px 22px rgba(0,0,0,.32), 0 0 20px rgba(212,180,109,.16) !important;
      transform:none !important;
      white-space:pre-line !important;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:focus-visible,
    #filterToggleBtn:active{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.94) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.25), rgba(212,180,109,.13)) !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.12), 0 10px 26px rgba(0,0,0,.34), 0 0 28px rgba(212,180,109,.28) !important;
      transform:none !important;
      outline:none !important;
    }

    #loadMoreBtn{
      min-height:38px !important;
      height:38px !important;
      padding:0 18px !important;
      font-size:12px !important;
      line-height:38px !important;
      font-weight:600 !important;
      letter-spacing:.08em !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.26) !important;
      background:rgba(212,180,109,.045) !important;
      color:rgba(212,180,109,.78) !important;
      box-shadow:none !important;
      transform:none !important;
    }

    #loadMoreBtn:hover,
    #loadMoreBtn:focus-visible,
    #loadMoreBtn:active{
      color:rgba(212,180,109,.96) !important;
      border-color:rgba(212,180,109,.44) !important;
      background:rgba(212,180,109,.075) !important;
      box-shadow:none !important;
      transform:none !important;
      outline:none !important;
    }

    @media (max-width:640px){
      #filterToggleBtn{
        width:100% !important;
        min-height:56px !important;
        line-height:56px !important;
        padding:0 20px !important;
        font-size:15px !important;
        letter-spacing:.105em !important;
        border-radius:10px !important;
      }

      #loadMoreBtn{
        min-height:38px !important;
        height:38px !important;
        line-height:38px !important;
      }
    }

    body.archive-entered.archive-filter-open #searchArea.controls{
      padding:16px !important;
      gap:14px !important;
      grid-template-columns:minmax(300px,1.45fr) minmax(230px,.9fr) minmax(230px,.9fr) auto !important;
      align-items:end !important;
    }

    body.archive-entered.archive-filter-open #searchArea .field{
      gap:7px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .field label{
      font-size:12px !important;
      line-height:1 !important;
      letter-spacing:.12em !important;
      opacity:.82 !important;
    }

    body.archive-entered.archive-filter-open #searchArea .input,
    body.archive-entered.archive-filter-open #searchArea .select{
      height:58px !important;
      min-height:58px !important;
      line-height:58px !important;
      font-size:15px !important;
      border-radius:15px !important;
      padding-top:0 !important;
      padding-bottom:0 !important;
    }

    body.archive-entered.archive-filter-open #searchArea .input{
      padding-left:16px !important;
      padding-right:52px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .select{
      padding-left:16px !important;
      padding-right:52px !important;
      background-position:calc(100% - 26px) 50%, calc(100% - 18px) 50% !important;
      background-size:8px 8px, 8px 8px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .input::placeholder{
      font-size:15px !important;
      opacity:.66 !important;
    }

    body.archive-entered.archive-filter-open #searchArea .control-actions{
      gap:10px !important;
      align-items:end !important;
    }

    body.archive-entered.archive-filter-open #searchArea .control-actions .btn{
      height:58px !important;
      min-height:58px !important;
      line-height:58px !important;
      font-size:15px !important;
      font-weight:650 !important;
      border-radius:15px !important;
      padding:0 16px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .field:first-child::after{
      right:22px !important;
      bottom:18px !important;
      width:18px !important;
      height:18px !important;
      border-width:2px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .field:first-child::before{
      right:17px !important;
      bottom:16px !important;
      width:9px !important;
      height:2px !important;
    }

    @media (max-width:1040px){
      body.archive-entered.archive-filter-open #searchArea.controls{
        grid-template-columns:1fr 1fr !important;
      }
      body.archive-entered.archive-filter-open #searchArea .field:first-child,
      body.archive-entered.archive-filter-open #searchArea .control-actions{
        grid-column:1/-1 !important;
      }
      body.archive-entered.archive-filter-open #searchArea .control-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
      }
    }

    @media (max-width:640px){
      body.archive-entered.archive-filter-open #searchArea.controls{
        grid-template-columns:1fr !important;
        padding:14px !important;
        gap:12px !important;
      }
      body.archive-entered.archive-filter-open #searchArea .field:first-child,
      body.archive-entered.archive-filter-open #searchArea .control-actions{
        grid-column:auto !important;
      }
      body.archive-entered.archive-filter-open #searchArea .input,
      body.archive-entered.archive-filter-open #searchArea .select,
      body.archive-entered.archive-filter-open #searchArea .control-actions .btn{
        height:56px !important;
        min-height:56px !important;
        line-height:56px !important;
        font-size:15px !important;
      }
    }

    .brand-row h1,
    .brand-home-link h1{
      font-size:clamp(22px, 3.2vw, 34px) !important;
      font-weight:500 !important;
      letter-spacing:.085em !important;
      line-height:1.04 !important;
      color:rgba(212,180,109,.94) !important;
      text-shadow:0 0 14px rgba(212,180,109,.14), 0 0 30px rgba(78,110,164,.10) !important;
    }

    .brand-home-link:hover h1,
    .brand-home-link:focus-visible h1{
      color:#d4b46d !important;
      text-shadow:0 0 18px rgba(212,180,109,.20), 0 0 34px rgba(78,110,164,.12) !important;
    }

    body.archive-entered #filterToggleWrap{
      margin:20px 0 16px !important;
      padding:0 0 12px !important;
    }

    #filterToggleBtn{
      width:min(460px, 92%) !important;
      min-height:72px !important;
      height:auto !important;
      padding:10px 30px !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:center !important;
      gap:4px !important;
      border-radius:12px !important;
      border:1px solid rgba(212,180,109,.78) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.22), rgba(212,180,109,.12)) !important;
      color:#d4b46d !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 18px 42px rgba(0,0,0,.28), 0 0 26px rgba(212,180,109,.18) !important;
      transform:none !important;
      cursor:pointer !important;
      white-space:normal !important;
      line-height:1.18 !important;
    }

    #filterToggleBtn .cta-main{
      display:block !important;
      font-size:18px !important;
      font-weight:800 !important;
      letter-spacing:.14em !important;
      line-height:1.15 !important;
      text-transform:uppercase !important;
    }

    #filterToggleBtn .cta-sub{
      display:block !important;
      font-size:11px !important;
      font-weight:700 !important;
      letter-spacing:.18em !important;
      line-height:1 !important;
      opacity:.66 !important;
      text-transform:uppercase !important;
      color:rgba(244,239,230,.68) !important;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:focus-visible{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.94) !important;
      background:linear-gradient(180deg, rgba(212,180,109,.27), rgba(212,180,109,.145)) !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.12), 0 20px 44px rgba(0,0,0,.30), 0 0 34px rgba(212,180,109,.26) !important;
      outline:none !important;
      transform:none !important;
    }

    #filterToggleBtn:hover .cta-sub,
    #filterToggleBtn:focus-visible .cta-sub{
      opacity:.86 !important;
      color:rgba(244,239,230,.82) !important;
    }

    #filterToggleBtn.glow-once{
      animation:filterGlowOnce .22s ease-out 1 !important;
    }

    @keyframes filterGlowOnce{
      0%{
        opacity:.94;
        box-shadow:0 0 0 1px rgba(212,180,109,.06), 0 10px 26px rgba(0,0,0,.24), 0 0 0 rgba(212,180,109,0);
      }
      100%{
        opacity:1;
        box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 18px 42px rgba(0,0,0,.28), 0 0 26px rgba(212,180,109,.18);
      }
    }

    @media (max-width:640px){
      .brand-row h1,
      .brand-home-link h1{
        font-size:clamp(22px, 8vw, 31px) !important;
        letter-spacing:.075em !important;
      }

      #filterToggleBtn{
        width:100% !important;
        min-height:68px !important;
        padding:10px 22px !important;
        border-radius:12px !important;
      }

      #filterToggleBtn .cta-main{
        font-size:16px !important;
        letter-spacing:.125em !important;
      }

      #filterToggleBtn .cta-sub{
        font-size:10px !important;
        letter-spacing:.16em !important;
      }
    }

    #filterToggleBtn{
      width:min(500px, 92%) !important;
      min-height:76px !important;
      padding:12px 34px !important;
      border-radius:12px !important;
      background:linear-gradient(180deg, rgba(212,180,109,.23), rgba(212,180,109,.115)) !important;
      border:1px solid rgba(212,180,109,.82) !important;
      box-shadow:
        0 0 0 1px rgba(212,180,109,.08),
        0 18px 42px rgba(0,0,0,.28),
        0 0 26px rgba(212,180,109,.18) !important;
    }

    #filterToggleBtn .cta-main{
      font-family:"Cinzel","Trajan Pro","Optima","Avenir Next","Arial Narrow",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif !important;
      display:block !important;
      font-size:19px !important;
      font-weight:700 !important;
      letter-spacing:.18em !important;
      line-height:1.04 !important;
      text-transform:uppercase !important;
      color:rgba(244,239,230,.94) !important;
    }

    #filterToggleBtn .cta-sub{
      display:block !important;
      margin-top:6px !important;
      font-family:"Avenir Next","Arial Narrow",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif !important;
      font-size:10px !important;
      font-weight:700 !important;
      letter-spacing:.24em !important;
      line-height:1 !important;
      text-transform:uppercase !important;
      color:rgba(212,180,109,.76) !important;
      opacity:1 !important;
    }

    #filterToggleBtn:hover .cta-main,
    #filterToggleBtn:focus-visible .cta-main{
      color:#fff8ea !important;
    }

    #filterToggleBtn:hover .cta-sub,
    #filterToggleBtn:focus-visible .cta-sub{
      color:rgba(212,180,109,.96) !important;
      opacity:1 !important;
    }

    @media (max-width:640px){
      #filterToggleBtn{
        width:100% !important;
        min-height:72px !important;
        padding:12px 22px !important;
      }

      #filterToggleBtn .cta-main{
        font-size:16px !important;
        letter-spacing:.145em !important;
      }

      #filterToggleBtn .cta-sub{
        font-size:9px !important;
        letter-spacing:.22em !important;
      }
    }

    :root{
      --dz-bg-deep:#070A14;
      --dz-bg-blue:#0B1324;
      --dz-bg-control:#0A111D;
      --dz-gold:#D4B46D;
      --dz-gold-soft:#E6C98A;
      --dz-text:#F4F1EA;
      --dz-muted:rgba(244,241,234,.62);
      --dz-line:rgba(212,180,109,.34);
      --dz-line-strong:rgba(212,180,109,.58);
    }

    html, body, button, input, select, textarea{
      -webkit-font-smoothing:antialiased !important;
      -moz-osx-font-smoothing:grayscale !important;
      text-rendering:geometricPrecision !important;
    }

    body{
      background:var(--dz-bg-deep) !important;
    }

    .site-bg{
      background:
        linear-gradient(180deg, #070A14 0%, #090F1B 48%, #070A14 100%) !important;
    }

    .site-header{
      background:linear-gradient(180deg, rgba(7,10,20,.96), rgba(7,10,20,.84)) !important;
      border-bottom:1px solid rgba(212,180,109,.10) !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }

    .eyebrow{
      color:rgba(212,180,109,.88) !important;
      font-weight:500 !important;
      letter-spacing:.22em !important;
    }

    .brand-row h1,
    .brand-home-link h1{
      font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif !important;
      font-size:clamp(22px, 3.1vw, 34px) !important;
      font-weight:500 !important;
      line-height:1 !important;
      letter-spacing:.13em !important;
      color:rgba(212,180,109,.94) !important;
      text-shadow:none !important;
    }

    .brand-home-link:hover h1,
    .brand-home-link:focus-visible h1{
      color:var(--dz-gold-soft) !important;
      text-shadow:none !important;
    }

    .subline{
      border:1px solid rgba(88,126,185,.28) !important;
      background:rgba(11,19,36,.72) !important;
      color:rgba(244,241,234,.70) !important;
      box-shadow:none !important;
      text-shadow:none !important;
      font-weight:500 !important;
      letter-spacing:.105em !important;
    }

    .subline::before{
      background:var(--dz-gold) !important;
      box-shadow:none !important;
    }

    .back-link,
    .lang-inline,
    .stats-inline,
    .panel,
    .controls,
    .meta-pill,
    .status,
    .card{
      box-shadow:none !important;
    }

    .lang-inline{
      background:rgba(10,17,29,.82) !important;
      border-color:rgba(212,180,109,.26) !important;
      border-radius:16px !important;
    }

    .lang-inline .lang-tab{
      font-weight:500 !important;
      letter-spacing:.11em !important;
      color:rgba(212,180,109,.74) !important;
      background:rgba(11,19,36,.72) !important;
      border-color:rgba(212,180,109,.26) !important;
      box-shadow:none !important;
      text-shadow:none !important;
    }

    .lang-inline .lang-tab.active{
      color:var(--dz-text) !important;
      background:rgba(212,180,109,.12) !important;
      border-color:rgba(212,180,109,.56) !important;
      box-shadow:none !important;
    }

    .lang-inline .lang-tab:hover,
    .lang-inline .lang-tab:focus-visible{
      color:var(--dz-gold-soft) !important;
      border-color:rgba(212,180,109,.52) !important;
      background:rgba(212,180,109,.09) !important;
      box-shadow:none !important;
      transform:none !important;
    }

    .grid .card{
      background:linear-gradient(180deg, rgba(12,19,32,.98), rgba(7,10,20,.98)) !important;
      border-color:rgba(244,241,234,.055) !important;
      border-radius:16px !important;
    }

    .card:hover,
    .card:focus-visible{
      border-color:rgba(212,180,109,.28) !important;
      box-shadow:none !important;
      transform:none !important;
    }

    .card:hover .thumb{
      transform:scale(1.001) !important;
    }

    .work-id{
      color:rgba(212,180,109,.84) !important;
      font-weight:500 !important;
      letter-spacing:.12em !important;
    }

    .title{
      font-weight:500 !important;
      color:rgba(244,241,234,.90) !important;
    }

    .section-tag,
    .meta-pill,
    .status{
      background:rgba(244,241,234,.025) !important;
      border-color:rgba(244,241,234,.07) !important;
      color:rgba(244,241,234,.58) !important;
    }

    #resultText,
    .stats-inline #statTotal,
    .stats-inline #statFiltered,
    .stats-inline #statSections{
      color:rgba(244,241,234,.78) !important;
      font-weight:600 !important;
    }

    #loadMoreBtn{
      min-height:38px !important;
      height:38px !important;
      padding:0 18px !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.26) !important;
      background:rgba(11,19,36,.52) !important;
      color:rgba(212,180,109,.78) !important;
      font-size:12px !important;
      font-weight:500 !important;
      letter-spacing:.08em !important;
      box-shadow:none !important;
      transform:none !important;
    }

    #loadMoreBtn:hover,
    #loadMoreBtn:focus-visible{
      color:var(--dz-gold-soft) !important;
      border-color:rgba(212,180,109,.46) !important;
      background:rgba(11,19,36,.76) !important;
      box-shadow:none !important;
      transform:none !important;
      outline:none !important;
    }

    body.archive-entered #filterToggleWrap{
      margin:20px 0 18px !important;
      padding:0 !important;
    }

    #filterToggleBtn{
      width:min(480px, 92%) !important;
      min-height:76px !important;
      padding:14px 34px !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:center !important;
      gap:6px !important;
      border-radius:14px !important;
      border:1px solid rgba(212,180,109,.58) !important;
      background:linear-gradient(180deg, rgba(11,19,36,.96), rgba(7,10,20,.98)) !important;
      color:var(--dz-gold) !important;
      box-shadow:none !important;
      transform:none !important;
      filter:none !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
      text-shadow:none !important;
      cursor:pointer !important;
      line-height:1.2 !important;
      transition:opacity .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease !important;
    }

    #filterToggleBtn .cta-main{
      display:block !important;
      font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif !important;
      font-size:18px !important;
      font-weight:500 !important;
      letter-spacing:.20em !important;
      line-height:1.1 !important;
      text-transform:uppercase !important;
      color:rgba(244,241,234,.92) !important;
      text-shadow:none !important;
    }

    #filterToggleBtn .cta-sub{
      display:block !important;
      margin-top:2px !important;
      font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif !important;
      font-size:11px !important;
      font-weight:400 !important;
      letter-spacing:.18em !important;
      line-height:1 !important;
      text-transform:uppercase !important;
      color:rgba(212,180,109,.74) !important;
      opacity:1 !important;
      text-shadow:none !important;
    }

    #filterToggleBtn:hover,
    #filterToggleBtn:focus-visible{
      border-color:rgba(212,180,109,.76) !important;
      background:linear-gradient(180deg, rgba(13,24,43,.98), rgba(8,12,22,.98)) !important;
      color:var(--dz-gold-soft) !important;
      box-shadow:none !important;
      transform:none !important;
      outline:none !important;
    }

    #filterToggleBtn:hover .cta-main,
    #filterToggleBtn:focus-visible .cta-main{
      color:var(--dz-text) !important;
    }

    #filterToggleBtn:hover .cta-sub,
    #filterToggleBtn:focus-visible .cta-sub{
      color:var(--dz-gold-soft) !important;
    }

    #filterToggleBtn.brand-glow-once{
      animation:filterBrandGlow .22s ease-out 1 both !important;
    }

    @keyframes filterBrandGlow{
      0%{
        border-color:rgba(212,180,109,.36);
        background:linear-gradient(180deg, rgba(11,19,36,.94), rgba(7,10,20,.98));
      }
      100%{
        border-color:rgba(212,180,109,.58);
        background:linear-gradient(180deg, rgba(11,19,36,.96), rgba(7,10,20,.98));
      }
    }

    body.archive-entered.archive-filter-open #searchArea.controls{
      background:linear-gradient(180deg, rgba(11,19,36,.94), rgba(7,10,20,.96)) !important;
      border-color:rgba(88,126,185,.22) !important;
      border-radius:16px !important;
      padding:18px !important;
      gap:14px !important;
    }

    body.archive-entered.archive-filter-open #searchArea .field label{
      color:rgba(244,241,234,.50) !important;
      font-weight:500 !important;
      letter-spacing:.14em !important;
    }

    body.archive-entered.archive-filter-open #searchArea .input,
    body.archive-entered.archive-filter-open #searchArea .select{
      background:#090F1A !important;
      border-color:rgba(244,241,234,.09) !important;
      color:rgba(244,241,234,.92) !important;
      box-shadow:none !important;
      font-weight:500 !important;
    }

    body.archive-entered.archive-filter-open #searchArea .input:focus,
    body.archive-entered.archive-filter-open #searchArea .select:focus{
      border-color:rgba(212,180,109,.62) !important;
      box-shadow:none !important;
    }

    body.archive-entered.archive-filter-open #searchArea .control-actions .btn{
      background:rgba(11,19,36,.72) !important;
      border-color:rgba(212,180,109,.30) !important;
      color:rgba(212,180,109,.82) !important;
      box-shadow:none !important;
      font-weight:500 !important;
    }

    body.archive-entered.archive-filter-open #searchArea .control-actions .btn:hover,
    body.archive-entered.archive-filter-open #searchArea .control-actions .btn:focus-visible{
      border-color:rgba(212,180,109,.56) !important;
      color:var(--dz-gold-soft) !important;
      background:rgba(11,19,36,.90) !important;
      transform:none !important;
      box-shadow:none !important;
    }

    .lightbox,
    .lightbox-side{
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }

    @media (max-width:640px){
      .brand-row h1,
      .brand-home-link h1{
        font-size:clamp(21px, 8vw, 30px) !important;
        letter-spacing:.105em !important;
      }

      #filterToggleBtn{
        width:100% !important;
        min-height:72px !important;
        padding:14px 22px !important;
      }

      #filterToggleBtn .cta-main{
        font-size:16px !important;
        letter-spacing:.16em !important;
      }

      #filterToggleBtn .cta-sub{
        font-size:10px !important;
        letter-spacing:.16em !important;
      }
    }

    /* Desktop-only +9% size for ARCHIVE PRO (Artist Edition's desktop bump
       lives with its base rule near the top of this file). Placed here,
       after the theme pass above, because that pass's unconditional
       .brand-row h1 / .brand-home-link h1 rule (clamp(22px,3.1vw,34px)
       !important) would otherwise win over an earlier-declared override
       at this same specificity. This keeps tablet/mobile untouched — the
       max-width:640px block above still governs phones. */
    @media (min-width:881px){
      .brand-row h1,
      .brand-home-link h1{
        font-size:clamp(24px, 3.4vw, 37px) !important;
      }
    }

    #loadMoreBtn{
      width:min(214px, 72vw) !important;
      min-height:52px !important;
      height:52px !important;
      padding:7px 26px 8px !important;
      display:inline-flex !important;
      flex-direction:column !important;
      align-items:center !important;
      justify-content:center !important;
      gap:2px !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.36) !important;
      background:linear-gradient(180deg, rgba(12,22,42,.74), rgba(6,10,20,.92)) !important;
      color:transparent !important;
      font-size:0 !important;
      line-height:1 !important;
      letter-spacing:0 !important;
      text-transform:none !important;
      box-shadow:none !important;
      filter:none !important;
      transform:none !important;
      overflow:hidden !important;
    }

    #loadMoreBtn::before{
      content:"더 보기";
      display:block;
      font-family:"Noto Serif KR","Apple SD Gothic Neo","Pretendard",serif !important;
      font-size:15px !important;
      line-height:1.05 !important;
      font-weight:500 !important;
      letter-spacing:.08em !important;
      color:rgba(230,201,138,.92) !important;
      -webkit-font-smoothing:antialiased;
      text-rendering:geometricPrecision;
    }

    #loadMoreBtn::after{
      content:"LOAD MORE";
      display:block;
      margin-top:2px;
      font-family:"Avenir Next","Helvetica Neue","Pretendard",-apple-system,BlinkMacSystemFont,sans-serif !important;
      font-size:10px !important;
      line-height:1 !important;
      font-weight:500 !important;
      letter-spacing:.19em !important;
      color:rgba(212,180,109,.62) !important;
      -webkit-font-smoothing:antialiased;
      text-rendering:geometricPrecision;
    }

    #loadMoreBtn:hover,
    #loadMoreBtn:focus-visible{
      border-color:rgba(212,180,109,.56) !important;
      background:linear-gradient(180deg, rgba(15,28,54,.82), rgba(7,12,23,.96)) !important;
      box-shadow:none !important;
      filter:none !important;
      transform:none !important;
      outline:none !important;
    }

    #loadMoreBtn:hover::before,
    #loadMoreBtn:focus-visible::before{
      color:rgba(244,241,234,.92) !important;
    }

    #loadMoreBtn:hover::after,
    #loadMoreBtn:focus-visible::after{
      color:rgba(230,201,138,.78) !important;
    }

    @media (max-width:640px){
      #loadMoreBtn{
        width:min(210px, 76vw) !important;
        min-height:50px !important;
        height:50px !important;
      }
      #loadMoreBtn::before{
        font-size:14px !important;
      }
      #loadMoreBtn::after{
        font-size:9px !important;
        letter-spacing:.18em !important;
      }
    }

    @media (max-width:768px){
      .viewer-close,
      .lightbox-close,
      .works-viewer-close,
      #viewerCloseBtn,
      #lightboxClose{
        position:fixed !important;
        top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
        right:18px !important;
        z-index:10050 !important;
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        min-height:50px !important;
        display:grid !important;
        place-items:center !important;
        pointer-events:auto !important;
        touch-action:manipulation !important;
      }

      .viewer-stage,
      .lightbox-stage,
      .works-viewer-stage{
        padding-top:calc(env(safe-area-inset-top, 0px) + 72px) !important;
      }

      .viewer-caption,
      .lightbox-caption,
      .works-viewer-caption,
      .lightbox-side{
        padding:24px 22px calc(env(safe-area-inset-bottom, 0px) + 32px) 22px !important;
      }

      .viewer-id,
      .lightbox-id,
      .works-viewer-id,
      .lightbox-side .lb-id,
      #lbId{
        font-size:13px !important;
        letter-spacing:0.16em !important;
        line-height:1.35 !important;
      }

      .viewer-title,
      .lightbox-title,
      .works-viewer-title,
      .lightbox-side .lb-title,
      #lbTitle{
        font-size:24px !important;
        line-height:1.18 !important;
      }

      .viewer-section,
      .lightbox-section,
      .works-viewer-section,
      .lightbox-side .lb-section,
      #lbSection{
        font-size:16px !important;
        line-height:1.45 !important;
      }

      .viewer-meta,
      .lightbox-meta,
      .works-viewer-meta,
      .lb-meta,
      .lb-row{
        font-size:15px !important;
        line-height:1.55 !important;
      }

      .viewer-meta dt,
      .viewer-meta-label,
      .lightbox-meta dt,
      .works-viewer-meta dt,
      .lb-key{
        font-size:14px !important;
        line-height:1.55 !important;
      }

      .viewer-meta dd,
      .viewer-meta-value,
      .lightbox-meta dd,
      .works-viewer-meta dd,
      .lb-val{
        font-size:15px !important;
        line-height:1.55 !important;
      }
    }

    #filterToggleWrap,
    #filterToggleBtn{
      display:none !important;
    }

    body.archive-entered .archive-entry-wrap{
      display:none !important;
    }

    body.archive-entered .site-shell{
      display:flex !important;
      flex-direction:column !important;
    }

    body.archive-entered #loadWrap{
      order:1 !important;
      display:flex;
      justify-content:center;
    }

    body.archive-entered #loadWrap[hidden]{
      display:none !important;
    }
body.archive-entered .hero{
      order:3 !important;
      display:grid !important;
    }

    body.archive-entered #searchArea{
      order:4 !important;
      display:grid !important;
    }

    body.archive-entered .archive-source-meta{
      order:5 !important;
      display:flex !important;
      opacity:.78;
    }

    body.archive-entered #archiveMain{
      order:6 !important;
      display:flex !important;
      flex-direction:column !important;
    }

    body.archive-entered:not(.archive-filter-open) .hero,
    body.archive-entered:not(.archive-filter-open) #searchArea,
    body.archive-entered:not(.archive-filter-open) .archive-source-meta{
      display:grid !important;
    }

    body.archive-entered:not(.archive-filter-open) .archive-source-meta{
      display:flex !important;
    }

    body.archive-entered #resultsMeta{order:1 !important;}
    body.archive-entered #grid{order:2 !important;}
    body.archive-entered #emptyState{order:3 !important;}

    body.archive-entered #searchArea.controls{
      grid-template-columns:minmax(190px,.85fr) minmax(170px,.75fr) minmax(280px,1.35fr) auto !important;
      align-items:end !important;
    }

    @media (max-width:1040px){
      body.archive-entered #searchArea.controls{
        grid-template-columns:1fr 1fr !important;
      }
      body.archive-entered #searchArea .field:nth-child(3),
      body.archive-entered #searchArea .control-actions{
        grid-column:1/-1 !important;
      }
    }

    @media (max-width:640px){
      body.archive-entered #searchArea.controls{
        grid-template-columns:1fr !important;
      }
      body.archive-entered #searchArea .field:nth-child(3),
      body.archive-entered #searchArea .control-actions{
        grid-column:auto !important;
      }
    }

    #ap-reset-trigger{
      cursor:pointer !important;
    }

    #ap-reset-trigger h1{
      cursor:pointer !important;
    }

    body.archive-entered .site-shell{
      padding-top:12px !important;
    }

    .header-inner{
      min-height:76px !important;
      padding:12px 0 !important;
      gap:12px !important;
    }
body.archive-entered .hero{
      padding-top:8px !important;
      gap:8px !important;
    }

    .lang-inline{
      padding:10px 14px !important;
      gap:8px !important;
    }

    .lang-inline .lang-tabs{
      gap:8px !important;
    }

    body.archive-entered #searchArea.controls{
      padding:14px !important;
      gap:10px !important;
      margin-top:8px !important;
      margin-bottom:8px !important;
    }

    body.archive-entered #searchArea .field{
      gap:5px !important;
    }

    body.archive-entered .archive-source-meta{
      margin:8px 2px 8px !important;
    }

    body.archive-entered #archiveMain{
      order:6 !important;
      display:flex !important;
      flex-direction:column !important;
    }

    body.archive-entered #resultsMeta{
      order:1 !important;
      margin:8px 2px 8px !important;
    }

    body.archive-entered #grid{
      order:2 !important;
    }

    body.archive-entered #loadWrap{
      order:3 !important;
      display:flex !important;
      justify-content:center !important;
      padding:18px 0 12px !important;
      margin:0 !important;
      position:relative !important;
    }

    body.archive-entered #loadWrap[hidden]{
      display:none !important;
    }

    body.archive-entered #emptyState{
      order:4 !important;
    }

    body.archive-entered #loadWrap::after{
      bottom:0 !important;
    }

    @media (max-width:640px){
      body.archive-entered .site-shell{
        padding-top:14px !important;
      }

      .header-inner{
        min-height:76px !important;
        padding:14px 0 !important;
      }

      .lang-inline{
        padding:10px !important;
      }

      body.archive-entered #searchArea.controls{
        padding:12px !important;
        gap:10px !important;
      }

      body.archive-entered #loadWrap{
        padding:16px 0 10px !important;
      }
    }

    html,
    body{
      overflow-anchor:auto !important;
    }

    #grid{
      overflow-anchor:none;
    }

    .install-panel{
      margin:12px 0 10px;
      padding:13px 14px;
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:13px;
      border:1px solid rgba(212,180,109,.30);
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(18,29,45,.72), rgba(8,14,24,.58)),
        radial-gradient(circle at 18% 20%, rgba(212,180,109,.10), transparent 34%);
      color:var(--muted);
      box-shadow:0 18px 44px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.035);
      contain:layout paint;
    }

    .install-panel.is-visible{
      display:flex;
    }

    .install-icon-wrap{
      flex:0 0 auto;
      width:58px;
      height:58px;
      border-radius:17px;
      overflow:hidden;
      border:1px solid rgba(212,180,109,.34);
      background:#031421;
      box-shadow:0 10px 26px rgba(0,0,0,.32), 0 0 18px rgba(212,180,109,.12);
    }

    .install-icon{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .install-text{
      min-width:0;
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .install-title{
      color:#f4efe6;
      font-size:16px;
      font-weight:900;
      letter-spacing:.045em;
      line-height:1.25;
    }

    .install-desc{
      color:rgba(244,239,230,.70);
      font-size:12.5px;
      line-height:1.45;
      letter-spacing:.01em;
    }

    .install-guide{
      margin-top:2px;
      color:rgba(212,180,109,.82);
      font-size:11.5px;
      line-height:1.45;
    }

    .ios-install-guide{
      margin-top:9px;
      padding:10px 12px;
      display:grid;
      gap:5px;
      border:1px solid rgba(212,180,109,.24);
      border-radius:16px;
      background:rgba(212,180,109,.055);
    }

    .ios-install-guide[hidden]{
      display:none !important;
    }

    .ios-guide-title{
      color:#d4b46d;
      font-size:12px;
      font-weight:900;
      letter-spacing:.07em;
      text-transform:uppercase;
    }

    .ios-guide-step{
      color:rgba(244,239,230,.74);
      font-size:12px;
      line-height:1.42;
    }

    .install-actions{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .install-btn{
      min-height:38px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(212,180,109,.64);
      background:linear-gradient(180deg, rgba(212,180,109,.22), rgba(212,180,109,.10));
      color:#d4b46d;
      cursor:pointer;
      white-space:nowrap;
      font-size:13px;
      font-weight:900;
      letter-spacing:.08em;
      transform:none !important;
      box-shadow:0 0 0 1px rgba(212,180,109,.08), 0 0 18px rgba(212,180,109,.18) !important;
      -webkit-tap-highlight-color:rgba(212,180,109,.22);
    }

    .install-btn:hover,
    .install-btn:focus-visible{
      color:#f4efe6;
      border-color:rgba(212,180,109,.88);
      background:linear-gradient(180deg, rgba(212,180,109,.30), rgba(212,180,109,.16));
      outline:none;
    }

    .install-btn:active{
      opacity:.86;
    }

    body.app-standalone .install-panel{
      display:none !important;
    }

    @media (display-mode: fullscreen), (display-mode: standalone){
      .install-panel{display:none !important;}
      body{background:#031421 !important;}
    }

    @media (max-width:640px){
      .install-panel.is-visible{
        display:grid;
        grid-template-columns:54px minmax(0,1fr) auto;
        gap:11px;
        padding:12px;
        border-radius:22px;
      }

      .install-icon-wrap{
        width:54px;
        height:54px;
        border-radius:16px;
      }

      .install-title{
        font-size:15px;
      }

      .install-desc{
        font-size:12px;
      }

      .install-btn{
        min-height:36px;
        padding:0 14px;
        font-size:12px;
      }
    }

    @media (max-width:420px){
      .install-panel.is-visible{
        grid-template-columns:50px minmax(0,1fr);
      }

      .install-actions{
        grid-column:1/-1;
        width:100%;
      }

      .install-btn{
        width:100%;
        min-height:42px;
      }
    }

    .lb-meta .lb-row:nth-child(4),
    .lb-meta .lb-row:nth-child(5),
    .lb-actions .lb-link,
    #lbOpenImage,
    #lbOpenZoom{
      display:none !important;
    }

    @media (min-width:881px){
      .lightbox-side{
        width:360px !important;
        max-width:360px !important;
        padding:78px 22px 22px !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
      }

      .lightbox-inner{
        grid-template-columns:minmax(0,1fr) 360px !important;
      }

      .lightbox-next{
        right:calc(360px + 28px + env(safe-area-inset-right, 0px)) !important;
      }

      .lightbox-stage img,
      #lightboxImage{
        max-width:min(calc(100vw - 360px - 240px), 940px) !important;
        max-height:calc(100vh - 140px) !important;
      }
    }

    @media (max-width:880px){
      .viewer-inner,
      .lightbox-inner{
        grid-template-rows:minmax(0,70dvh) minmax(0,30dvh) !important;
      }

      .viewer-media,
      .lightbox-media,
      .lightbox-stage{
        padding:calc(env(safe-area-inset-top, 0px) + 48px) 8px 4px 8px !important;
      }

      .viewer-media img,
      .lightbox-media img,
      .lightbox-stage img,
      #lightboxImage{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
      }

      .viewer-caption,
      .lightbox-caption,
      .detail-panel,
      .lightbox-side{
        height:100% !important;
        min-height:0 !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        padding:14px 18px calc(env(safe-area-inset-bottom, 0px) + 74px) 18px !important;
        border-left:0 !important;
        border-top:1px solid rgba(255,255,255,.06) !important;
      }

      .lightbox-side .lb-title{
        font-size:19px !important;
        line-height:1.18 !important;
        margin-bottom:8px !important;
      }

      .lightbox-side .lb-section{
        margin-bottom:12px !important;
      }

      .lb-meta{
        gap:7px !important;
        margin-bottom:8px !important;
      }

      .lb-row{
        grid-template-columns:72px minmax(0,1fr) !important;
        gap:8px !important;
        font-size:13px !important;
        line-height:1.35 !important;
      }

      .viewer-close,
      .lightbox-close,
      .close-viewer,
      #viewerCloseBtn,
      #lightboxClose{
        top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
        right:12px !important;
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        min-height:48px !important;
      }
    }

    @media (max-width:480px){
      .viewer-inner,
      .lightbox-inner{
        grid-template-rows:minmax(0,72dvh) minmax(0,28dvh) !important;
      }

      .viewer-media,
      .lightbox-media,
      .lightbox-stage{
        padding:calc(env(safe-area-inset-top, 0px) + 46px) 6px 2px 6px !important;
      }

      .viewer-caption,
      .lightbox-caption,
      .detail-panel,
      .lightbox-side{
        padding:12px 16px calc(env(safe-area-inset-bottom, 0px) + 72px) 16px !important;
      }
    }

    .lb-meta .lb-row:nth-child(4),
    .lb-meta .lb-row:nth-child(5),
    #lbOpenImage{
      display:none !important;
    }

    .lb-actions{
      display:flex !important;
      gap:10px !important;
      flex-wrap:wrap !important;
      margin-top:14px !important;
    }

    #lbOpenZoom{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:auto !important;
      min-width:0 !important;
      min-height:34px !important;
      padding:0 13px !important;
      border-radius:999px !important;
      border:1px solid rgba(212,180,109,.34) !important;
      background:rgba(212,180,109,.055) !important;
      color:rgba(212,180,109,.92) !important;
      font-size:12px !important;
      font-weight:700 !important;
      line-height:34px !important;
      letter-spacing:.04em !important;
      text-decoration:none !important;
      white-space:nowrap !important;
      box-shadow:none !important;
      transform:none !important;
      touch-action:manipulation !important;
      -webkit-tap-highlight-color:rgba(212,180,109,.16) !important;
    }

    #lbOpenZoom:hover,
    #lbOpenZoom:focus-visible{
      color:#f4efe6 !important;
      border-color:rgba(212,180,109,.58) !important;
      background:rgba(212,180,109,.09) !important;
      outline:none !important;
      transform:none !important;
      box-shadow:none !important;
    }

    .card .full-view,
    .card .view-full,
    .card .fullview,
    .card .card-fullview,
    .card .caption-fullview,
    .card .open-full,
    .card .open-viewer{
      display:none !important;
    }

    @media (max-width:880px){
      .card .full-view,
      .card .view-full,
      .card .fullview,
      .card .card-fullview,
      .card .caption-fullview,
      .card .open-full,
      .card .open-viewer,
      .card .view-full-btn,
      .card .full-view-btn,
      .card .caption-action-fullview{
        display:none !important;
      }
    }

    @media (max-width:768px){
      .viewer-close,
      .lightbox-close,
      .close-viewer,
      #viewerCloseBtn,
      #lightboxClose{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
        right:10px !important;
        font-size:16px !important;
        line-height:1 !important;
        border-radius:999px !important;
        display:grid !important;
        place-items:center !important;
        padding:0 !important;
      }
    }

@media (max-width: 768px) {
  .viewer-caption,
  .lightbox-caption,
  .detail-panel,
  .lightbox-side {
    max-height: 38vh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 128px) !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  .viewer-content,
  .lightbox-content {
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  .viewer-caption,
  .lightbox-caption,
  .detail-panel,
  .lightbox-side {
    max-height: 40dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 768px) {
  .viewer-caption,
  .lightbox-caption {
    max-height: min(42dvh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  .viewer-caption-inner,
  .lightbox-caption-inner {
    padding-bottom: 24px !important;
  }
}

  @media (max-width: 768px) {
    .viewer-caption .section,
    .viewer-caption .section-name,
    .viewer-caption .viewer-section,
    .lightbox-caption .section,
    .lightbox-caption .section-name,
    .lightbox-caption .lightbox-section,
    .viewer-caption .lb-section,
    .lightbox-caption .lb-section,
    .lightbox-side .section,
    .lightbox-side .section-name,
    .lightbox-side .viewer-section,
    .lightbox-side .lightbox-section,
    .lightbox-side .lb-section {
      display: none !important;
    }

    .viewer-caption,
    .lightbox-caption,
    .lightbox-side {
      font-size: 14px !important;
      line-height: 1.35 !important;
      max-height: min(42dvh, 360px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
      touch-action: pan-y !important;
      overscroll-behavior: contain !important;
    }

    .viewer-caption h1,
    .viewer-caption h2,
    .viewer-caption .title,
    .viewer-caption .viewer-title,
    .viewer-caption .lb-title,
    .lightbox-caption h1,
    .lightbox-caption h2,
    .lightbox-caption .title,
    .lightbox-caption .lightbox-title,
    .lightbox-caption .lb-title,
    .lightbox-side h1,
    .lightbox-side h2,
    .lightbox-side .title,
    .lightbox-side .viewer-title,
    .lightbox-side .lightbox-title,
    .lightbox-side .lb-title {
      font-size: clamp(22px, 6vw, 30px) !important;
      line-height: 1.18 !important;
      margin-bottom: 10px !important;
    }

    .viewer-caption .meta,
    .viewer-caption .caption-row,
    .viewer-caption .viewer-meta,
    .viewer-caption .lb-meta,
    .viewer-caption .lb-row,
    .lightbox-caption .meta,
    .lightbox-caption .caption-row,
    .lightbox-caption .lightbox-meta,
    .lightbox-caption .lb-meta,
    .lightbox-caption .lb-row,
    .lightbox-side .meta,
    .lightbox-side .caption-row,
    .lightbox-side .viewer-meta,
    .lightbox-side .lightbox-meta,
    .lightbox-side .lb-meta,
    .lightbox-side .lb-row,
    .lightbox-side .lb-key,
    .lightbox-side .lb-val {
      font-size: 14px !important;
      line-height: 1.35 !important;
    }

    .viewer-caption .caption-row,
    .viewer-caption .viewer-meta,
    .viewer-caption .lb-row,
    .lightbox-caption .caption-row,
    .lightbox-caption .lightbox-meta,
    .lightbox-caption .lb-row,
    .lightbox-side .caption-row,
    .lightbox-side .viewer-meta,
    .lightbox-side .lightbox-meta,
    .lightbox-side .lb-row {
      margin-bottom: 6px !important;
    }

    .viewer-caption-inner,
    .lightbox-caption-inner,
    .lightbox-side .caption-inner {
      padding-bottom: 24px !important;
    }
  }

@media (max-width: 768px) {

  .viewer-caption h1,
  .viewer-caption h2,
  .viewer-caption .title,
  .viewer-caption .viewer-title,
  .lightbox-caption h1,
  .lightbox-caption h2,
  .lightbox-caption .title,
  .lightbox-caption .lightbox-title,
  .detail-panel h1,
  .detail-panel h2,
  .detail-panel .title,
  .detail-panel .viewer-title,
  .lightbox-side h1,
  .lightbox-side h2,
  .lightbox-side .lb-title,
  .lightbox-side .lightbox-title {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 8px !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .viewer-caption .meta,
  .viewer-caption .caption-row,
  .viewer-caption .viewer-meta,
  .lightbox-caption .meta,
  .lightbox-caption .caption-row,
  .lightbox-caption .lightbox-meta,
  .detail-panel .meta,
  .detail-panel .caption-row,
  .detail-panel .viewer-meta,
  .lightbox-side .lb-meta,
  .lightbox-side .lb-row {
    font-size: 13px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 4px !important;
  }

  .viewer-caption,
  .lightbox-caption,
  .detail-panel,
  .lightbox-side {
    gap: 4px !important;
  }
}

  @media (max-width: 768px) {
    .viewer-caption,
    .lightbox-caption {
      max-height: min(48dvh, 420px) !important;
    }
  }

    @media (max-width: 768px) {
      .viewer-caption,
      .lightbox-caption {
        max-height: min(56dvh, 520px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 170px) !important;
      }
    }

@media (max-width: 768px) {

  .viewer-caption .full-view,
  .viewer-caption .view-full,
  .viewer-caption .fullview,
  .viewer-caption .viewer-full-view,
  .viewer-caption .full-view-btn,
  .viewer-caption .view-full-btn,
  .viewer-caption button.full-view,
  .viewer-caption button.view-full,
  .viewer-caption a.full-view,
  .viewer-caption a.view-full,
  .viewer-caption [data-full-view],
  .viewer-caption [data-view-full],

  .lightbox-caption .full-view,
  .lightbox-caption .view-full,
  .lightbox-caption .fullview,
  .lightbox-caption .lightbox-full-view,
  .lightbox-caption .full-view-btn,
  .lightbox-caption .view-full-btn,
  .lightbox-caption button.full-view,
  .lightbox-caption button.view-full,
  .lightbox-caption a.full-view,
  .lightbox-caption a.view-full,
  .lightbox-caption [data-full-view],
  .lightbox-caption [data-view-full],
  .lightbox-side .full-view,
  .lightbox-side .view-full,
  .lightbox-side .fullview,
  .lightbox-side .lightbox-full-view,
  .lightbox-side .full-view-btn,
  .lightbox-side .view-full-btn,
  .lightbox-side button.full-view,
  .lightbox-side button.view-full,
  .lightbox-side a.full-view,
  .lightbox-side a.view-full,
  .lightbox-side [data-full-view],
  .lightbox-side [data-view-full] {
    display: none !important;
  }

  .viewer-caption,
  .lightbox-caption,
  .lightbox-side {
    max-height: min(72dvh, 760px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 190px) !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }
}

@media (max-width: 768px) {

  .viewer-caption .full-view,
  .viewer-caption .view-full,
  .viewer-caption .fullview,
  .viewer-caption .viewer-full-view,
  .viewer-caption .full-view-wrap,
  .viewer-caption .full-view-container,
  .viewer-caption .viewer-full-view-wrap,
  .viewer-caption .full-view-btn,
  .viewer-caption .view-full-btn,
  .viewer-caption button.full-view,
  .viewer-caption button.view-full,

  .lightbox-caption .full-view,
  .lightbox-caption .view-full,
  .lightbox-caption .fullview,
  .lightbox-caption .lightbox-full-view,
  .lightbox-caption .full-view-wrap,
  .lightbox-caption .full-view-container,
  .lightbox-caption .lightbox-full-view-wrap,
  .lightbox-caption .full-view-btn,
  .lightbox-caption .view-full-btn,
  .lightbox-caption button.full-view,
  .lightbox-caption button.view-full {
    display: none !important;
  }

  .viewer-caption,
  .lightbox-caption {
    max-height: min(84dvh, 960px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 240px) !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }
}

@media (max-width: 768px) {
  #lbOpenZoom.mobile-hide-fullview,
  .mobile-hide-fullview,
  .lb-actions.mobile-hide-fullview-wrap {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .viewer-inner,
  .lightbox-inner {
    grid-template-rows: minmax(0, 66dvh) minmax(0, 34dvh) !important;
  }

  .viewer-caption,
  .lightbox-caption,
  .viewer-info,
  .lightbox-info,
  .viewer-meta-panel,
  .lightbox-meta-panel,
  .detail-panel,
  .lightbox-side {
    max-height: min(30dvh, 340px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 14px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  .viewer-title,
  .lightbox-title,
  .viewer-caption h1,
  .lightbox-caption h1,
  .lightbox-side .lb-title {
    font-size: clamp(17px, 5vw, 24px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 6px !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .viewer-meta,
  .lightbox-meta,
  .viewer-caption .meta,
  .lightbox-caption .meta,
  .lightbox-side .lb-section,
  .lightbox-side .lb-meta,
  .lightbox-side .lb-row,
  .lightbox-side .lb-key,
  .lightbox-side .lb-val {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 3px !important;
  }

  .lightbox-side .lb-meta {
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  .lightbox-side .lb-row {
    gap: 6px !important;
  }
}


    /* ARCHIVE PRO MOBILE VIEWER CLEAN RESET — MATCH DUNGZAK.ART VIEWER
       Mobile Viewer only: frame clipping, dark overlay, layer order, single transform target. */
    @media (max-width: 768px) {
      #lightbox,
      .lightbox,
      .viewer-overlay,
      .lightbox-overlay,
      .archive-viewer,
      .viewer {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: #00060a !important;
        overflow: hidden !important;
        z-index: 99990 !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate !important;
      }

      #lightbox::before,
      .lightbox::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background: #00060a !important;
        opacity: 1 !important;
        pointer-events: none !important;
      }

      #lightbox .lightbox-inner,
      .lightbox .lightbox-inner,
      .viewer-inner {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        overflow: hidden !important;
      }

      #lightbox .lightbox-stage,
      .lightbox-stage,
      .viewer-image-wrap,
      .viewer-img-wrap,
      .lightbox-image-wrap,
      .lightbox-img-wrap,
      .zoom-frame,
      .viewer-frame,
      .archive-viewer-frame {
        position: relative !important;
        overflow: hidden !important;
        contain: paint !important;
        z-index: 1 !important;
        touch-action: none !important;
        overscroll-behavior: contain !important;
      }

      #lightboxImage,
      .viewer-image,
      .viewer-img,
      .lightbox-image,
      .lightbox-img,
      .archive-viewer-img {
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        transform-origin: center center !important;
        will-change: transform !important;
        user-select: none !important;
        -webkit-user-drag: none !important;
        touch-action: none !important;
        z-index: 1 !important;
      }

      .viewer-caption,
      .lightbox-caption,
      .archive-viewer-caption,
      .lightbox-side {
        position: relative !important;
        z-index: 5 !important;
      }

      #viewerCloseBtn,
      #lightboxClose,
      .viewer-close,
      .lightbox-close,
      .modal-close,
      .close-btn {
        position: fixed !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
      }
    }
}
    }
}
html.archivepro-ios-pwa .site-header {
        padding-top: env(safe-area-inset-top);
      }
    }
}
      }
}
}

    body.app-ios-standalone .site-header {
      padding-top: 40px;
    }


    /* ARCHIVE PRO iPHONE PWA HERO MICRO OFFSET ONLY */
    @media (display-mode: standalone) {
      body.app-ios-standalone .site-header {
        padding-top: 50px;
      }
    }

    body.app-ios-standalone .site-header {
      padding-top: 50px;
    }



    /* ARCHIVE PRO — IPAD PORTRAIT VIEWER ZOOM BOUNDARY FIX ONLY */
    @media (orientation: portrait) and (hover: none) and (pointer: coarse){
      html.is-ipad .viewer-stage,
      html.is-ipad .viewer,
      html.is-ipad .viewer-image-wrap,
      html.is-ipad .lightbox-stage,
      html.is-ipad .lightbox,
      html.is-ipad .lightbox-media,
      html.is-ipad .lightbox-image-wrap{
        overflow:hidden !important;
      }
    }



/* ARCHIVE PRO — MOBILE VIEWER CLOSE MICRO TUNING ONLY */
@media (max-width:768px){
.viewer-close{
width:34px;
height:34px;
top:16px;
right:14px;
font-size:22px;
line-height:34px;
opacity:.46;
background:rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.16);
}
.viewer-close:active{
opacity:.75;
}
}



/* ARCHIVE PRO — IPAD VIEWER CLOSE BUTTON SUBTLE TUNING ONLY */
html.is-ipad .viewer-close,
html.is-ipad .lightbox-close,
html.is-ipad .close-btn,
html.is-ipad [data-viewer-close] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;

  font-size: 16px !important;

  opacity: 0.38 !important;

  background: rgba(0, 0, 0, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;

  top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
  right: max(10px, calc(env(safe-area-inset-right) + 6px)) !important;
}

html.is-ipad .viewer-close:hover,
html.is-ipad .lightbox-close:hover,
html.is-ipad .close-btn:hover,
html.is-ipad [data-viewer-close]:hover {
  opacity: 0.62 !important;
}



    /* ARCHIVE PRO — PHONE LANDSCAPE LAYOUT TUNING ONLY
       Scope: touch phone landscape only. No viewer behavior, data, PWA, or close button changes. */
    @media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:620px){
      .viewer-panel,
      .viewer-info,
      .viewer-content,
      .lightbox-inner,
      .lightbox-side{
        justify-content:center !important;
        gap:14px !important;
        overflow-y:auto !important;
        min-height:100dvh !important;
      }

      .viewer-panel,
      .viewer-content,
      .lightbox-inner{
        display:flex !important;
        flex-direction:column !important;
        padding:16px 24px 20px !important;
        box-sizing:border-box !important;
      }

      .lightbox-stage,
      .viewer-media,
      .viewer-image-wrap,
      .viewer-img-wrap,
      .lightbox-image-wrap,
      .lightbox-img-wrap{
        width:100% !important;
        min-height:0 !important;
        padding:16px 24px 8px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
      }

      .viewer-image,
      .viewer img,
      .lightbox-stage img,
      #lightboxImage{
        max-width:min(92vw,900px) !important;
        max-height:56vh !important;
        width:auto !important;
        height:auto !important;
        object-fit:contain !important;
        margin:auto !important;
        transform:none;
      }

      .viewer-caption,
      .viewer-meta,
      .lightbox-caption,
      .lightbox-side,
      .detail-panel{
        max-width:92vw !important;
        margin:0 auto !important;
        padding-top:8px !important;
        text-align:left !important;
        box-sizing:border-box !important;
      }

      .gallery-grid,
      .grid,
      #grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:12px !important;
        padding-inline:16px !important;
        box-sizing:border-box !important;
      }

      .results-header,
      .meta-row,
      #resultsMeta{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-wrap:wrap !important;
        gap:8px !important;
      }
    }


    /* ARCHIVE PRO — PHONE LANDSCAPE FULLSCREEN VIEWER ONLY
       Scope: phone landscape fullscreen viewer CSS only. No grid, data, behavior, PWA, or close button changes. */
    @media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:620px){
      .viewer-inner,
      .viewer-panel,
      .viewer-content,
      .lightbox-inner{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        gap:18px !important;
        padding:12px 72px 12px 24px !important;
        min-height:100dvh !important;
        height:100dvh !important;
        width:100vw !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
      }

      .viewer-media,
      .viewer-image-wrap,
      .viewer-img-wrap,
      .lightbox-media,
      .lightbox-image-wrap,
      .lightbox-img-wrap,
      .lightbox-stage{
        flex:1 1 auto !important;
        width:auto !important;
        max-width:64vw !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        max-height:82vh !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
      }

      .viewer-image,
      .viewer img,
      .lightbox-media img,
      .lightbox-stage img,
      #lightboxImage{
        width:auto !important;
        height:auto !important;
        max-width:64vw !important;
        max-height:82vh !important;
        object-fit:contain !important;
        margin:0 !important;
      }

      .viewer-caption,
      .viewer-meta,
      .viewer-info,
      .lightbox-caption,
      .detail-panel,
      .lightbox-side{
        width:240px !important;
        max-width:28vw !important;
        max-height:82vh !important;
        height:auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        padding:22px 24px !important;
        margin:0 !important;
        flex:0 0 240px !important;
        flex-shrink:0 !important;
        box-sizing:border-box !important;
        border-top:0 !important;
      }
    }


    /* ARCHIVE PRO — IPAD LANDSCAPE MICRO UI TUNING ONLY
       Scope: iPad/tablet landscape UI spacing and typography presence only.
       No data, grid, viewer, touch behavior, PWA, position, transform, height, or overflow changes. */
    @media (pointer:coarse) and (orientation:landscape) and (min-width:1024px){
      .header-inner{
        padding-top:14.5px !important;
        padding-bottom:14.5px !important;
      }

      .brand-row{
        margin-bottom:0 !important;
      }

      .brand-home-link{
        margin-bottom:0 !important;
      }

      .hero,
      .hero.hero-compressed{
        padding-top:16px !important;
        gap:14px !important;
      }

      .hero-card{
        padding-top:18px !important;
        padding-bottom:18px !important;
        gap:12px !important;
      }

      .lang-inline{
        padding-top:11px !important;
        padding-bottom:11px !important;
      }

      body.archive-entered #filterToggleWrap{
        margin-top:18px !important;
        margin-bottom:16px !important;
      }

      body.archive-entered.archive-filter-open #searchArea,
      .controls{
        margin-top:14px !important;
        margin-bottom:9px !important;
        padding-top:14px !important;
        padding-bottom:14px !important;
        gap:11px !important;
      }

      .stats-inline{
        opacity:.82 !important;
        border-color:rgba(212,180,109,.23) !important;
        background:transparent !important;
      }

      .stats-inline #statTotal,
      .stats-inline #statFiltered,
      .stats-inline #statSections{
        opacity:.82 !important;
      }

      .input::placeholder,
      body.archive-entered.archive-filter-open #searchArea .input::placeholder{
        opacity:.84 !important;
      }

      .meta-row,
      #resultsMeta{
        margin-top:9px !important;
        margin-bottom:7px !important;
      }
    }

    /* Hide duplicate search-result summary (resultText / renderedText / activeFilterText).
       DOM and JavaScript untouched; element is visually removed only so search/filter/sort/count logic stays intact.
       !important + last-in-source beats the inline JS style.display='flex' and the media-query display:flex rule. */
    #resultsMeta{ display:none !important; }
    body.archive-entered #resultsMeta{ display:none !important; }

    /* ===================================================================
       IPAD / ANDROID TABLET — spacing + duplicate-stats cleanup only.
       Scope: 768–1366px width AND pointer:coarse, so normal mouse-driven
       desktops/laptops in this width range are excluded, and phones
       (pointer:coarse but narrower than 768px in portrait, and excluded
       here even in landscape since this rule only fires 768px+) are
       untouched. Placed at the very end of the file (matching the
       last-in-source-wins pattern already used above for #resultsMeta)
       so it reliably wins over every earlier conflicting rule.
       Header/ARCHIVE PRO/Artist Edition/LAB/colors/fonts/card/viewer/
       search are not touched by anything in this block. ------------- */
    @media (min-width:768px) and (max-width:1366px) and (pointer:coarse){

      /* 1. Duplicate result info: keep "0 works · 0 results · 0 sections"
         only, remove "0 Works · 0 Sections" — forced unconditionally so
         this no longer depends on the html.ap-tablet-ui class detection
         succeeding or failing. */
      .ap-stats-tablet{ display:none !important; }
      .stats-inline{ display:flex !important; }

      /* 4. Same structure portrait and landscape: language box, then
         stats box directly below at full width, then the work list. */
      .hero.hero-compressed{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:11px !important;
      }

      /* 5. Both boxes share the same left/right baseline and never
         overflow the viewport. */
      .lang-inline,
      .stats-inline{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        margin-left:0 !important;
        margin-right:0 !important;
      }

      /* 2. Compact the language control box: button height/border/text
         position untouched, only the empty space above/below shrinks
         to roughly 12–16px total. */
      .lang-inline{
        padding:7px 12px !important;
        margin-bottom:11px !important;
      }

      .lang-tabs{
        gap:11px !important;
      }

      /* 3. Compact the stats box the same way; border/radius/color/
         font-size untouched. */
      .stats-inline{
        min-height:auto !important;
        padding:3px 12px !important;
        margin-top:0 !important;
      }
    }

/* ============================================================
   Archive Pro App — Artist Login / CMS panel (added 2026-07-22)
   Additive only — no existing selector above this point is touched.
   ============================================================ */
.ap-auth-wrap{ position:relative; display:inline-flex; }
/* hidden 속성은 어떤 order/display 규칙보다 우선해야 함 (Empty State/링크/clear).
   .ap-auth-panel: display:flex가 [hidden] UA 기본값을 이겨서 패널이 닫혀도
   화면에 남던 버그 수정 (2026-07-22) */
#emptyState[hidden],
#artistExternalLink[hidden],
#apAuthPanel[hidden],
.ap-auth-panel[hidden],
#archiveSearchClear[hidden]{ display:none !important; }

/* ---- 완성형 검색창 (§23) ---- */
.archive-search{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-strong, rgba(255,255,255,.12));
  border-radius:12px;
  padding:4px 6px 4px 12px;
}
.archive-search:focus-within{
  border-color:rgba(214,183,111,.55);
}
.archive-search__icon{ flex:0 0 auto; opacity:.7; font-size:14px; }
.archive-search__input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  outline:0;
  color:inherit;
  font:inherit;
  padding:8px 4px;
}
.archive-search__input::-webkit-search-cancel-button{ display:none; }
.archive-search__clear{
  flex:0 0 auto;
  width:28px; height:28px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:inherit;
  font-size:16px; line-height:1;
  cursor:pointer;
}
.archive-search__clear:hover{ background:rgba(255,255,255,.16); }
.archive-search__submit{
  flex:0 0 auto;
  border:1px solid rgba(214,183,111,.42);
  background:rgba(212,180,109,.06);
  color:#d6b76f;
  border-radius:999px;
  padding:7px 14px;
  font:inherit;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
}
.archive-search__submit:active{ opacity:.75; }
@media (max-width:640px){
  .archive-search{ padding-left:10px; }
  .archive-search__submit{ padding:6px 11px; font-size:12px; }
}

/* ---- 작가 외부 링크 버튼 (§53) ---- */
.artist-external-link{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   2026-07-24 추가 — 링크 버튼 / Artist Bio 버튼 최종 균형 조정
   두 버튼(#artistExternalLink = dungzak.art, #artistBioTrigger = Artist Bio)을
   하나의 래퍼(.ap-brand-links-row)로 묶어 항상 같은 줄 + 같은 기준선을
   유지시키고, ID 선택자로 이 파일 뒤쪽의 레거시 !important 규칙(예:
   `.lang-inline .hero-home-link{height:44px!important;line-height:44px!important}`,
   5500번대 "모바일 헤더 압축" 블록)보다 항상 우선하도록 한다 — ID 선택자는
   그 어떤 클래스 조합보다 특이도가 높아 소스 순서와 무관하게 이긴다.
   두 버튼의 클릭 동작·href·데이터 연결은 전혀 건드리지 않는다.
   ========================================================================== */

.ap-brand-links-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

/* ---- 1. 공통 정렬 구조: 두 버튼에 동일하게 적용 ----
   position/top/transform으로 텍스트를 억지로 옮기지 않고, flex 중앙
   정렬 + line-height:1로만 수직 중앙을 맞춘다. */
#artistExternalLink,
#artistBioTrigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
  position:static !important;
  top:auto !important;
  transform:none !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  text-decoration:none !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- 2. 노트북·데스크톱 (min-width:769px) ---- */
@media (min-width:769px){
  #artistExternalLink,
  #artistBioTrigger{
    height:38px !important;
    min-height:38px !important;
    padding:0 16px !important;
    border-radius:19px !important;
    min-width:150px;
    max-width:100%;
  }
  #artistExternalLink{
    font-size:13px !important;
    font-weight:600 !important;
    border-color:rgba(212,180,109,.65) !important;
    color:rgba(212,180,109,.88) !important;
    box-shadow:none !important;
  }
  /* Artist Bio만 아주 약간 강조 — 크기 차이는 만들지 않는다 */
  #artistBioTrigger{
    font-size:13px !important;
    font-weight:650 !important;
    border-color:rgba(212,180,109,.82) !important;
    color:rgba(212,180,109,.95) !important;
    box-shadow:0 0 12px rgba(201,164,96,.06) !important;
  }
}

/* ---- 3. 모바일·태블릿 (max-width:768px) ---- */
@media (max-width:768px){
  #artistExternalLink,
  #artistBioTrigger{
    height:44px !important;
    min-height:44px !important;
    padding:0 18px !important;
    border-radius:22px !important;
    min-width:150px;
    max-width:100%;
    width:auto !important;
  }
  #artistExternalLink{
    font-size:14px !important;
    font-weight:600 !important;
    border-color:rgba(212,180,109,.65) !important;
    color:rgba(212,180,109,.88) !important;
    box-shadow:none !important;
  }
  /* Artist Bio: 이전보다 확실히 축소하되, 링크 버튼보다 아주 약간만
     강조(폰트 크기·굵기 차이만, 별도의 큰 width는 부여하지 않는다) */
  #artistBioTrigger{
    font-size:15px !important;
    font-weight:650 !important;
    border-color:rgba(212,180,109,.82) !important;
    color:rgba(212,180,109,.95) !important;
    box-shadow:0 0 12px rgba(201,164,96,.06) !important;
  }

  /* 우선순위(§7): 작품 > 작가명 > 언어선택 > FILTER > Artist Bio.
     작가명이 Artist Bio보다 시각적으로 먼저 인지되도록 순서를 명시한다. */
  #artistExternalLink{ order:1; }
  #artistBioTrigger{ order:2; }

  /* 패널이 낮아진 만큼 첫 작품이 더 위에서 시작하도록, 헤더 아래 여백을
     소폭 압축한다(그리드/카드 렌더링 로직 자체는 변경하지 않음). */
  .hero.hero-compressed{
    margin-bottom:2px !important;
  }
}

/* 무한 스크롤 sentinel — 시각적 공간을 차지하지 않음 (§29) */
#infiniteScrollSentinel{ width:100%; height:1px; }
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
@media (max-width:640px){
  .header-actions{ margin-top:8px; }
}
.auth-trigger-btn{
  background: transparent;
  color: #d6b76f;
  border: 1px solid rgba(214, 183, 111, 0.42);
  border-radius: 999px;
  min-width: 54px;
  min-height: 38px;
  height: auto;
  padding: 8px 21px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor:pointer;
  font-family:inherit;
  /* 로그인 작가명 KR+EN 두 줄 표시 (\n → 줄바꿈), 헤더 밖으로 넘치지 않게 */
  white-space:pre-line;
  text-align:center;
  max-width:min(46vw, 320px);
  overflow-wrap:break-word;
}
.auth-trigger-btn.is-signed-in{
  border-color: rgba(214, 183, 111, 0.62);
  background: rgba(212,180,109,.06);
}
.auth-trigger-btn:active{ opacity:0.75; }
.auth-trigger-btn:hover{ transform:translateY(-1px); }
@media (max-width:640px){
  .auth-trigger-btn{ font-size:12.5px; max-width:52vw; padding:7px 12px; }
}


.ap-auth-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  width:280px; max-width:calc(100vw - 32px);
  background:var(--panel); border:1px solid var(--line-strong);
  border-radius:14px; box-shadow:var(--shadow); padding:16px;
  display:flex; flex-direction:column; gap:10px;
  max-height:70vh; overflow-y:auto;
}
.ap-auth-form{ display:flex; flex-direction:column; gap:8px; }
.ap-auth-panel input, .ap-auth-panel select, .ap-auth-panel textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; color:var(--text); font-size:13px;
}
.ap-auth-panel textarea{ resize:vertical; font-family:inherit; line-height:1.5; }
.ap-auth-panel input::placeholder{ color:var(--soft); }
.ap-auth-btn{
  background:rgba(212,180,109,.12); border:1px solid var(--line-strong);
  border-radius:8px; color:var(--gold); padding:9px 11px; font-size:13px; cursor:pointer;
}
.ap-auth-btn:hover{ background:rgba(212,180,109,.2); }
.ap-auth-btn:disabled{ opacity:.5; cursor:default; }
.ap-auth-link-btn{
  background:none; border:none; color:var(--muted); font-size:12px;
  text-align:left; cursor:pointer; padding:2px 0;
}
.ap-auth-link-btn:hover{ color:var(--gold); }
.ap-auth-sep{ border:none; border-top:1px solid var(--line); margin:2px 0; }
.ap-auth-lab-link{ display:block; color:var(--soft); font-size:12px; text-decoration:none; }
.ap-auth-lab-link:hover{ color:var(--gold); }
.ap-auth-msg{ font-size:12px; color:var(--muted); min-height:14px; margin:0; }
.ap-auth-msg-error{ color:#e07a7a; }
.ap-auth-account .ap-auth-email{ margin:0 0 2px; color:var(--text); font-size:13px; word-break:break-all; }
.ap-auth-account .ap-auth-role{ margin:0 0 4px; color:var(--muted); font-size:12px; }
.ap-auth-check{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); cursor:pointer; }
.ap-auth-menu{ display:flex; flex-direction:column; gap:4px; }
.ap-auth-menu-item{
  background:none; border:none; text-align:left; color:var(--text);
  font-size:13px; padding:8px 6px; border-radius:6px; cursor:pointer; min-height:36px;
}
.ap-auth-menu-item:hover{ background:rgba(212,180,109,.08); }
.ap-auth-section-row{ cursor:default; }
.ap-auth-section-row:hover{ background:none; }
.ap-auth-note{ font-size:11px; color:var(--soft); margin:0; line-height:1.5; }
.ap-auth-preview{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted); }
.ap-auth-preview b{ color:var(--gold); font-weight:500; }
.ap-auth-progress{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.ap-auth-progress-bar{ height:100%; width:0%; background:var(--gold); transition:width .2s ease; }

/* Header id button: fixed min-width like LAB, grows with content,
   capped so ARCHIVE PRO title never wraps/pushes off screen */
#labLink{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px){ #labLink{ max-width:120px; } }

/* ============================================================
   Archive Pro App — 2026-07-22 통합 수정 ①②③ (Elsole)
   ① 모바일 로그인 패널 중앙 정렬 (§작업 1)
   ② 패널 높이 제한 + 내부 스크롤 (§작업 2)
   ③ iOS 입력 포커스 자동 확대 방지 · 배경 스크롤 잠금 (§작업 14)
   Additive only — 위쪽 기존 선택자는 건드리지 않는다.
   주의: .ap-auth-panel은 .site-header(sticky) 내부에 있지만, 헤더의
   backdrop-filter는 전역 `none !important`로 무력화되어 있으므로
   position:fixed가 뷰포트 기준으로 정확히 동작한다. 만약 나중에
   헤더 backdrop-filter를 되살리면 fixed 기준이 헤더로 바뀌므로
   이 블록도 함께 재검토할 것.
   ============================================================ */
@media (max-width: 767px) {
  /* ① 중앙 정렬 — transform을 쓰지 않는다.
     이유: 위쪽의 전역 성능 규칙 `*:hover{ transform:none !important }`
     (≤768px 블록, style.css ~1744행)가 iOS에서는 "탭"에도 :hover로
     적용되어, translateX(-50%) 중앙 정렬이 탭 순간 무효화되며 패널이
     오른쪽으로 밀리는 현상이 재현된다 (치우침 증상의 원인).
     → left/right + margin:auto 방식은 transform과 무관해 면역. */
  .ap-auth-panel,
  .ap-auth-panel:hover{
    position: fixed;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 460px;
    margin: 0 auto;
    transform: none;
    top: max(96px, calc(env(safe-area-inset-top) + 82px));

    /* ② 화면을 넘지 않는 높이 + 넘치는 내용은 패널 내부 스크롤.
       1행: dvh 미지원 구형 Safari fallback / 2행: 최신 브라우저 정밀값.
       2026-07-24: 하단에도 safe-area-inset-bottom(iPhone 홈 인디케이터,
       Android 제스처 내비게이션 바)을 반영해 패널 맨 아래 버튼/문구가
       시스템 UI에 가려지지 않게 한다(스펙 §12). */
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - max(96px, calc(env(safe-area-inset-top) + 82px)) - env(safe-area-inset-bottom, 0px) - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* 배경 딤 — DOM 추가 없이 box-shadow 확장으로 처리.
       딤 영역 탭 = wrap 바깥 pointerdown = 패널 닫힘 (cms-ui.js).
       전역 `*:hover{ box-shadow:none !important }`를 이기기 위해
       !important + :hover 병기 + 파일 후미(소스 순서) 3중 방어. */
    box-shadow: 0 0 0 100vmax rgba(6, 9, 13, 0.55), var(--shadow) !important;
  }

  /* ③-1 iOS Safari: 16px 미만 입력 포커스 시 페이지 자동 확대 방지 */
  .ap-auth-panel input,
  .ap-auth-panel select{
    font-size: 16px;
  }

  /* ③-2 패널 열림 중 배경 스크롤 잠금 (모바일 한정 — cms-ui.js가
     html에 .ap-auth-open을 토글) */
  html.ap-auth-open,
  html.ap-auth-open body{
    overflow: hidden;
  }
}

/* ============================================================
   Archive Pro App — 2026-07-22 모바일 헤더·상단 UI 압축 (엘솔)
   대상: 모바일 전 해상도 (@media ≤767px). 태블릿(ap-tablet-ui,
   ≥768px)과 데스크톱은 건드리지 않는다. 기능·로그인·검색 로직·
   작품 렌더링 구조 무변경 — 크기와 여백만.
   기존 규칙들이 !important 층이므로, 파일 끝(소스 순서 최후) +
   !important로 확정 우선권을 가진다. Additive only.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- 1. 로고: ARCHIVE PRO 축소 · Artist Edition 확대 ---- */
  .brand-row h1,
  .brand-home-link h1{
    font-size: clamp(20px, 5.6vw, 25px) !important;
    letter-spacing: .14em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .brand-subtitle{
    font-size: clamp(24px, 7.2vw, 34px) !important;
    letter-spacing: .025em !important;
    line-height: 1 !important;
    /* 기존 margin 5px 0 24px — 하단 24px가 모바일 헤더 비대의 주범 */
    margin: 3px 0 6px !important;
    white-space: nowrap !important;
  }
  .brand-title-group{ min-width: 0 !important; }

  /* ---- 2. 헤더 전체 높이 축소 + 로그인 버튼 수직 중앙 정렬 ----
     로그인 버튼 자체의 크기·디자인은 변경하지 않는다 (align만). */
  .site-header .header-inner{
    padding: 12px 0 8px !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .header-actions{
    margin-top: 0 !important;
    align-self: center !important;
  }

  /* ---- 3. 검색 영역 여백 최소화 + 검색창 52px/18px ---- */
  body.archive-entered #searchArea.controls,
  .controls{
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
  }
  .archive-search{
    min-height: 52px !important;
    border-radius: 18px !important;
  }
  .archive-search__input{ min-height: 44px !important; }

  /* ---- 4. 언어 선택 영역 간격 축소 + 탭 터치 타깃 보정 ----
     스펙 권장 min-height:52px는 다른 마크업(설명문 포함 대형 패널)
     기준 — 이 앱의 lang-tab은 34px 소형 pill이라 52px로 키우면
     "지나치게 높지 않게" 원칙과 충돌. Apple HIG 최소 터치 타깃
     44px로 상향하고 주변 여백을 줄여 순높이는 오히려 감소시킨다. */
  .hero.hero-compressed{
    padding-top: 6px !important;
    margin-top: 0 !important;
    gap: 4px !important;
  }
  .lang-inline{ padding: 8px 10px !important; }
  .lang-inline .lang-tab,
  .lang-inline .hero-home-link{
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
  }
  .lang-inline .hero-mode-line{ margin-top: 2px !important; }

  /* ---- 5. 결과 카운터 간격 축소 ---- */
  .stats-inline{
    padding: 6px 10px !important;
    min-height: auto !important;
  }
  body.archive-entered #resultsMeta,
  #resultsMeta{
    margin-top: 0px !important;
    margin-bottom: 6px !important;
  }
  .meta-row{ margin: 8px 2px 6px !important; }
}

/* ---- 6. 320~380px 미세 보정: clamp 최솟값은 유지, 자간·간격만 ---- */
@media (max-width: 380px) {
  .brand-row h1,
  .brand-home-link h1{ letter-spacing: .10em !important; }
  .brand-subtitle{ letter-spacing: .015em !important; }
  .site-header .header-inner{ gap: 8px !important; }
  .auth-trigger-btn{ padding: 7px 10px !important; }
}

/* ============================================================
   Archive Pro App — 2026-07-23 모바일 필터 기본 접힘 (엘솔)
   html.ap-mfilter-collapsed (모바일 전용 새 클래스; 레거시
   ap-filter-collapsed와 별개 — 그 규칙은 미디어 스코프가 없어
   재사용하지 않는다). 접힘은 UI만 숨김: 검색 조건·언어·결과 유지.
   파일 끝(최후 소스 순서) + !important로 위 압축 블록보다 우선.
   ============================================================ */
@media (max-width: 767px) {
  /* Filter 토글 버튼 — 작품 수 카운터(hero) 바로 아래, 다크·골드 톤 */
  .ap-filter-toggle-wrap{
    display: flex;
    justify-content: center;
    margin: 10px 0 2px;
  }
  body.archive-entered .ap-filter-toggle-wrap{ order: 3 !important; } /* hero(3) 뒤, searchArea(4) 앞 */
  .ap-filter-toggle-btn{
    width: 100%;
    min-height: 48px;
    background: rgba(212,180,109,.05);
    border: 1px solid rgba(214,183,111,.42);
    border-radius: 14px;
    color: #d6b76f;
    font: inherit;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ap-filter-toggle-btn:active{ opacity: .78; }

  /* 접힘 상태: 필터 패널(UI)만 숨김 — 상태·결과·언어는 그대로.
     기존 #searchArea의 max-height/opacity transition을 그대로 타서
     펼침/접힘이 부드럽게 애니메이션된다. */
  html.ap-mfilter-collapsed body.archive-entered #searchArea{
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    pointer-events: none !important;
    /* 시각뿐 아니라 접근성 트리·탭 포커스에서도 제외. visibility는
       0.24s 지연시켜 max-height/opacity 접힘 애니메이션이 끝난 뒤 숨김. */
    visibility: hidden !important;
    transition:
      max-height .22s ease, opacity .2s ease,
      padding .22s ease, margin .22s ease,
      visibility 0s linear .24s !important;
  }
}

/* 데스크톱(fine pointer): 버튼 숨김, 필터 항상 펼침.
   태블릿(html.ap-tablet-ui)은 아래 태블릿 블록이 담당하므로 제외 —
   회전/리사이즈로 판정이 바뀌면 인라인 스크립트가 클래스를 재평가한다. */
@media (min-width: 768px) {
  html:not(.ap-tablet-ui) .ap-filter-toggle-wrap{ display: none !important; }
}

/* ============================================================
   Archive Pro App — 2026-07-22 태블릿 필터 기본 접힘 (엘솔)
   아이패드·안드로이드 패드(≥768px + coarse pointer = ap-tablet-ui)도
   모바일과 동일하게 기본 접힘 + Filter ▼ 토글 버튼 노출.
   미디어쿼리 대신 html.ap-tablet-ui 클래스 스코프 사용 — 판정 로직을
   인라인 감지 스크립트 한 곳(pointer/hover 기반, UA 무관)에 집중.
   규칙 내용은 위 모바일 블록과 동일하게 유지한다 (동작 일관성).
   ============================================================ */
html.ap-tablet-ui .ap-filter-toggle-wrap{
  display: flex;
  justify-content: center;
  margin: 10px 0 2px;
}
html.ap-tablet-ui body.archive-entered .ap-filter-toggle-wrap{ order: 3 !important; }
html.ap-tablet-ui .ap-filter-toggle-btn{
  width: 100%;
  max-width: 520px;            /* 태블릿 폭에서 풀블리드 방지 (센터 정렬) */
  min-height: 48px;
  background: rgba(212,180,109,.05);
  border: 1px solid rgba(214,183,111,.42);
  border-radius: 14px;
  color: #d6b76f;
  font: inherit;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
html.ap-tablet-ui .ap-filter-toggle-btn:active{ opacity: .78; }

/* 접힘 상태 — 모바일 블록과 동일: UI만 숨김, 상태·결과·언어 유지 */
html.ap-tablet-ui.ap-mfilter-collapsed body.archive-entered #searchArea{
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition:
    max-height .22s ease, opacity .2s ease,
    padding .22s ease, margin .22s ease,
    visibility 0s linear .24s !important;
}

/* ============================================================================
   2026-07-24 추가 — Portfolio Builder (20 Works PDF)
   독립 기능 스타일. 기존 .hero-home-link/.lang-inline/필터/뷰어 규칙은
   전혀 건드리지 않는다 (스펙 §28).
   ============================================================================ */

/* ---- 1. 공개 화면 작은 보조 행 + 버튼 (§2) ---- */
.ap-portfolio-row{
  display:flex;
  width:100%;
}
.ap-portfolio-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer;
  width:auto;
  min-width:0;
  color:rgba(213,176,103,.82);
  border:1px solid rgba(213,176,103,.48);
  background:rgba(213,176,103,.035);
  transition:background .15s ease, border-color .15s ease;
}
.ap-portfolio-btn:hover,
.ap-portfolio-btn:active{
  background:rgba(213,176,103,.09);
  border-color:rgba(213,176,103,.72);
}

/* 데스크톱: 링크/Artist Bio보다 확실히 작게 */
@media (min-width:769px){
  .ap-portfolio-btn{
    height:28px;
    min-height:28px;
    padding:0 12px;
    border-radius:14px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.03em;
  }
}

/* 모바일 */
@media (max-width:768px){
  .ap-portfolio-btn{
    height:32px;
    min-height:32px;
    padding:0 14px;
    border-radius:16px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.03em;
  }
}

/* ---- 2. 비차단 토스트 안내 ---- */
.ap-portfolio-toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  transform:translate(-50%,12px);
  max-width:min(92vw,420px);
  padding:12px 18px;
  border-radius:14px;
  background:rgba(10,14,22,.94);
  border:1px solid rgba(212,180,109,.32);
  color:#f4efe6;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  white-space:pre-line;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:10080;
}
.ap-portfolio-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}

/* ---- 3. Portfolio Builder 전체화면 (artist-bio-viewer와 동일 톤) ---- */
.ap-portfolio-viewer{
  position:fixed;
  inset:0;
  z-index:10060;
  background:#050914;
  color:#e7e7ea;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.ap-portfolio-viewer[hidden]{ display:none; }

.ap-pf-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 14px;
  background:rgba(5,9,20,.96);
  border-bottom:1px solid rgba(202,169,99,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.ap-pf-header h2{
  margin:0;
  font-size:14px;
  letter-spacing:.06em;
  color:#d4b46d;
  outline:none;
}
.ap-pf-close{
  min-width:40px;
  min-height:40px;
  border-radius:999px;
  border:1px solid rgba(202,169,99,.3);
  background:transparent;
  color:#d1b274;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.ap-pf-close:hover{ background:rgba(202,169,99,.12); }

.ap-pf-body{
  width:min(100%,960px);
  margin:0 auto;
  padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 32px);
}

.ap-pf-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:16px;
}
.ap-pf-step{
  width:26px; height:26px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px;
  border:1px solid rgba(202,169,99,.32);
  color:rgba(231,231,234,.55);
}
.ap-pf-step.active{ border-color:#d1b274; color:#050914; background:#d1b274; font-weight:700; }
.ap-pf-step.done{ border-color:rgba(209,178,116,.6); color:#d1b274; }
.ap-pf-step-sep{ width:18px; height:1px; background:rgba(202,169,99,.24); }

.ap-pf-sub{ margin:0 0 12px; font-size:13px; color:rgba(231,231,234,.72); text-align:center; }
.ap-pf-count{ text-align:center; font-size:13px; color:#d4b46d; font-weight:700; margin-bottom:10px; }

.ap-pf-filters{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.ap-pf-filters select,
.ap-pf-filters input{
  flex:1 1 160px;
  min-height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(212,180,109,.26);
  background:rgba(11,19,36,.6);
  color:#e7e7ea;
  font:inherit;
  font-size:13px;
}

.ap-pf-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:16px;
}
@media (min-width:640px){ .ap-pf-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:960px){ .ap-pf-grid{ grid-template-columns:repeat(6,1fr); } }

.ap-pf-card{
  display:flex; flex-direction:column; align-items:stretch;
  gap:6px;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(212,180,109,.18);
  background:rgba(11,19,36,.4);
  cursor:pointer;
  text-align:left;
  min-height:44px;
}
.ap-pf-card.selected{ border-color:#d1b274; box-shadow:0 0 0 1px rgba(209,178,116,.5); }
.ap-pf-card-thumb-wrap{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:8px; background:#111a2b; }
.ap-pf-card-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.ap-pf-card-badge{
  position:absolute; top:6px; left:6px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:#d1b274; color:#050914;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ap-pf-card-id{ font-size:11px; color:rgba(231,231,234,.6); padding:0 2px; }

.ap-pf-order-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.ap-pf-order-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(212,180,109,.18);
  background:rgba(11,19,36,.4);
}
.ap-pf-order-item.dragging{ opacity:.4; }
.ap-pf-order-num{ min-width:22px; text-align:center; color:#d4b46d; font-weight:700; font-size:13px; }
.ap-pf-order-thumb{ width:44px; height:44px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.ap-pf-order-title{ flex:1 1 auto; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-pf-order-arrows{ display:flex; flex-direction:column; gap:2px; }
.ap-pf-order-up, .ap-pf-order-down{
  width:32px; height:22px;
  border-radius:6px;
  border:1px solid rgba(212,180,109,.24);
  background:transparent;
  color:#d1b274;
  font-size:10px;
  cursor:pointer;
}

.ap-pf-settings-form{ display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.ap-pf-field{ border:1px solid rgba(212,180,109,.18); border-radius:10px; padding:10px 14px; }
.ap-pf-field legend{ padding:0 6px; font-size:12px; color:#d4b46d; letter-spacing:.04em; }
.ap-pf-field label{ display:inline-flex; align-items:center; gap:6px; margin:4px 14px 4px 0; font-size:13px; }

.ap-pf-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ap-pf-btn{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(212,180,109,.34);
  background:transparent;
  color:#d1b274;
  font:inherit;
  font-size:13px;
  white-space:pre-line;
  line-height:1.3;
  cursor:pointer;
}
.ap-pf-btn:disabled{ opacity:.5; cursor:default; }
.ap-pf-btn-primary{ background:#d1b274; color:#050914; font-weight:700; border-color:#d1b274; }

.ap-pf-status{ text-align:center; margin:12px 0; min-height:20px; font-size:13px; }
.ap-pf-status-ok{ color:#8fd19e; }
.ap-pf-status-error{ color:#e5a2a2; }
.ap-pf-fail-list{ margin:8px 0; padding-left:0; list-style:none; font-size:12px; color:rgba(231,231,234,.72); }
.ap-pf-fail-actions{ display:flex; gap:10px; justify-content:center; }

/* ---- 4. PDF 페이지 템플릿 (미리보기 + 실제 렌더링 공용, 흰 배경 A4) ---- */
.ap-pf-page{
  background:#ffffff;
  color:#1a1a1a;
  position:relative;
  box-sizing:border-box;
  font-family:inherit;
  overflow:hidden;
}
.ap-pf-preview-page-frame{
  width:100%;
  max-width:360px;
  aspect-ratio:210/297;
  margin:0 auto 18px;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.ap-pf-preview-scaled{
  transform:scale(0.4534); /* 360/794 */
  transform-origin:top left;
}

.ap-pf-cover{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 50px; text-align:center; }
.ap-pf-cover-mark{ font-size:14px; letter-spacing:.3em; color:#b8963e; margin-bottom:40px; }
.ap-pf-cover-img-wrap{ width:100%; max-width:520px; height:520px; display:flex; align-items:center; justify-content:center; margin-bottom:40px; }
.ap-pf-cover-img-empty{ background:#f2f2f2; }
.ap-pf-cover-img{ max-width:100%; max-height:100%; object-fit:contain; }
.ap-pf-cover-name{ font-size:28px; font-weight:700; letter-spacing:.04em; margin-bottom:10px; }
.ap-pf-cover-sub{ font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:#666; margin-bottom:6px; }
.ap-pf-cover-year{ font-size:13px; color:#999; }

.ap-pf-bio{ padding:70px 60px; display:flex; flex-direction:column; }
.ap-pf-bio-name{ font-size:18px; font-weight:700; margin-bottom:10px; }
.ap-pf-bio-rule{ width:60px; height:2px; background:#b8963e; margin-bottom:24px; }
.ap-pf-bio-text{ font-size:14px; line-height:1.9; white-space:pre-line; word-break:keep-all; }
.ap-pf-bio-text-en{ margin-top:20px; color:#555; }
.ap-pf-bio-link{ margin-top:30px; font-size:12px; color:#999; }

.ap-pf-work{ display:flex; flex-direction:column; padding:44px 50px 36px; }
.ap-pf-work-imgwrap{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; margin-bottom:24px; }
.ap-pf-work-img{ max-width:100%; max-height:100%; object-fit:contain; }
.ap-pf-work-meta{ text-align:center; }
.ap-pf-work-row{ font-size:13px; color:#333; margin-bottom:4px; }
.ap-pf-work-row.ap-pf-title-kr{ font-size:16px; font-weight:700; color:#111; margin-bottom:6px; }
.ap-pf-work-row.ap-pf-title-en{ font-size:13px; font-style:italic; color:#444; margin-bottom:6px; }
.ap-pf-work-label{ color:#999; margin-right:6px; }
.ap-pf-work-pageno{ position:absolute; bottom:20px; right:28px; font-size:11px; color:#aaa; }

.ap-pf-last{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px; }
.ap-pf-last-name{ font-size:18px; font-weight:700; margin-bottom:14px; }
.ap-pf-last-line{ font-size:13px; color:#444; margin-bottom:6px; }
.ap-pf-last-credit{ position:absolute; bottom:30px; font-size:10px; letter-spacing:.08em; color:#bbb; }

/* ---- 5. 로그인 패널 하단 Portfolio 안내 문구 (§5) — 버튼처럼 보이지 않게 ---- */
.ap-auth-portfolio-note{
  margin-top:16px;
  padding:0 8px;
  font-size:11px;
  line-height:1.55;
  font-weight:400;
  color:rgba(255,255,255,.48);
  text-align:center;
  white-space:pre-line;
}

/* ============================================================================
   2026-07-24 추가 — 모바일·태블릿 상단 컨트롤 UI 전용 교정
   (신규 요구사항: 데스크톱은 1px도 건드리지 않음)

   적용 범위: max-width:1024px 이거나 (hover:none)+(pointer:coarse)인 모든
   기기. 데스크톱 보호 조건은 정확히 그 반대 —
     @media (min-width:1025px) and (hover:hover) and (pointer:fine)
   — 이므로 두 조건은 절대 동시에 참이 될 수 없다. 즉 아래 블록의 어떤
   선택자도 진짜 데스크톱(넓은 화면 + 마우스)에는 매치되지 않는다는 것을
   미디어쿼리 자체가 수학적으로 보장한다. 파일 맨 끝 + ID 선택자 +
   !important로 그 어떤 앞쪽 규칙(640/767/768px 기준의 기존 규칙 포함)도
   확실히 이긴다.

   대상 요소 매핑 (실제 프로젝트 클래스명):
   - archive-controls    → .lang-inline  (상단 컨트롤 패널 전체)
   - archive-language-row→ .lang-tabs    (KR/EN/KR+EN)
   - archive-secondary-row→ .ap-brand-links-row (dungzak.art + Artist Bio)
   - artist-link-button  → #artistExternalLink
   - artist-bio-button   → #artistBioTrigger
   - language-reference  → .hero-mode-line (한국어 기준)
   - archive-pdf-row     → .ap-portfolio-row (20점 PDF, §12)
   ============================================================================ */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

  /* ---- §8: 패널 전체 여백 통일 — 개별 margin 대신 부모 gap 하나로 ---- */
  .lang-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    column-gap:8px !important;
    row-gap:8px !important;
    padding:12px !important;
    border-radius:18px !important;
    height:auto !important;
    min-height:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* 1행: 언어 버튼 — 항상 패널 전체 폭을 차지해 다음 요소들을 다음 줄로 보낸다 */
  .lang-inline .lang-tabs{
    flex:1 1 100% !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    min-height:0 !important;
  }
  .lang-inline .lang-tab{
    height:40px !important;
    min-height:40px !important;
    padding:0 8px !important;
    border-radius:20px !important;
    font-size:13px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    width:auto !important;
    margin:0 !important;
  }

  /* 2행: 링크 / Artist Bio — 두 버튼 공통 규격(§5·§10) */
  .ap-brand-links-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  #artistExternalLink,
  #artistBioTrigger{
    height:36px !important;
    min-height:36px !important;
    padding:0 14px !important;
    border-radius:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    line-height:1 !important;
    white-space:nowrap !important;
    width:auto !important;
    margin:0 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    /* §6: 텍스트 길이가 달라도 시각적 무게 균형 — 동일 최소폭 + 상한 */
    flex:0 1 auto !important;
    min-width:118px !important;
    max-width:calc(50% - 4px) !important;
  }
  #artistExternalLink{
    font-size:12px !important;
    font-weight:600 !important;
  }
  /* Artist Bio는 링크보다 아주 약간만 강조 — 큰 폭/그림자/과도한 padding 제거 */
  #artistBioTrigger{
    font-size:12.5px !important;
    font-weight:650 !important;
  }

  /* §12: 향후 PDF 버튼 자리 — 패널이 다시 커지지 않도록 작게 고정 */
  .ap-portfolio-row{
    display:flex !important;
    align-items:center !important;
    min-height:28px !important;
    margin:0 !important;
  }
  .ap-portfolio-btn{
    height:28px !important;
    min-height:28px !important;
    padding:0 11px !important;
    font-size:10.5px !important;
    border-radius:14px !important;
    line-height:1 !important;
  }

  /* 3행: 한국어 기준 — 버튼 행 바로 아래, 작게 */
  .lang-inline .hero-mode-line{
    margin:4px 0 0 !important;
    padding-left:2px !important;
  }

  /* §11: 보이는 크기는 작게, 실제 탭 영역은 44px 이상 확보 */
  #artistExternalLink,
  #artistBioTrigger,
  .lang-inline .lang-tab{
    position:relative !important;
  }
  #artistExternalLink::before,
  #artistBioTrigger::before,
  .lang-inline .lang-tab::before{
    content:"";
    position:absolute;
    inset:-4px;
  }
}

/* ---- §3·§4·§7: 모바일 전용 (max-width:600px) — 3단 세로 구조 ---- */
@media (max-width:600px){
  .lang-inline .hero-mode-line{
    flex:1 1 100% !important; /* 항상 자기 줄로 — PDF 행이 있어도 뒤섞이지 않음 */
    font-size:10.5px !important;
    line-height:1.2 !important;
    color:rgba(255,255,255,.48) !important;
  }
  .ap-brand-links-row{
    flex:1 1 100% !important; /* 2행 전체 폭 — 다음 요소는 자동으로 다음 줄 */
  }
}

/* ---- §9: 태블릿 전용 (601px~1024px, 폭 기준) — 2행 구조 ---- */
@media (min-width:601px) and (max-width:1024px){
  /* dungzak.art / Artist Bio / 한국어 기준을 같은 2행에 나란히 둔다 —
     셋 다 flex-basis를 100%로 강제하지 않아 자연스럽게 한 줄에 흐른다. */
  .ap-brand-links-row{
    flex:0 0 auto !important;
  }
  .lang-inline .hero-mode-line{
    flex:0 0 auto !important;
    margin:0 0 0 2px !important;
    font-size:11px !important;
  }
  .lang-inline .lang-tab{
    height:36px !important;
    min-height:36px !important;
    padding:0 16px !important;
    font-size:12px !important;
  }
  #artistExternalLink,
  #artistBioTrigger{
    height:34px !important;
    min-height:34px !important;
    padding:0 14px !important;
    font-size:12px !important;
    max-width:none !important; /* 태블릿은 2행에 셋이 함께 있어 50% 제한이 불필요 */
    min-width:0 !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 상단 버튼 시스템 최종 통일 (FINAL)
   KR/EN/KR+EN, 작가 링크, Artist Bio, 20점 PDF, 한국어 기준 문구를 하나의
   디자인 시스템으로 통합한다. 이전 턴들의 개별 버튼별 !important 규칙은
   그대로 남겨두되(삭제 시 위험 대비 최소화), 이 블록이 파일 맨 끝 + ID
   선택자 + !important로 모든 브레이크포인트에서 최종 확정 우선권을 가진다.
   이번엔 데스크톱(min-width:1025px)도 명시적으로 이 통일 대상에 포함된다
   — 기능(라우팅/로그인/Firestore/PDF 생성)은 전혀 건드리지 않는다.

   구조 트릭: .ap-brand-links-row / .ap-portfolio-row 두 래퍼 div를
   display:contents로 만들어, 그 자식(#artistExternalLink,
   #artistBioTrigger, #portfolioPdfTrigger)이 .lang-inline의 직계 flex/grid
   자식처럼 동작하게 한다. index.html 마크업은 전혀 바꾸지 않는다.
   ============================================================================ */

/* ---- §2·§3: 모든 상단 버튼 공통 구조 + 색상 (브레이크포인트 무관) ---- */
.ap-brand-links-row,
.ap-portfolio-row{
  display:contents !important;
}

.lang-inline .lang-tab,
#artistExternalLink,
#artistBioTrigger,
.ap-portfolio-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
  text-decoration:none !important;
  margin:0 !important;
  position:relative !important;
  top:auto !important; bottom:auto !important;
  transform:none !important;
  flex-shrink:0;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease,
    transform 100ms ease !important;
}
.lang-inline .lang-tab::before,
#artistExternalLink::before,
#artistBioTrigger::before,
.ap-portfolio-btn::before{
  content:"";
  position:absolute;
  inset:-4px; /* §11: 보이는 크기는 작게, 터치 영역은 44px 이상 */
}

/* 기본(비활성) 버튼 색 */
.lang-inline .lang-tab,
#artistExternalLink{
  color:rgba(215,178,105,.82) !important;
  border:1px solid rgba(215,178,105,.52) !important;
  background:rgba(215,178,105,.025) !important;
  box-shadow:none !important;
}
/* 활성 언어 버튼 */
.lang-inline .lang-tab.active{
  color:rgba(255,255,255,.96) !important;
  border-color:rgba(215,178,105,.82) !important;
  background:rgba(215,178,105,.11) !important;
}
/* Artist Bio — 링크보다 아주 약간만 강조 */
#artistBioTrigger{
  color:rgba(222,184,108,.96) !important;
  border:1px solid rgba(222,184,108,.84) !important;
  background:rgba(222,184,108,.055) !important;
  box-shadow:none !important;
}
/* 20점 PDF — 검정/회색 배경 전부 제거, 골드 계열로 통일 */
.ap-portfolio-btn{
  color:rgba(215,178,105,.82) !important;
  border:1px solid rgba(215,178,105,.50) !important;
  background:rgba(215,178,105,.025) !important;
  box-shadow:none !important;
}
/* §13: 공개 PDF가 아직 없을 때 — 숨기지 않고 opacity만 낮춘다 */
.ap-portfolio-btn.is-unavailable{
  opacity:.55;
}

/* ---- §10: hover/active/focus-visible (hover 가능 기기만) ---- */
@media (hover:hover) and (pointer:fine){
  .lang-inline .lang-tab:hover,
  #artistExternalLink:hover,
  #artistBioTrigger:hover,
  .ap-portfolio-btn:hover{
    background:rgba(215,178,105,.085) !important;
    border-color:rgba(215,178,105,.76) !important;
  }
}
.lang-inline .lang-tab:active,
#artistExternalLink:active,
#artistBioTrigger:active,
.ap-portfolio-btn:active{
  transform:scale(0.98) !important;
}
.lang-inline .lang-tab:focus-visible,
#artistExternalLink:focus-visible,
#artistBioTrigger:focus-visible,
.ap-portfolio-btn:focus-visible{
  outline:2px solid rgba(215,178,105,.72) !important;
  outline-offset:2px !important;
}

.lang-inline .hero-mode-line{
  line-height:1 !important;
}

/* ============================================================================
   ---- §4: 노트북·데스크톱 (min-width:1025px) — 한 줄 배치 ----
   ============================================================================ */
@media (min-width:1025px){
  .lang-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
    height:auto !important;
    min-height:0 !important;
  }
  .lang-inline .lang-tabs{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-shrink:0 !important;
  }
  .lang-inline .lang-tab{
    height:34px !important; min-height:34px !important;
    padding:0 14px !important; border-radius:17px !important;
    font-size:12px !important; font-weight:600 !important;
  }
  #artistExternalLink{
    height:34px !important; min-height:34px !important;
    padding:0 15px !important; border-radius:17px !important;
    font-size:12px !important; font-weight:600 !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
  }
  #artistBioTrigger{
    height:34px !important; min-height:34px !important;
    padding:0 17px !important; border-radius:17px !important;
    font-size:12.5px !important; font-weight:650 !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
  }
  .ap-portfolio-btn{
    height:30px !important; min-height:30px !important;
    padding:0 13px !important; border-radius:15px !important;
    font-size:11px !important; font-weight:600 !important;
    align-self:center !important;
    width:auto !important; min-width:0 !important;
  }
  .lang-inline .hero-mode-line{
    font-size:10.5px !important;
    margin-left:2px !important;
    margin-top:0 !important;
    color:rgba(255,255,255,.55) !important;
    flex-shrink:1 !important;
    white-space:nowrap !important;
  }
}

/* ---- §5: 중형 노트북 (1025px~1365px) — 무리하게 압축하지 않음,
   공간 부족하면 한국어 기준만 자동으로 다음 줄로 (flex-wrap) ---- */
@media (min-width:1025px) and (max-width:1365px){
  .lang-inline{
    flex-wrap:wrap !important;
    row-gap:6px !important;
  }
  .lang-inline .hero-mode-line{
    flex:0 1 auto !important;
  }
}

/* ============================================================================
   ---- §6: 태블릿 (601px~1024px) — 2행 구조 ----
   ============================================================================ */
@media (min-width:601px) and (max-width:1024px){
  .lang-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    column-gap:9px !important;
    row-gap:9px !important;
    padding:13px 14px !important;
    height:auto !important;
    min-height:0 !important;
  }
  .lang-inline .lang-tabs{
    flex:1 1 100% !important; /* 1행 전체 — 나머지는 자동으로 2행으로 */
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
  }
  .lang-inline .lang-tab{
    height:38px !important; min-height:38px !important;
    padding:0 12px !important; border-radius:19px !important;
    font-size:13px !important;
    width:auto !important;
  }
  #artistExternalLink{
    height:34px !important; min-height:34px !important;
    padding:0 14px !important; border-radius:17px !important;
    font-size:12px !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    flex:0 0 auto !important;
  }
  #artistBioTrigger{
    height:34px !important; min-height:34px !important;
    padding:0 15px !important; border-radius:17px !important;
    font-size:12.5px !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    flex:0 0 auto !important;
  }
  .ap-portfolio-btn{
    height:30px !important; min-height:30px !important;
    padding:0 12px !important; border-radius:15px !important;
    font-size:11px !important;
    width:auto !important; min-width:0 !important;
    flex:0 0 auto !important;
  }
  .lang-inline .hero-mode-line{
    font-size:10.5px !important;
    margin-left:1px !important;
    margin-top:0 !important;
    flex:0 0 auto !important;
  }
}

/* ============================================================================
   ---- §7: 모바일 (max-width:600px) — 3행 구조, 2행은 3열 그리드 ----
   ============================================================================ */
@media (max-width:600px){
  .lang-inline{
    display:grid !important;
    grid-template-columns:1fr 1.18fr .92fr !important;
    column-gap:8px !important;
    row-gap:8px !important;
    align-items:center !important;
    padding:12px !important;
    border-radius:18px !important;
    height:auto !important;
    min-height:0 !important;
  }
  .lang-inline .lang-tabs{
    grid-column:1 / -1 !important; /* 1행 전체 */
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  .lang-inline .lang-tab{
    height:40px !important; min-height:40px !important;
    padding:0 8px !important; border-radius:20px !important;
    font-size:13px !important;
    width:100% !important;
  }
  /* 2행: 링크 / Artist Bio / 20점 PDF — 3열 그리드에 나란히 */
  #artistExternalLink{
    grid-column:1 !important;
    height:38px !important; min-height:38px !important;
    padding:0 8px !important; border-radius:19px !important;
    font-size:12px !important; font-weight:600 !important;
    width:100% !important; min-width:0 !important; max-width:none !important;
  }
  #artistBioTrigger{
    grid-column:2 !important;
    height:38px !important; min-height:38px !important;
    padding:0 8px !important; border-radius:19px !important;
    font-size:12.5px !important; font-weight:650 !important;
    width:100% !important; min-width:0 !important; max-width:none !important;
  }
  .ap-portfolio-btn{
    grid-column:3 !important;
    height:34px !important; min-height:34px !important;
    align-self:center !important;
    padding:0 7px !important; border-radius:17px !important;
    font-size:11.5px !important; font-weight:600 !important;
    width:100% !important; min-width:0 !important;
  }
  /* 3행: 한국어 기준 — 전체 폭, 버튼 바로 아래 */
  .lang-inline .hero-mode-line{
    grid-column:1 / -1 !important;
    margin:0 !important;
    padding-left:2px !important;
    font-size:10.5px !important;
    color:rgba(255,255,255,.48) !important;
  }
}

/* ---- §8: 작은 모바일 (max-width:360px) ----
   2행: [dungzak.art][Artist Bio] / 3행: [20점 PDF](왼쪽, 작게) / 4행: 한국어 기준 */
@media (max-width:360px){
  .lang-inline{
    grid-template-columns:1fr 1fr !important;
  }
  #artistExternalLink{ grid-column:1 !important; }
  #artistBioTrigger{ grid-column:2 !important; }
  .ap-portfolio-btn{
    grid-column:1 !important;
    width:auto !important;
    min-width:96px !important;
    justify-self:start !important;
  }
  .lang-inline .hero-mode-line{
    grid-column:1 / -1 !important;
  }
}

/* ---- §9: 상단 패널 높이 — 고정 height 금지 (전 구간 공통) ---- */
.lang-inline{
  height:auto !important;
  min-height:0 !important;
}

/* ============================================================================
   2026-07-24 추가 — 최종 UI 밸런스 조정: 6개 버튼 완전 통일 (TRUE FINAL)
   KR / EN / KR+EN / dungzak.art / Artist Bio / 20점 PDF — 이 6개를 "하나의
   툴바"처럼 완전히 동일한 높이·패딩·radius·font-weight·line-height로
   맞춘다. Artist Bio만 크고 진하게 보이던 이전 단계의 강조를 여기서
   전부 되돌린다("작품이 주인공, 버튼은 도구"). 이 블록이 파일 맨 끝이라
   지금까지의 모든 버튼별 차등 규칙(desktop/tablet/mobile 각각 다른
   px, Artist Bio만 굵게 등)을 최종적으로 덮어쓴다. 기능/라우팅은 무변경.
   ============================================================================ */

/* ---- §1·§2·§3·§6: 6개 버튼 완전히 동일한 디자인 시스템, 전 브레이크포인트 공통 ---- */
.lang-inline .lang-tab,
#artistExternalLink,
#artistBioTrigger,
.ap-portfolio-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  height:37px !important;
  min-height:37px !important;
  padding:0 17px !important;
  border-radius:999px !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
  text-decoration:none !important;
  margin:0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  flex:0 0 auto !important;
  color:rgba(215,178,105,.82) !important;
  border:1px solid rgba(215,178,105,.52) !important;
  background:rgba(215,178,105,.025) !important;
  box-shadow:none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease,
    transform 100ms ease !important;
}

/* 활성 언어 버튼만 "선택됨" 상태로 구분 — 디자인 시스템(크기·모양)은 동일,
   상태(색)만 다르다. 이건 6개 버튼 간 위계가 아니라 같은 버튼의 on/off. */
.lang-inline .lang-tab.active{
  color:rgba(255,255,255,.96) !important;
  border-color:rgba(215,178,105,.82) !important;
  background:rgba(215,178,105,.11) !important;
}

/* 20점 PDF: 공개 PDF가 아직 없을 때만 낮은 opacity(§13, 기능 상태 표시) —
   디자인 시스템 자체는 다른 5개 버튼과 완전히 동일하다. */
.ap-portfolio-btn.is-unavailable{
  opacity:.55 !important;
}

@media (hover:hover) and (pointer:fine){
  .lang-inline .lang-tab:hover,
  #artistExternalLink:hover,
  #artistBioTrigger:hover,
  .ap-portfolio-btn:hover{
    background:rgba(215,178,105,.085) !important;
    border-color:rgba(215,178,105,.76) !important;
  }
}
.lang-inline .lang-tab:active,
#artistExternalLink:active,
#artistBioTrigger:active,
.ap-portfolio-btn:active{
  transform:scale(0.98) !important;
}
.lang-inline .lang-tab:focus-visible,
#artistExternalLink:focus-visible,
#artistBioTrigger:focus-visible,
.ap-portfolio-btn:focus-visible{
  outline:2px solid rgba(215,178,105,.72) !important;
  outline-offset:2px !important;
}

/* ---- §8: 버튼 그룹 ↔ 검색/필터 영역 사이 여백 살짝 확보 ---- */
.hero.hero-compressed{
  margin-bottom:14px !important;
}

/* ============================================================================
   레이아웃 — 언어 버튼은 항상 1행. dungzak.art/Artist Bio/20점 PDF는
   항상 같은 행에서 flex로 나란히(고정 폭 비율 없음, 내용 크기만큼만).
   ============================================================================ */
.lang-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  column-gap:11px !important;
  row-gap:10px !important;
  height:auto !important;
  min-height:0 !important;
}
.lang-inline .lang-tabs{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:11px !important;
}

/* 데스크톱(min-width:1025px): 전부 한 줄 */
@media (min-width:1025px){
  .lang-inline{ flex-wrap:nowrap !important; padding:10px 14px !important; }
}
/* 중형 노트북(1025~1365px): 공간 부족하면 한국어 기준만 자동으로 다음 줄 */
@media (min-width:1025px) and (max-width:1365px){
  .lang-inline{ flex-wrap:wrap !important; }
  .lang-inline .hero-mode-line{ flex:0 1 auto !important; }
}

/* 태블릿(601~1024px): 1행 언어, 2행 dungzak.art·Artist Bio·20점 PDF·한국어기준 */
@media (min-width:601px) and (max-width:1024px){
  .lang-inline{ padding:13px 14px !important; }
  .lang-inline .lang-tabs{ flex:1 1 100% !important; }
}

/* 모바일(max-width:600px): 1행 언어 / 2행 세 버튼(flex, 자동 폭) / 3행 한국어기준 */
@media (max-width:600px){
  .lang-inline{
    padding:12px !important;
    border-radius:18px !important;
    justify-content:flex-start !important;
  }
  .lang-inline .lang-tabs{
    flex:1 1 100% !important;
    justify-content:flex-start !important;
  }
  /* dungzak.art / Artist Bio / 20점 PDF — 셋 다 폭 자동, 같은 행에서 나란히 */
  #artistExternalLink,
  #artistBioTrigger,
  .ap-portfolio-btn{
    flex:0 0 auto !important;
  }
  .lang-inline .hero-mode-line{
    flex:1 1 100% !important;
    margin:0 !important;
    padding-left:2px !important;
    font-size:10.5px !important;
    color:rgba(255,255,255,.5) !important;
  }
}

/* 초소형 모바일(max-width:360px)도 동일 규칙 유지 — 이전 단계의 "PDF만
   다음 줄로 분리" 처리를 되돌린다(스펙: 세 버튼은 항상 같은 행). 셋 다
   내용 크기만큼만 차지하므로 320px 폭에서도 자연스럽게 한 줄에 들어가고,
   정말 공간이 부족한 경우에만 flex-wrap이 마지막 버튼을 다음 줄로 보낸다. */
@media (max-width:360px){
  .lang-inline{ grid-template-columns:none !important; display:flex !important; }
  #artistExternalLink,
  #artistBioTrigger,
  .ap-portfolio-btn{
    grid-column:auto !important;
    justify-self:auto !important;
    width:auto !important;
    min-width:0 !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 UI 미세 조정: PDF↑ / Artist Bio↓ / dungzak.art 기준 유지
   최종 시각적 우선순위: KR·EN·KR+EN > 20점 PDF > dungzak.art = Artist Bio.
   dungzak.art(#artistExternalLink)는 기준 버튼 — 이 블록에서 전혀 건드리지
   않는다. 높이·글자크기·테두리 두께는 세 버튼 모두 그대로 유지하고,
   색상 강도(배경/테두리/글자)와 Artist Bio의 radius·폭만 조정한다.
   모바일 전용(max-width:600px) — 데스크톱/태블릿은 이전 통일 상태 그대로.
   ============================================================================ */
@media (max-width:600px){

  /* ---- 20점 PDF: dungzak.art보다 살짝 더 눈에 띄게 ---- */
  .ap-portfolio-btn{
    background:rgba(215,178,105,.065) !important;
    border-color:rgba(215,178,105,.66) !important;
    color:rgba(215,178,105,.92) !important;
    /* height/font-size/border-width는 상위 통일 규칙 그대로 유지 — 재선언하지 않음 */
  }
  @media (hover:hover) and (pointer:fine){
    .ap-portfolio-btn:hover{
      background:rgba(215,178,105,.14) !important;
      border-color:rgba(215,178,105,.88) !important;
    }
  }
  .ap-portfolio-btn:active{
    background:rgba(215,178,105,.14) !important;
    border-color:rgba(215,178,105,.88) !important;
  }
  /* 공개 PDF가 아직 없을 때의 저존재감 상태(§13)는 그대로 유지 —
     밝아진 기본색 위에 opacity만 낮춰 적용된다. */

  /* ---- Artist Bio: dungzak.art와 같은 계열로, 존재감만 축소 ----
     height / font-size / border-width는 유지. radius와 좌우 폭만 줄인다. */
  #artistBioTrigger{
    border-radius:18px !important;
    padding:0 13px !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 Artist Bio ↔ dungzak.art 버튼 완전 동일화 (재확정)
   높이/폭/radius/font 전부 동일. 이전 단계의 "PDF만 조금 더 강조" 조정은
   20점 PDF(.ap-portfolio-btn)에는 영향 없고, 이 두 버튼에만 최종값 적용.
   ============================================================================ */
@media (max-width: 767px) {
  #artistExternalLink,
  #artistBioTrigger{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:48px !important;
    height:48px !important;
    padding:0 28px !important;
    border-radius:999px !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 Artist Bio = dungzak.art 완전 동일 규격 (오늘자 최종)
   지금까지 여러 차례 미세조정을 거치며 두 버튼의 radius/padding이 아주
   조금씩 달라져 있었다(직전 라운드: Bio만 radius 18px/padding 13px로 축소).
   이번 요청은 그 차이까지 완전히 제거하고 두 버튼을 픽셀 단위로 동일하게
   맞추는 것 — 폭은 텍스트 길이 차이만큼만 자연히 달라진다(고정 폭 없음).
   20점 PDF는 이번 요청 범위가 아니라 손대지 않는다.
   ============================================================================ */
@media (max-width:767px){
  #artistExternalLink,
  #artistBioTrigger{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:48px !important;
    height:48px !important;
    padding:0 28px !important;
    border-radius:999px !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 Artist Bio ↔ dungzak.art 크기 완전 통일 (오늘 최종)
   두 버튼 높이·radius·font-size·padding·line-height를 정확히 동일하게
   맞춘다. Artist Bio에 남아있을 수 있는 width:100%/flex:1/과다 padding을
   제거하고, 텍스트 길이만큼만 폭을 차지하는 자연스러운 캡슐형으로 만든다.
   적용 범위: max-width:767px. 이 블록이 파일 맨 끝이라 지금까지의 모든
   버튼 크기 규칙(37px 통일본 포함)보다 최종 우선한다.
   ============================================================================ */
@media (max-width:767px){
  .artist-link-button,
  .artist-bio-button,
  #artistExternalLink,
  #artistBioTrigger{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    flex-grow:0 !important;
    min-height:48px !important;
    height:48px !important;
    padding:0 28px !important;
    border-radius:999px !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .artist-actions-row,
  .ap-brand-links-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    flex-wrap:wrap !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 전체 확대 차단 + 상단 UI 압축 (오늘 최종)
   적용 범위: max-width:767px 만. iPad/노트북/데스크톱은 절대 건드리지
   않는다(이 블록의 모든 선택자가 max-width:767px 안에만 있음).
   ============================================================================ */
@media (max-width: 767px) {
  /* ---- PART A: 일반 화면은 세로 스크롤만, Viewer/Artist Bio는 자체 로직 유지 ---- */
  body:not(.viewer-open):not(.artist-bio-open) {
    touch-action: pan-y;
  }
  .site-shell,
  .site-header {
    touch-action: pan-y;
  }

  /* ---- PART B: 상단 UI 높이 압축 ----
     기존 .brand-subtitle의 margin-bottom:24px가 헤더 높이를 불필요하게
     크게 만들던 실제 원인 중 하나였다 — 대폭 축소. */
  .header-inner{
    padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px !important;
    min-height: 0 !important;
  }
  .brand-row h1{
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }
  .brand-subtitle{
    margin: 2px 0 4px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }
  .auth-trigger-btn{
    min-height: 44px !important;
  }

  /* 언어/링크/Artist Bio/PDF 컨트롤 패널 자체의 상하 여백도 압축 */
  .hero.hero-compressed{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    row-gap: 8px !important;
  }

  /* 결과 표시줄(작품 수) 높이 압축 */
  .stats-inline{
    min-height: 38px !important;
    padding: 4px 12px !important;
    margin-top: 6px !important;
  }

  /* FILTER 토글 높이 압축 + 여백 최소화 */
  #apFilterToggleWrap.ap-filter-toggle-wrap{
    margin: 8px 0 10px !important;
  }
  .ap-filter-toggle-btn{
    min-height: 46px !important;
    padding: 0 16px !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일·태블릿 상단 UI 압축 + Artist Bio 최종 미세조정
   적용 범위: max-width:1024px (iPhone + Android Phone + iPad mini/Air/Pro +
   Android Tablet 전부 포함). 데스크톱(1025px+)은 이 블록에서 전혀 건드리지
   않는다. 이전까지 폰(≤767px: 48px)과 태블릿(601~1024px: 34px)이 서로
   다른 값으로 나뉘어 있던 것을 하나의 값으로 통일해, dungzak.art와
   Artist Bio가 모든 모바일·태블릿 폭에서 완전히 동일하게 보이게 한다.
   ============================================================================ */
@media (max-width: 1024px) {
  /* ---- dungzak.art = Artist Bio, 완전히 동일한 규격으로 재확정 ---- */
  #artistExternalLink,
  #artistBioTrigger{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 22px !important;
    border-radius:999px !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
  .ap-brand-links-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
  }

  /* ---- 우측 상단 작가 이름(로그인 시 "등작 燈酌") 존재감 살짝 강화 ----
     버튼 크기는 그대로, 글자만 약 12% 확대(12.5px → 14px). font-weight는
     기존 그대로 유지. */
  .auth-trigger-btn{
    font-size:14px !important;
  }

  /* ---- 상단 UI 전체 세로 여백 추가 압축 (기존 대비 15~25%) ---- */
  .header-inner{
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
  }
  .brand-subtitle{
    margin: 1px 0 3px !important;
  }
  .hero.hero-compressed{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
    row-gap: 7px !important;
  }
  .stats-inline{
    min-height: 34px !important;
    padding: 3px 12px !important;
    margin-top: 5px !important;
  }
  #apFilterToggleWrap.ap-filter-toggle-wrap{
    margin: 6px 0 8px !important;
  }
  .ap-filter-toggle-btn{
    min-height: 44px !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 전용 최종 미세 조정 (iPhone/Android Phone만,
   iPad·Android Tablet·데스크톱·노트북은 이 블록에서 전혀 건드리지 않음)
   ============================================================================ */
@media (max-width: 767px) {
  /* ---- 1. ARCHIVE PRO 로고 축소 (6~8%) ---- */
  .brand-row h1{
    font-size: clamp(27px, 7.5vw, 30px) !important;
  }

  /* ---- 2. Artist Edition 존재감 강화 (15~20%) ---- */
  .brand-subtitle{
    font-size: clamp(16px, 4.5vw, 18px) !important;
    line-height: 1.2 !important;
  }

  /* ---- 3·4. Artist Bio만 8~10% 축소 + 테두리 존재감 완화 ----
     dungzak.art·20점 PDF는 그대로 — Artist Bio만 살짝 작고 차분하게. */
  #artistBioTrigger{
    padding: 0 19px !important;
    border-radius: 16px !important;
    border-color: rgba(222, 184, 108, .72) !important;
  }
}

/* ============================================================================
   2026-07-24 추가 — 모바일 UI만 최종 미세 조정 (iPhone/Android Phone,
   max-width:767px 전용). iPad·Android Tablet·노트북·데스크톱(768px+)은
   이 블록의 어떤 선택자도 적용되지 않는다. ARCHIVE PRO 로고 크기는
   이번에 전혀 건드리지 않는다(직전 턴 값 그대로 유지).
   ============================================================================ */
@media (max-width: 767px) {
  /* ---- Artist Edition만 한 단계 더 확대 ---- */
  .brand-subtitle{
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    opacity: .95 !important;
  }

  /* ---- dungzak.art와 Artist Bio를 완전히 동일한 규격·색상으로 ---- */
  #artistExternalLink,
  #artistBioTrigger{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: rgba(210, 177, 111, .78) !important;
    border-color: rgba(190, 153, 91, .44) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 두 버튼을 1:1 grid로 — 같은 시각적 등급.
     grid-column:1/-1로 부모(.lang-inline)의 다른 grid-template-columns
     정의와 무관하게 이 행 전체 폭을 그대로 차지하게 한다. */
  .ap-brand-links-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column: 1 / -1 !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }
}

/* ============================================================
   Archive Pro App — 2026-07-25 모바일 헤더 겹침 방지 최종 규칙 (엘솔)
   ------------------------------------------------------------
   절대 원칙: ARCHIVE PRO 로고와 오른쪽 작가명 버튼(#authTrigger)은
   어떤 모바일 해상도(iPhone SE~Pro Max, Android 소/대형)에서도
   절대로 겹치지 않는다. 이는 디자인이 아니라 레이아웃 규칙이다.

   방법: header-inner를 flex row(space-between)로 고정하고, 왼쪽
   로고 영역(.brand-wrap)만 min-width:0으로 줄어들 수 있게 하여
   ARCHIVE PRO 텍스트만 자동으로 축소되게 한다. 오른쪽 작가명 버튼은
   flex-shrink:0으로 현재 크기를 그대로 유지한다. 최소 16px 여백을
   gap으로 강제 확보한다.

   기존 규칙들이 파일 앞쪽에 여러 겹으로 쌓여 있으므로, 이 블록을
   파일의 가장 마지막(소스 순서 최후)에 두고 !important를 적용해
   위 원칙이 항상 최종적으로 이기도록 한다. Additive only — 다른
   기능/로직은 건드리지 않는다.
   ============================================================ */
@media (max-width: 767px){

  /* ---- 1. 헤더 뼈대: 좌우 절대 분리, 최소 16px 여백 ---- */
  .site-header .header-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* ---- 2. 왼쪽 로고 영역: 줄어들 수 있어야 축소가 가능하다 ---- */
  .brand-wrap{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .brand-row{
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .brand-home-link{
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .brand-title-group{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* ---- 3. ARCHIVE PRO: 화면 폭에 비례해 자동 축소, 줄바꿈/겹침 없음 ----
     vw 기반이라 좁은 화면일수록 실제로 계속 작아진다(이전 clamp는
     최솟값이 높아 일정 폭 이하에서 더 이상 줄지 않던 문제가 있었다). */
  .brand-row h1,
  .brand-home-link h1{
    font-size: clamp(14px, 6vw, 25px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Artist Edition 부제 — 로고보다 항상 작게, 줄바꿈 없이 축소.
     (기존 규칙은 부제를 로고보다 크게 키워 오른쪽 버튼과 겹치는
     원인 중 하나였다 — 겹침 방지가 최우선이므로 되돌린다.) */
  .brand-subtitle{
    font-size: clamp(10px, 3vw, 13px) !important;
    letter-spacing: .02em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
  }

  /* ---- 4. 오른쪽 작가명 버튼: 크기 그대로, 절대 축소되지 않음 ---- */
  .header-actions{
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    align-self: center !important;
  }
  .auth-trigger-btn{
    flex-shrink: 0 !important;
  }
}

/* ---- 5. 320~360px 초소형 화면 미세 보정: 여백은 16px 아래로 내려가지
   않는다. 로고는 더 줄어들 수 있고, 버튼 크기는 여전히 유지한다. ---- */
@media (max-width: 360px){
  .site-header .header-inner{ gap: 16px !important; }
  .brand-row h1,
  .brand-home-link h1{
    font-size: clamp(13px, 7vw, 18px) !important;
    letter-spacing: .06em !important;
  }
  .brand-subtitle{
    font-size: clamp(9px, 3vw, 11px) !important;
  }
}

/* ============================================================
   Archive Pro App — 2026-07-25 헤더·Artist Bio·20 PDF 미세조정 (엘솔)
   ------------------------------------------------------------
   대상 셀렉터 매핑 (요청서의 플레이스홀더 클래스 → 실제 프로젝트 클래스):
     .archive-pro-logo     → .brand-row h1, .brand-home-link h1
     .artist-edition-label → .brand-subtitle
     .artist-bio-button    → #artistBioTrigger (.ap-artist-bio-btn)
   기존에 위 셀렉터를 다루는 규칙이 파일 여러 곳에 누적되어 있어,
   이 블록을 파일의 가장 마지막에 두고 !important로 최종 확정한다.
   Artist Bio 열기/닫기 기능, 크기, 위치, 헤더 구조는 건드리지 않으며
   글자색·테두리 색상·배경(존재감)만 조정한다. Additive only.
   ============================================================ */

/* ---- 1~2. 모바일: ARCHIVE PRO 약간 축소 + Artist Edition 확대 ----
   두 값 모두 위쪽(2026-07-25 겹침 방지 블록)에서 이미 확보한
   min-width:0 / flex-shrink 구조 위에서 크기만 재조정한다 —
   겹침 방지 원칙은 그대로 유지됨. */
@media (max-width: 767px){
  .brand-row h1,
  .brand-home-link h1{
    font-size: clamp(18px, 5.2vw, 22px) !important;
    letter-spacing: .04em !important;
    max-width: 42vw !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
  }
  .brand-subtitle{
    font-size: clamp(12px, 3.3vw, 15px) !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }
}

/* ---- 3~4. Artist Bio 버튼 존재감 축소 — 모바일 (≤767px) ---- */
@media (max-width: 767px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.72) !important;
    border-color: rgba(194, 171, 116, 0.24) !important;
    background: rgba(194, 171, 116, 0.025) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 400 !important;
    opacity: 0.82 !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.84) !important;
    border-color: rgba(204, 183, 128, 0.38) !important;
    background: rgba(204, 183, 128, 0.05) !important;
  }
  #artistBioTrigger:active{ opacity: 0.7 !important; }
}

/* ---- 5. Artist Bio 버튼 존재감 축소 — 태블릿 (768~1180px) ---- */
@media (min-width: 768px) and (max-width: 1180px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.7) !important;
    border-color: rgba(194, 171, 116, 0.22) !important;
    background: rgba(194, 171, 116, 0.02) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 0.82 !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.82) !important;
    border-color: rgba(204, 183, 128, 0.35) !important;
    background: rgba(204, 183, 128, 0.045) !important;
  }
}

/* ---- 6. Artist Bio 글자색 톤 감소 — 노트북/데스크톱 (≥1181px) ----
   크기·위치는 그대로, 색상 톤만 한 단계 낮춘다. */
@media (min-width: 1181px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.68) !important;
    border-color: rgba(194, 171, 116, 0.2) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 0.85 !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.82) !important;
    border-color: rgba(204, 183, 128, 0.34) !important;
    background: rgba(204, 183, 128, 0.035) !important;
  }
}

/* ---- 7. Artist Bio 공통 상태 정리 (전 화면 크기) ---- */
#artistBioTrigger,
#artistBioTrigger:visited,
#artistBioTrigger[aria-expanded="false"],
#artistBioTrigger[aria-expanded="true"]{
  box-shadow: none !important;
  text-shadow: none !important;
}
#artistBioTrigger:focus-visible{
  outline: 1px solid rgba(204, 183, 128, 0.42) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   Archive Pro App — 2026-07-25 (v2) 모바일 UI 최종 미세조정 (엘솔)
   ------------------------------------------------------------
   대상: #artistBioTrigger 글자색·테두리 존재감 1단계 추가 하향,
   폭 축소(~7%), .site-header 하단 구분선 존재감 소폭 확대(~12%),
   .brand-subtitle(Artist Edition) 모바일 크기 확대(~10%).
   ARCHIVE PRO 로고, 작품 데이터, 로그인, 검색, 필터, Viewer, Zoom,
   언어 전환 기능은 변경하지 않음. 이 블록은 파일 가장 마지막에 위치하며,
   기존 규칙과 동일 특이도 + !important로 최종 확정한다. Additive only.
   ============================================================ */

/* ---- 1. Artist Bio 글자색·테두리 1단계 추가 하향 — 모바일 (≤767px) ---- */
@media (max-width: 767px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.62) !important;
    border-color: rgba(194, 171, 116, 0.15) !important;
    background: transparent !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.78) !important;
    border-color: rgba(204, 183, 128, 0.3) !important;
    background: rgba(204, 183, 128, 0.035) !important;
  }
}

/* ---- 2. Artist Bio 글자색·테두리 1단계 추가 하향 — 태블릿 (768~1180px) ---- */
@media (min-width: 768px) and (max-width: 1180px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.62) !important;
    border-color: rgba(194, 171, 116, 0.15) !important;
    background: transparent !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.76) !important;
    border-color: rgba(204, 183, 128, 0.28) !important;
    background: rgba(204, 183, 128, 0.03) !important;
  }
}

/* ---- 3. Artist Bio 글자색·테두리 1단계 추가 하향 — 노트북/데스크톱 (≥1181px) ----
   폭·위치는 그대로, 색상 톤만 한 단계 낮춘다. */
@media (min-width: 1181px){
  #artistBioTrigger{
    color: rgba(194, 171, 116, 0.6) !important;
    border-color: rgba(194, 171, 116, 0.14) !important;
  }
  #artistBioTrigger:hover,
  #artistBioTrigger:focus-visible{
    color: rgba(204, 183, 128, 0.75) !important;
    border-color: rgba(204, 183, 128, 0.26) !important;
  }
}

/* ---- 4. Artist Bio 버튼 폭 축소 (~7%) — 모바일·태블릿 (≤1024px) ----
   dungzak.art(#artistExternalLink)는 그대로 두고 Artist Bio만
   패딩·최소폭을 줄여 두 버튼이 한 줄에서 자연스럽게 균형을 이루게 한다. */
@media (max-width: 1024px){
  #artistBioTrigger{
    padding: 0 11px !important;
    min-width: 108px !important;
  }
}

/* ---- 5. 상단 구분 테두리 존재감 소폭 확대 (~12%) — 모바일 (≤640px) ---- */
@media (max-width: 640px){
  .site-header{
    border-bottom: 1px solid rgba(212, 180, 109, 0.115) !important;
  }
}

/* ---- 6. Artist Edition 크기 확대 (~10%) — 모바일 (≤767px) ----
   ARCHIVE PRO(.brand-row h1 / .brand-home-link h1)는 변경하지 않음. */
@media (max-width: 767px){
  .brand-subtitle{
    font-size: clamp(13px, 3.6vw, 17px) !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   Archive Pro App — 2026-07-25 (v3) 모바일 UI 최종 미세조정 (엘솔)
   ------------------------------------------------------------
   대상 셀렉터 매핑 (요청서 플레이스홀더 → 실제 클래스):
     .archive-header/.header-top/.archive-brand-row → .site-header/.header-inner/.brand-row
     .artist-name-badge/.artist-profile-badge        → #authTrigger (.auth-trigger-btn)
     .archive-subtitle/.artist-edition               → .brand-subtitle
     .pdf-button/.portfolio-pdf-button                → .ap-portfolio-btn
     .pdf-language-note/.pdf-standard-label           → .hero-mode-line
     .result-summary / count-number / count-label     → .stats-inline / .count-number / .count-label
     .filter-panel/.filter-toggle-wrapper              → .ap-filter-toggle-wrap / #searchArea
     .works-grid                                       → #grid

   등작 확인: 20점 PDF 버튼은 2026-07-25 통일 규칙(6개 버튼 동일 디자인)을
   그대로 유지하고, 색상·굵기만 살짝 더 강조하는 것으로 확정(§5 변경).
   버튼 크기(height/padding/font-size)는 절대 재선언하지 않는다.
   로그인/Firebase/작품 데이터/필터 기능/Viewer/Zoom/언어 전환은 무변경.
   Additive only — 파일 가장 마지막에 위치해 이전 규칙들 위에서 최종 확정.
   ============================================================ */

/* ---- §4 (신규 6번): Artist Edition 추가 확대 (~12%, 이전 확대분 위에 누적) ---- */
@media (max-width: 767px) {
  .brand-subtitle {
    font-size: clamp(15px, 4vw, 19px) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
  }
}

/* ---- §6 (신규 1번): 오른쪽 작가명 배지(#authTrigger) 안전영역 여백 ----
   iPhone 가로 모드·노치 기기에서도 배지 오른쪽 끝이 화면 밖으로
   붙지 않도록 safe-area-inset-right를 header-actions에 추가한다.
   배지 자체의 크기·모양(pill)·겹침 방지 구조는 어제 확정한 규칙을
   그대로 유지 — 여백 보정만 추가. */
@media (max-width: 767px) {
  .site-header .header-inner {
    padding-right: max(16px, calc(env(safe-area-inset-right, 0px) + 4px)) !important;
    padding-left: max(16px, calc(env(safe-area-inset-left, 0px) + 4px)) !important;
  }
  .auth-trigger-btn {
    overflow: visible !important;
  }
}

/* ---- §5: 20점 PDF 버튼 — 통일된 크기(37px/17px padding 등)는 유지하고
   색상·글자 굵기만 다른 5개 버튼보다 한 단계 더 또렷하게 (등작 확정) ---- */
@media (max-width: 767px) {
  .ap-portfolio-btn {
    font-weight: 650 !important;
    color: rgba(226, 191, 122, 0.96) !important;
    border-color: rgba(226, 191, 122, 0.82) !important;
    background: rgba(226, 191, 122, 0.09) !important;
  }
  .ap-portfolio-btn.is-unavailable {
    /* 공개 PDF가 아직 없을 때는 기존과 동일하게 저존재감 유지 */
    color: rgba(215, 178, 105, 0.82) !important;
    border-color: rgba(215, 178, 105, 0.52) !important;
    background: rgba(215, 178, 105, 0.025) !important;
  }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .ap-portfolio-btn:not(.is-unavailable):hover {
    background: rgba(226, 191, 122, 0.16) !important;
    border-color: rgba(226, 191, 122, 0.96) !important;
  }
}
.ap-portfolio-btn:not(.is-unavailable):active {
  transform: scale(0.98) !important;
}

/* ---- §6 (PDF 기준 안내문) 정돈: 버튼 바로 아래 그룹으로, 하단 여백 확보.
   기존 카피 오류도 함께 반영(ui.js: English mode→edition, KR+EN 두 줄). ---- */
@media (max-width: 767px) {
  .lang-inline .hero-mode-line {
    white-space: pre-line !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    padding-left: 0 !important;
    line-height: 1.35 !important;
  }
  /* 카드(.lang-inline) 하단에 안내문이 테두리에 닿지 않도록 최소 14px 확보 */
  .lang-inline {
    padding-bottom: 16px !important;
  }
}

/* ---- §9 (FILTER-작품 사이 여백 축소) ----
   Filter 토글/검색 패널과 작품 그리드 사이 간격을 8~12px 줄인다.
   토글이 접혀 있을 때(html.ap-mfilter-collapsed)는 이미 margin이
   0으로 붕괴되므로 영향 없음 — 펼쳐진 상태의 여백만 대상. */
@media (max-width: 767px) {
  body.archive-entered #searchArea.controls {
    margin-bottom: 14px !important;
  }
  body.archive-entered #grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html.ap-tablet-ui body.archive-entered #searchArea.controls {
    margin-bottom: 14px !important;
  }
}

/* ---- §8 (카운터 시각적 위계) ----
   index.html에 .count-number(숫자, #statTotal/#statFiltered/#statSections)와
   .count-label(단위)/.count-divider(가운뎃점)를 새로 감쌌다 — ui.js는
   여전히 #statTotal 등 숫자 span의 textContent만 갱신하므로 로직 무변경.
   숫자는 밝고 굵게, 단위는 옅게, 가운뎃점은 골드로 아주 옅게. */
.stats-inline .count-number {
  color: rgba(232, 232, 236, 0.94);
  font-weight: 600;
}
.stats-inline .count-label {
  color: rgba(202, 204, 214, 0.68);
  font-weight: 400;
}
.stats-inline .count-divider {
  color: rgba(190, 161, 103, 0.55);
}
