/* 포트폴리오·인사이트 상단 제목 영역 — 뷰파인더 연출(assets/js/heading.js).
   장식(.hd-layer)은 제목 뒤(z-index 0), 롤링 문구·제목은 위(z-index 2), AF 커서(.hd-top)는 맨 위(z-index 3).
   선·글자 색은 사이트 색 변수(--text 등)에서 만든다. */
.page-heading[data-hd]{position:relative;isolation:isolate;overflow:hidden;justify-content:center;min-height:clamp(400px,58vh,640px);padding-block:96px;
  --hd-line:color-mix(in srgb,var(--text) 55%,transparent);--hd-faint:color-mix(in srgb,var(--text) 7%,transparent)}
.page-heading[data-hd]>:not(.hd-layer,.hd-top){position:relative;z-index:2}
/* 포트폴리오·인사이트·서비스 상세는 같은 크기·정렬의 제목을 쓴다. */
:is(.portfolio,.board,.services-hero,.info-page) .page-heading[data-hd]{--line:60px;--headline:clamp(26px,3.2vw,46px);--title:clamp(32px,4.4vw,64px);--title-line:1.3;
  align-items:center;text-align:center;gap:8px}
:is(.portfolio,.board,.services-hero,.info-page) .page-heading[data-hd] h1{font-family:var(--font-latin),var(--font-sans)}
@media(max-width:699px){
  :is(.portfolio,.board,.services-hero,.info-page) .page-heading[data-hd]{--line:42px;--headline:clamp(22px,5.5vw,32px);--title:clamp(29px,7.5vw,42px);gap:6px}
}
.hd-layer,.hd-top{position:absolute;inset:0;pointer-events:none}
.hd-layer{z-index:0;font:600 11px/1 var(--font-latin);letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.hd-top{z-index:3;overflow:hidden}
:is(.hd-layer,.hd-top) :is(i,b){display:block;font-style:normal}

/* 틀(모서리·삼등분선·십자)과 정보 줄: 화면 가장자리에서 28px, 좌우는 본문 여백만큼 안쪽 */
.hd-vf-frame,.hd-vf-hud{position:absolute;inset:28px var(--gutter)}
.hd-vf-corner{position:absolute;width:36px;height:36px;border:0 solid var(--hd-line)}
.hd-vf-corner:nth-child(1){top:0;left:0;border-width:1.5px 0 0 1.5px}
.hd-vf-corner:nth-child(2){top:0;right:0;border-width:1.5px 1.5px 0 0}
.hd-vf-corner:nth-child(3){bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.hd-vf-corner:nth-child(4){bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.hd-vf-thirds{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),var(--hd-faint) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--hd-faint) 0 calc(66.66% + .5px),transparent 0),
  linear-gradient(180deg,transparent calc(33.33% - .5px),var(--hd-faint) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--hd-faint) 0 calc(66.66% + .5px),transparent 0)}
.hd-vf-cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;opacity:.35;
  background:linear-gradient(var(--text),var(--text)) center/1px 100% no-repeat,linear-gradient(var(--text),var(--text)) center/100% 1px no-repeat}
