/* 폰 고침(1029) — 899px 이하만. 900px 이상(데스크톱)은 이 파일이 아무것도 바꾸지 않는다(폰 메뉴도 숨김).
   1) 04 건축: 고정(sticky) 3D 그림이 L1~L6 글 목록 뒤에 겹쳐 그려짐 → 폰은 고정 해제, 그림 숨김(폰 폭에서 그림 속 글자 6px = 못 읽음), 목록 전부 또렷하게.
   2) 08 런칭: 가로 스크롤 3D 카드가 서로 겹치고 잘림 → 폰은 세로로 쌓기.
   3) 폰 메뉴(.blpm, bl/m1029.js): 단추 보이는 32 · 누르는 자리 44 · 각진 6px · 160ms(언어 단추와 같은 문법). */
:root{
  --blpm-bg:#0E1015; --blpm-line:rgba(255,255,255,0.14); --blpm-ink:#EDEFF3; --blpm-mut:#A4AAB8; --blpm-acc:#C6FF3D;
  --blpm-hover:rgba(255,255,255,0.06); --blpm-r:6px; --blpm-ease:cubic-bezier(.23,1,.32,1);
}
.blpm{display:none}

/* 1030: 머리줄 메뉴가 9개(제품 소개·공정성 추가)라 1279px 이하에선 한 줄에 안 들어감 → 펼침 메뉴를 1279px 까지 쓴다(site-head.css 가 그 폭에서 링크 줄을 숨김).
   아래 폰 배치 고침(머리표·04·08)은 그대로 899px 이하만. */
@media (max-width:1279px){
  /* --- 폰 메뉴 --- */
  .blpm{display:inline-flex;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
  .blpm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:var(--blpm-r);
    border:1px solid var(--blpm-line);background:rgba(255,255,255,0.03);color:var(--blpm-ink);cursor:pointer;
    transition:transform 140ms var(--blpm-ease),border-color 160ms ease,background-color 160ms ease}
  .blpm-btn::before{content:"";position:absolute;inset:-6px}
  .blpm-btn:active{transform:scale(.97)}
  .blpm-btn:focus-visible{outline:2px solid var(--blpm-acc);outline-offset:2px}
  .blpm[data-open="true"] .blpm-btn{border-color:var(--blpm-acc)}
  .blpm-ico{width:16px;height:16px}
  .blpm-ico path{transition:transform 160ms var(--blpm-ease),opacity 160ms ease;transform-origin:8px 8px}
  .blpm[data-open="true"] .blpm-l1{transform:translateY(4px) rotate(45deg)}
  .blpm[data-open="true"] .blpm-l2{opacity:0}
  .blpm[data-open="true"] .blpm-l3{transform:translateY(-4px) rotate(-45deg)}
  .blpm-panel{position:absolute;top:100%;left:0;right:0;z-index:70;max-height:calc(100vh - 72px);overflow-y:auto;
    padding:8px 20px 16px;background:var(--blpm-bg);border-bottom:1px solid var(--blpm-line);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 12px 32px rgba(0,0,0,0.5);
    opacity:0;transform:translateY(-4px);visibility:hidden;pointer-events:none;
    transition:opacity 160ms var(--blpm-ease),transform 160ms var(--blpm-ease),visibility 0s linear 160ms}
  .blpm[data-open="true"] .blpm-panel{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity 160ms var(--blpm-ease),transform 160ms var(--blpm-ease),visibility 0s}
  .blpm-h{padding:8px 0;font-size:13px;font-weight:600;color:var(--blpm-mut)}
  .blpm-list{list-style:none;margin:0;padding:0}
  .blpm-list li+li{border-top:1px solid rgba(255,255,255,0.06)}
  .blpm-a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 8px;border-radius:4px;color:var(--blpm-ink);font-size:16px;font-weight:600;outline:none}
  .blpm-a:focus-visible{background:var(--blpm-hover);box-shadow:0 0 0 1px var(--blpm-line) inset}
  .blpm-a:active{background:rgba(255,255,255,0.1)}
  .blpm-no{flex:none;min-width:24px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--blpm-acc)}
}
@media (max-width:899px){

  /* --- 각 구역 머리표(0N — 이름)를 폰에서 13px 로 --- */
  main section div[style*="0.14em"]{font-size:13px!important}

  /* --- 04 건축: 고정 해제 + 그림 숨김 + 목록 또렷하게 --- */
  #arch{height:auto!important}
  #arch>div{position:relative!important;height:auto!important;overflow:visible!important;display:block!important;padding:96px 20px 72px!important}
  #arch>div>div:first-child{max-width:none!important;padding-top:0!important}
  #arch [data-scene-wrap]{display:none!important}
  #arch [data-layer-text]{opacity:1!important;transform:none!important;padding:12px 0!important}

  /* --- 08 런칭: 가로 3D 카드 → 세로 쌓기 --- */
  #launch{height:auto!important}
  #launch>div{position:relative!important;height:auto!important;overflow:visible!important;padding:96px 0 48px!important;gap:32px!important}
  #launch [data-track]{flex-direction:column!important;width:auto!important;transform:none!important;gap:16px!important}
  #launch [data-hcard]{width:auto!important;height:auto!important;min-height:200px;transform:none!important;opacity:1!important;padding:24px!important;gap:24px}
}
@media (max-width:1279px) and (hover:hover) and (pointer:fine){
  .blpm-btn:hover{border-color:rgba(255,255,255,0.32);background:rgba(255,255,255,0.06)}
  .blpm-a:hover{background:var(--blpm-hover)}
}
@media (prefers-reduced-motion:reduce){
  .blpm-btn,.blpm-ico path,.blpm-panel,.blpm[data-open="true"] .blpm-panel{transition:opacity 120ms linear}
  .blpm-panel{transform:none}
}