.hd-vf-tl,.hd-vf-tr,.hd-vf-bl,.hd-vf-br{position:absolute;display:flex;align-items:center;gap:14px}
.hd-vf-tl{top:20px;left:24px}
.hd-vf-tr{top:20px;right:24px;color:var(--text)}
.hd-vf-bl{bottom:20px;left:24px}
.hd-vf-br{bottom:20px;right:24px}
.hd-vf-bl>span{margin-left:-4px}
.hd-vf-lut{display:inline-block;color:var(--mint)}
/* REC 칩: 글자 뒤 자간(.14em)만큼 오른쪽 여백을 줄여 점·글자가 칩 가운데에 오게 한다. */
.hd-layer .hd-rec{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 calc(9px - .14em) 0 8px;border-radius:6px;
  background:rgba(255,77,77,.12);color:#ff4d4d;font-weight:700;line-height:1;letter-spacing:.14em;white-space:nowrap}
.hd-rec::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#ff4d4d;animation:hd-blink 1.6s steps(1) infinite}
.hd-vf-battery{width:24px;height:11px;border:1.5px solid var(--hd-line);border-radius:2px;position:relative;
  background:linear-gradient(90deg,var(--mint) 0 72%,transparent 0) 1.5px 1.5px/calc(100% - 3px) calc(100% - 3px) no-repeat}
.hd-vf-battery::after{content:'';position:absolute;right:-4px;top:2px;width:2px;height:4px;background:var(--hd-line)}
/* 노출계: AF 박스의 가로 위치(--needle 0~1)를 바늘이 따라간다. */
.hd-vf-meter{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.08em}
.hd-vf-scale{position:relative;display:flex;justify-content:space-between;align-items:flex-end;width:220px;height:12px}
.hd-vf-scale i{width:1px;height:5px;background:color-mix(in srgb,var(--text) 35%,transparent)}
.hd-vf-scale i.is-major{height:10px;background:var(--hd-line)}
.hd-vf-scale .hd-vf-needle{position:absolute;left:calc(var(--needle,.5) * 100%);bottom:-5px;width:0;height:0;margin-left:-5px;background:none;
  border:5px solid transparent;border-bottom:7px solid var(--mint);border-top:0}

/* AF 박스 = 이 영역의 커서(위치는 heading.js가 translate로 준다). 제목 위에서는 강조색으로 초점 고정.
   누른 채 끌어도 글자가 선택되지 않게 한다. */
.page-heading[data-cursor-own]{cursor:none;user-select:none;-webkit-user-select:none}
.hd-vf-af{position:absolute;left:0;top:0;width:0;height:0}
.hd-vf-af::before{content:'';position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--text)}
.hd-vf-af i{position:absolute;width:12px;height:12px;border:0 solid color-mix(in srgb,var(--text) 75%,transparent);transition:border-color .25s,inset .35s var(--ease-out)}
.hd-vf-af i:nth-child(1){left:-48px;top:-32px;border-width:1.5px 0 0 1.5px}
.hd-vf-af i:nth-child(2){right:-48px;top:-32px;border-width:1.5px 1.5px 0 0}
.hd-vf-af i:nth-child(3){left:-48px;bottom:-32px;border-width:0 0 1.5px 1.5px}
.hd-vf-af i:nth-child(4){right:-48px;bottom:-32px;border-width:0 1.5px 1.5px 0}
.hd-vf-af b{position:absolute;left:-48px;top:-48px;font:600 9px/1 var(--font-latin);letter-spacing:.2em;color:color-mix(in srgb,var(--text) 65%,transparent);white-space:nowrap;transition:color .25s}
.hd-vf-af.is-locked i:nth-child(odd){left:-40px}
.hd-vf-af.is-locked i:nth-child(even){right:-40px}
.hd-vf-af.is-locked i:nth-child(-n+2){top:-26px}
.hd-vf-af.is-locked i:nth-child(n+3){bottom:-26px}
.hd-vf-af.is-locked i{border-color:var(--mint)}
.hd-vf-af.is-locked b{color:var(--mint)}
.hd-vf-af.is-locked::before{background:var(--mint)}

@keyframes hd-blink{50%{opacity:.25}}
@keyframes hd-rack{from{filter:blur(14px);opacity:.4;scale:1.04}}

/* 등장: 장식이 서서히 켜지고 제목은 초점이 맞춰지며 나타난다. */
.page-heading[data-hd] .hd-layer{animation:fade-in .8s backwards}
.page-heading[data-hd] h1{animation:hd-rack 1.6s var(--ease-out) .15s backwards}

@media(max-width:1199px){
  .hd-vf-meter{display:none}
}
@media(max-width:599px){
  .page-heading[data-hd]{min-height:360px;padding-block:72px}
  .hd-vf-frame,.hd-vf-hud{inset:16px}
  .hd-vf-tl>span:last-child{display:none}
  .hd-vf-bl{bottom:14px;left:14px;font-size:9px}
  .hd-vf-bl>span:not(:last-child){display:none}
  .hd-vf-tl{top:14px;left:14px}
  .hd-vf-tr{top:14px;right:14px}
  .hd-vf-br{bottom:14px;right:14px;font-size:9px}
}