/*
Theme Name: Jinkwang New
Theme URI: https://www.jinkwang.net
Author: 진광테크 (with Claude)
Description: 진광테크 회사 홈페이지 전용 경량·반응형 커스텀 테마. 빌더(Elementor) 의존 제거, 모바일 우선, 빠른 로딩 목적. 기존(2020) 사이트 룩 재현 방향 — 풀폭 사진 밴드 + 다크/라이트 교차 섹션 + 세리프 표제.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jinkwang
*/

/* ============================================================
   0. 브랜드 토큰 (로고 실측 #033072 / 옛 사이트 룩: 다크밴드+금색 세리프)
   ============================================================ */
:root{
  --c-primary:#033072;      /* 브랜드 네이비 (로고 실측) */
  --c-primary-dark:#02234f;
  --c-gold:#d5b069;         /* 다크 섹션 세리프 표제 (옛 장비페이지 금색) */
  --c-dark:#0d1117;         /* 다크 밴드 배경 */
  --c-dark-ink:#cfd4da;     /* 다크 밴드 본문 글자 */
  --c-ink:#232730;          /* 본문 글자 */
  --c-muted:#5b616b;        /* 보조 글자 */
  --c-line:#e3e6ea;         /* 구분선 */
  --c-bg:#ffffff;
  --c-bg-alt:#f4f5f6;       /* 라이트 밴드 배경 */
  --maxw:1120px;
  --pad:20px;
  --font: "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;  /* 장비명 등 라틴 표제 (옛 룩) */
}

/* ============================================================
   1. 리셋 · 기본 (모바일 우선)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* ★스크롤바 자리를 ★항상 비워 둔다.
   연출·갤러리가 열릴 때 `overflow:hidden` 으로 페이지를 잠그는데, 잠금이 풀리는 순간
   스크롤바가 돌아오면서 ★화면 폭이 15px 쯤 줄고 ★가운데 정렬된 것이 전부 옆으로 밀린다.
   오프닝 로고가 날아가기 직전에 ★살짝 어긋나 보이던 것이 이것이다(아영 260820).
   ※헤드리스 브라우저에는 이 스크롤바가 없어 ★측정에는 안 잡힌다 — 실물에서만 보인다.
   gutter 를 늘 잡아 두면 잠그든 풀든 폭이 안 변한다. */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{
  margin:0; font-family:var(--font); color:var(--c-ink);
  background:var(--c-bg); line-height:1.7; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--c-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3; color:var(--c-primary-dark); margin:0 0 .5em}
h1{font-size:1.9rem}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.section{padding:56px 0}
.section--alt{background:var(--c-bg-alt)}
.display{font-family:var(--font-display); letter-spacing:.02em; font-weight:700}
.btn{
  display:inline-block; background:var(--c-primary); color:#fff;
  padding:12px 26px; border-radius:8px; font-weight:700;   /* 디자인 D-8(가) 260819:
    3px 은 각지지도 둥글지도 않은 어정쩡한 값이었다. 아영이 ★확실히 둥근 쪽을 골랐다.
    .btn--ghost 는 .btn 에 얹히므로 이 한 줄이 양쪽에 다 걸린다. */
}
.btn:hover{background:var(--c-primary-dark); text-decoration:none}
.btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.75)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ============================================================
   2. 헤더 · 반응형 내비 (옛 룩: 흰 헤더 + 회색 메뉴, CSS-only 햄버거)
   ============================================================ */
.site-header{position:sticky; top:0; z-index:50; background:var(--c-bg); border-bottom:1px solid var(--c-line)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; min-height:66px}
.brand{font-weight:800; font-size:1.15rem; color:var(--c-primary-dark)}
.brand:hover{text-decoration:none}
.brand img{height:42px; width:auto; display:block}
.brand small{display:none}

.nav-toggle{display:none}
.nav-btn{display:inline-flex; flex-direction:column; gap:5px; padding:10px; cursor:pointer}
.nav-btn span{width:24px; height:2px; background:var(--c-primary-dark)}
.primary-nav ul{list-style:none; margin:0; padding:0}
.primary-nav a{display:block; padding:12px 0; color:#80868f; font-weight:600; font-size:.95rem}
.primary-nav a:hover,
.primary-nav .current-menu-item a,
.primary-nav .current_page_item a{color:var(--c-primary); text-decoration:none}

/* 모바일: 토글 메뉴 (하위메뉴는 들여쓰기로 표시) */
.primary-nav{
  position:absolute; left:0; right:0; top:100%; background:var(--c-bg);
  border-bottom:1px solid var(--c-line); max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.nav-toggle:checked ~ .primary-nav{max-height:70vh}
.primary-nav ul{padding:8px var(--pad) 16px}
.primary-nav ul ul{padding:0 0 0 16px}
.primary-nav ul ul a{font-size:.9rem; padding:8px 0}

/* ============================================================
   3. 내부 페이지 타이틀 밴드 (게시판·검색·404용 — 옛 룩: 풀폭 사진 + 중앙 흰 표제)
      ※ 홈·고정페이지 7종은 legacy/ 스냅샷이 자체 렌더 (이 CSS 미사용)
   ============================================================ */
.page-hero{position:relative; background:var(--c-dark); color:#fff; overflow:hidden}
.page-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.page-hero::after{content:""; position:absolute; inset:0; background:rgba(4,7,12,.3)}
.page-hero__inner{position:relative; z-index:1; padding:72px var(--pad); text-align:center}
.page-hero h1{color:#fff; margin:0; font-size:1.8rem; text-shadow:0 2px 10px rgba(0,0,0,.55)}
.page-hero p{color:#dfe3e8; margin:.6em 0 0; text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* ============================================================
   4. 밴드(섹션) — 게시판 목록 배경용
   ============================================================ */
.band--light{background:var(--c-bg-alt)}
.section__head{text-align:center; margin-bottom:32px}
.section__head p{color:var(--c-muted); margin:0}

/* ============================================================
   5. 글(게시판) · 목록/본문
   ============================================================ */
.post-list{display:grid; gap:16px; grid-template-columns:1fr}
.post-list__item{border:1px solid var(--c-line); background:#fff; padding:18px}
.post-list__item h3{margin:0 0 .3em; font-size:1.05rem}
.post-list__item p{margin:0; color:var(--c-muted); font-size:.95rem}
.entry{max-width:760px; margin:0 auto}
.entry img{margin:1.2em 0}
.entry h2,.entry h3{margin-top:1.4em}
.ai-notice{
  background:var(--c-bg-alt); border-left:3px solid var(--c-gold);
  padding:12px 16px; font-size:.88rem; color:var(--c-muted); margin:1.5em 0;
}
.post-cta{
  background:var(--c-dark); color:#e6e9ed; padding:22px 24px; margin:2em 0 1em;
  font-size:.97rem; line-height:1.65; border-left:3px solid var(--c-gold);
}
.post-cta strong{display:block; margin-bottom:.35em; font-size:1.05rem; color:var(--c-gold);
  font-family:var(--font-display)}
.post-cta a{color:#fff; font-weight:700}
.post-cta__links{display:block; margin-top:.6em}

/* ============================================================
   7. 푸터 (옛 룩: 다크 미니멀, 작은 회색 글씨)
   ============================================================ */
.site-footer{background:#1b1d1f; color:#9aa0a6; padding:34px 0; margin-top:0; font-size:.87rem; line-height:1.9}
.site-footer a{color:#c9ced4}
.site-footer .foot-lines{text-align:center}
.site-footer .copy{color:#71767c; font-size:.82rem; margin-top:6px}

/* ============================================================
   8. 데스크톱 (모바일 우선 → 넓어지면 확장)
   ============================================================ */
@media (min-width:768px){
  h1{font-size:2.4rem}
  .page-hero__inner{padding:96px var(--pad)}
  .page-hero h1{font-size:2.2rem}
  .nav-btn{display:none}
  .primary-nav{position:static; max-height:none; overflow:visible; border:0; background:transparent}
  .primary-nav ul{display:flex; gap:28px; padding:0}
  .primary-nav a{padding:0}
  /* 데스크톱 드롭다운 (가공 서비스 하위) */
  .primary-nav li{position:relative}
  .primary-nav ul ul{display:none; position:absolute; top:100%; left:-14px; background:var(--c-bg);
    border:1px solid var(--c-line); box-shadow:0 6px 18px rgba(0,0,0,.08); min-width:170px;
    padding:10px 14px; z-index:60}
  .primary-nav ul ul li{white-space:nowrap}
  .primary-nav ul ul a{padding:6px 0; font-size:.9rem}
  .primary-nav li:hover > ul, .primary-nav li:focus-within > ul{display:block}
  .post-list{grid-template-columns:repeat(2,1fr)}
  .section{padding:76px 0}
}

/* ============================================================
   9. 빌더 비의존 부품 — Elementor JS가 하던 일을 CSS로 대체
      (레거시 스킨을 버려도 남는다. 새 디자인에서도 그대로 쓸 수 있는 조각)
   ============================================================ */

/* 유튜브 임베드: 자바스크립트 없이 비율 유지. iframe 은 loading="lazy" 라
   화면에 들어오기 전에는 한 바이트도 받지 않는다. */
.jk-video{position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden}
.jk-video>iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@supports not (aspect-ratio:16/9){
  .jk-video{height:0; padding-bottom:56.25%}
}

/* 인라인 아이콘 — 아이콘폰트(98.8KB) 대신 SVG를 글자처럼 쓴다 */
.jk-ico{display:inline-block; vertical-align:-.125em; width:1em; height:1em; fill:currentColor}

/* 워드프레스 기본 갤러리 격자 — 빌더 위젯 CSS 에 있던 규칙을 테마가 자급한다.
   빌더를 끄면 이 규칙이 사라져 썸네일이 ★한 줄로 세로 나열된다(260818 실제 발생).
   마크업은 코어 갤러리(.gallery / .gallery-item / .gallery-columns-N)라 새 디자인에서도 그대로 쓴다. */
.gallery{display:flex; flex-wrap:wrap; margin:0 -6px}
.gallery .gallery-item{margin:0; padding:6px; text-align:center}
.gallery .gallery-icon img{width:100%; height:auto; border-radius:3px}
.gallery .gallery-caption{font-size:.85rem; color:var(--c-muted)}
.gallery-columns-2 .gallery-item{width:50%}
.gallery-columns-3 .gallery-item{width:33.3333%}
.gallery-columns-4 .gallery-item{width:25%}
.gallery-columns-5 .gallery-item{width:20%}
.gallery-columns-6 .gallery-item{width:16.6666%}
.gallery-columns-7 .gallery-item{width:14.2857%}
.gallery-columns-8 .gallery-item{width:12.5%}
.gallery-columns-9 .gallery-item{width:11.1111%}
@media (max-width:900px){
  .gallery-columns-5 .gallery-item,
  .gallery-columns-6 .gallery-item,
  .gallery-columns-7 .gallery-item,
  .gallery-columns-8 .gallery-item,
  .gallery-columns-9 .gallery-item{width:33.3333%}
  .gallery-columns-4 .gallery-item{width:33.3333%}
}
@media (max-width:560px){
  .gallery [class*="gallery-columns-"] .gallery-item,
  .gallery .gallery-item{width:50%}
}

/* ============================================================
   10. 유틸리티 — ★템플릿(php)에 스타일을 박지 않기 위한 클래스
       (데스크탑 지침 260818-1: 구조와 스타일 분리. 디자인 교체 때 php 를 다시 안 만지도록)
       값은 전부 위쪽 토큰을 쓴다. 디자인이 바뀌면 토큰만 갈아끼운다.
   ============================================================ */
:root{
  --gap-sm:12px;
  --gap-md:28px;
  --gap-lg:32px;
}
.u-center{text-align:center}
.u-mt-lg{margin-top:1.5em}
.section__head--left{text-align:left}
.pagination-wrap{margin-top:var(--gap-md)}
.post-nav{display:flex; justify-content:space-between; gap:var(--gap-sm); margin-top:var(--gap-lg)}

/* 건너뛰기 링크 — 평소엔 화면 밖, 키보드 포커스를 받으면 나타난다 */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--c-primary); color:#fff; padding:10px 16px; border-radius:0 0 3px 0;
}
.skip-link:focus{left:0; text-decoration:none}

/* 스크린리더 전용 — 화면에는 안 보이고 보조기기만 읽는다(워드프레스 표준 클래스명) */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:static !important; width:auto; height:auto; margin:0; clip:auto; clip-path:none;
}

/* ============================================================
   11. 개편 사이트 (.jk-onepage 안에서만 적용)
       기획안 260818 + 수정 지시서 260818.
       톤앤매너는 ★기존 유지(로고 네이비·기존 사진·기존 문구).
       애니메이션은 CSS + IntersectionObserver 자체 구현 — ★외부 라이브러리 0.
       transform/opacity 만 쓴다(레이아웃 리플로우 유발 금지).
   ============================================================ */
.jk-onepage{
  --sec-pad:clamp(56px, 8vw, 104px);
  --lead:clamp(1rem, 1.6vw, 1.12rem);
  --ease:cubic-bezier(.16,1,.3,1);   /* 초반 빠르고 끝이 부드럽게 — ★전 구간 이 하나로 통일(지시서 A 7-1) */

  /* 진행 레일 — 이 네 값만 고치면 위치·길이·굵기가 바뀐다 */
  --rail-len:66vh;    /* 화면 높이의 약 2/3 (사용자 표기 "2/2"는 확인 대기) */
  --rail-w:5px;       /* 선 굵기(속) — D-8(나) 260819: 3px 은 있는지도 모를 정도였다.
                         아영이 ★유지를 골랐으므로 빼지 않고 ★더 보이게 키운다. */
  --rail-edge:1px;    /* 흰 테두리 굵기 — 아주 얇게 */
  --rail-left:22px;   /* 왼쪽에서 띄우는 거리 */
  --rail-space:58px;  /* 본문이 침범하지 않도록 왼쪽에 ★비워 두는 폭 */
}
.jk-onepage .op{padding:var(--sec-pad) 0}
.jk-onepage .op--alt{background:var(--c-bg-alt)}
.jk-onepage .op--dark{background:var(--c-dark); color:var(--c-dark-ink)}
.jk-onepage .op--dark h2,.jk-onepage .op--dark h3{color:#fff}

/* ── 리빌(등장) ────────────────────────────────────────────
   화면에 들어오면 아래에서 떠오르며 나타난다. ★한 번만 실행(JS 가 관찰을 해제한다).
   --d 는 순차 등장(stagger) 지연값. */
html.jk-anim .jk-onepage .r{opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms); will-change:opacity,transform}
html.jk-anim .jk-onepage .r.is-in{opacity:1; transform:none}
html.jk-anim .jk-onepage .r--lead{transform:translateY(48px); transition-duration:1s}
.jk-onepage .r--zoom{overflow:hidden}
html.jk-anim .jk-onepage .r--zoom img{transform:scale(1.06); transition:transform 1.1s var(--ease)}
html.jk-anim .jk-onepage .r--zoom.is-in img{transform:none}
@media (prefers-reduced-motion:reduce){
  .jk-onepage .r,
  .jk-onepage .r--zoom img{opacity:1 !important; transform:none !important; transition:none !important}
}

/* 섹션 머리 */
.jk-onepage .op__head{max-width:760px; margin:0 0 clamp(28px,4vw,48px)}
/* ★섹션 라벨의 색은 ★배경에 따라 갈린다 (디자인 D-1, 260819).
   골드(#d5b069)는 다크 밴드에서 대비 9.23 으로 잘 살지만, 밝은 배경에서는 1.76~2.05 라
   글자가 배경에 녹는다(ABOUT 라벨이 거의 안 읽혔다). 밝은 섹션은 ★네이비로,
   골드는 ★다크 전용 액센트로 성격을 나눈다. 밝은 배경용 골드를 따로 만들지 않는다 —
   색이 둘로 늘어나는 것보다 이쪽이 절제돼 보인다(아영 승인). */
.jk-onepage .op__eyebrow{display:block; font-size:.82rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-primary); margin:0 0 .6em}
.jk-onepage .op--dark .op__eyebrow,
.jk-onepage .op-hero .op__eyebrow{color:var(--c-gold)}
.jk-onepage .op__head h2{font-size:clamp(1.5rem,3.4vw,2.2rem); margin:0 0 .4em; word-break:keep-all}
.jk-onepage .op__head p{color:var(--c-muted); font-size:var(--lead); margin:0; word-break:keep-all}
.jk-onepage .op--dark .op__head p{color:var(--c-dark-ink)}

/* ── 히어로 ────────────────────────────────────────────────
   ★글자 그림자를 쓰지 않는다(옛날 느낌). 대신 배경을 덮어 대비를 만든다. */
/* 디자인 D-6 (260819, 아영 승인 · 되돌릴 수 있게):
   사진이 ★두 겹으로 눌려 있었다 — 이미지가 opacity .42 인데 그 위에 .62~.78 짜리 막이
   또 덮여 남는 가시성이 10%대였다. 게다가 막이 ★세로라 사진 전체를 고르게 덮어
   어느 한 곳도 살지 않았고, 글자까지 가운데라 사진이 보일 자리가 아예 없었다.
   → 막을 ★좌→우로 눕히고 글자를 왼쪽에 붙인다. 왼쪽은 글자 몫, 오른쪽 절반은 사진 몫.
     막이 얇아진 만큼 사진 자체를 살린다(.42 → .66).
   ★글자 그림자는 쓰지 않는다(위 원칙 그대로). 대비는 막으로 만든다. */
.jk-onepage .op-hero{position:relative; min-height:min(78vh,660px); display:grid; place-items:center start;
  background:var(--c-dark); overflow:hidden; text-align:left; color:#fff}
.jk-onepage .op-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.66}
.jk-onepage .op-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(3,14,36,.90) 0%, rgba(3,14,36,.82) 34%,
    rgba(3,14,36,.46) 62%, rgba(3,14,36,.12) 86%, rgba(3,14,36,.06) 100%)}
.jk-onepage .op-hero__inner{position:relative; z-index:1; padding:clamp(56px,9vw,96px) var(--pad); max-width:920px}
.jk-onepage .op-hero h1{color:#fff; font-size:clamp(1.6rem,4vw,2.7rem); line-height:1.35; margin:0 0 .5em;
  word-break:keep-all; letter-spacing:-.01em}
.jk-onepage .op-hero__cta{display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap}
/* 섹션 끝에 홀로 놓이는 버튼('갤러리 더보기' · '기술자료 전체 보기')은 ★가운데다(아영 260820).
   ※D-6 에서 히어로 CTA 를 왼쪽으로 옮기며 이 줄까지 딸려 들어가 왼쪽으로 밀려 있었다.
     히어로는 `.op-hero__cta` 가 따로 맡으므로 이 규칙과는 상관이 없다. */
.jk-onepage .op-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.jk-onepage .op-actions{margin:clamp(28px,4vw,40px) 0 0}

/* ※하위 페이지 머리띠(.op-subhero) 규칙은 걷어냈다 — 갤러리 페이지를 없애면서
   쓰는 곳이 한 군데도 남지 않았다(260819 훑기). 되살릴 일이 생기면 git 이력에 있다. */

/* ※숫자 카드(1990년 / 30년 이상)는 사용자 260818 지시로 없앴고, 관련 규칙도 함께 걷어냈다.
   (카드를 되살리려면 git 이력에서 꺼낸다 — 만드는 법을 여기 적어 두지 않는다) */

/* ── 2단 배치 ──────────────────────────────────────────── */
.jk-onepage .op-split{display:grid; gap:clamp(24px,4vw,52px); align-items:center}
.jk-onepage .op-split p{font-size:var(--lead); word-break:keep-all}
.jk-onepage .op-figure{margin:0}
.jk-onepage .op-figure img{width:100%; height:auto; border-radius:4px; display:block}
/* 대표 이름 + 서명 — 옛 사이트처럼 본문 아래 가운데에 둔다 */
.jk-onepage .op-ceo{margin:1.9em 0 .1em; text-align:center; letter-spacing:.1em; color:var(--c-ink)}
.jk-onepage .op-sign{max-width:250px; margin:0 auto}
.jk-onepage .op-sign img{width:100%; height:auto}

/* ── 가로 흐름(Services) — 스크롤을 뺏지 않는다 ──────────
   섹션을 길게 잡고, 그 구간을 지나가는 ★진행률에 따라 트랙을 옆으로 민다.
   화면은 계속 아래로 내려간다. 모바일에서는 아예 끄고 세로로 쌓는다. */
.jk-onepage .op-flow{position:relative; background:var(--c-bg)}
.jk-onepage .op-flow__sticky{padding:var(--sec-pad) 0}
.jk-onepage .op-flow__viewport{overflow:hidden}
.jk-onepage .op-flow__track{display:grid; gap:clamp(20px,3vw,36px)}
.jk-onepage .op-panel{display:grid; gap:clamp(18px,3vw,32px); align-items:center;
  border:1px solid var(--c-line); background:var(--c-bg); padding:clamp(20px,3vw,28px)}
.jk-onepage .op-panel__media{margin:0; overflow:hidden; border-radius:3px}
.jk-onepage .op-panel__media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease)}
.jk-onepage .op-panel:hover .op-panel__media img{transform:scale(1.05)}
.jk-onepage .op-panel__no{display:block; font-family:var(--font-display); font-size:2rem;
  color:var(--c-line); line-height:1; margin:0 0 .2em}
.jk-onepage .op-panel__body h3{font-size:clamp(1.15rem,2.2vw,1.5rem); margin:0 0 .6em}
.jk-onepage .op-panel__body h3 small{display:block; font-size:.62em; color:var(--c-muted); font-weight:600;
  margin-top:.25em}
.jk-onepage .op-panel__body p{font-size:.98rem; color:var(--c-muted); word-break:keep-all}
.jk-onepage .op-card__spec{margin:.9em 0 0; font-size:.9rem; color:var(--c-primary); font-weight:700}
.jk-onepage .op--dark .op-card__spec{color:var(--c-gold)}
.jk-onepage .op-flow__dots{display:flex; gap:8px; justify-content:center; margin:clamp(20px,3vw,28px) 0 0}
.jk-onepage .op-flow__dot{width:26px; height:3px; background:var(--c-line); border-radius:2px;
  transition:background .3s ease, transform .3s ease}
.jk-onepage .op-flow__dot.is-on{background:var(--c-primary); transform:scaleX(1.25)}

/* ── 장비 블록 — 좌우 번갈아, 하나하나 큰 비중 ───────────── */
.jk-onepage .op-eq{display:grid; gap:clamp(20px,3.5vw,44px); align-items:center;
  padding:clamp(28px,4vw,48px) 0; border-top:1px solid rgba(255,255,255,.12)}
.jk-onepage .op-eq:first-of-type{border-top:0}
.jk-onepage .op-eq__media{margin:0; overflow:hidden; border-radius:4px}
.jk-onepage .op-eq__media img{width:100%; height:auto; display:block}
.jk-onepage .op-eq__kind{margin:0 0 .5em; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-gold); font-weight:700}
.jk-onepage .op-eq__body h3{font-family:var(--font-display); font-size:clamp(1.25rem,2.6vw,1.75rem); margin:0 0 .25em}
.jk-onepage .op-eq__maker{margin:0 0 1em; color:#9aa0a6; font-size:.92rem}
.jk-onepage .op-eq__specs{list-style:none; margin:0; padding:0}
.jk-onepage .op-eq__specs li{position:relative; padding:0 0 0 16px; margin:0 0 .55em; color:var(--c-dark-ink);
  font-size:.97rem; word-break:keep-all}
.jk-onepage .op-eq__specs li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:1px;
  background:var(--c-gold)}
.jk-onepage .op-eq__note{margin:1.1em 0 0; font-size:.88rem; color:#9aa0a6; word-break:keep-all}

/* ── 갤러리 미끄러짐(홈) ─────────────────────────────────── */
.jk-onepage .op-drift{overflow:hidden; display:grid; gap:12px; padding:0 var(--pad)}
/* 좁은 화면에서는 2열 — 4열이면 한 칸이 100px 남짓으로 뭉개진다(실측 102px) */
.jk-onepage .op-drift__row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  will-change:transform}
@media (min-width:768px){
  .jk-onepage .op-drift__row{grid-template-columns:repeat(4,1fr)}
}
.jk-onepage .op-drift__cell{display:block; overflow:hidden; border-radius:3px; aspect-ratio:1/1}
.jk-onepage .op-drift__cell img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease)}
.jk-onepage .op-drift__cell:hover img{transform:scale(1.05)}

/* ※갤러리 페이지 격자(.op-grid) 규칙도 걷어냈다 — 별도 갤러리 페이지가 없다.
   홈의 사진 줄은 .op-drift / .op-gal 이 담당한다. */

/* ── 진행 레일 (사용자 260818 · 3차 수정: 구간별 색반전) ──
   요구: "검은 배경에 진입하면 ★딱 그 구간만 색이 반전되고, 빠져나오면 돌아온다."

   방법: 배경과 ★섞이는 혼합 모드(difference)를 쓴다. 픽셀 단위로 뒤에 깔린 색과 반전되므로
        선이 밝은 구간과 어두운 구간에 걸쳐 있으면 ★걸친 부분만 각각 뒤집힌다.
        자바스크립트로 구간을 감시할 필요가 없다 — 브라우저가 알아서 한다.

   색 설계: 흰색 계열만 쓴다.
     · 밝은 배경 위 → 반전돼 ★어둡게 보인다
     · 어두운 배경 위 → 그대로 ★밝게 보인다
     검은색을 쓰면 반전 결과가 '배경 그대로'라 사라지므로 쓰지 않는다.
     진행분(진하게)과 남은 분(옅게)의 구분은 ★불투명도 차이로 준다.

   혼합 모드를 모르는 브라우저를 위해 아래에 예전 방식(흰 테두리+검은 속)을 남겨 둔다. */
.jk-onepage .op-rail{
  position:fixed; left:var(--rail-left); top:50%; transform:translateY(-50%);
  width:var(--rail-w); height:var(--rail-len); z-index:40; display:none;
  background:rgba(213,176,105,.40);      /* 아직 안 지난 구간 — ★골드 */
  border-radius:calc(var(--rail-w) / 2);
  opacity:0; transition:opacity .45s ease; pointer-events:none; overflow:hidden;
  mix-blend-mode:difference;             /* ★겹친 구간만 반전 */
}
html.has-rail .jk-onepage .op-rail{opacity:1}
/* ★색이 배경에 따라 저절로 갈린다 — D-8(나)·D-1 의 색 규칙과 맞아떨어진다.
   레일은 화면에 ★고정이라 지금 뒤에 어느 섹션이 있는지 CSS 로는 알 수 없다. 그런데
   mix-blend-mode:difference 는 ★뒤 색과의 차를 그리므로, 칠을 ★골드로 두면
     · 다크 밴드(#0d1117) 위 → |13-213|,|17-176|,|23-105| = 골드 그대로
     · 흰 배경(#fff)   위 → 255-골드 = rgb(42,79,150) ★네이비
   가 된다. 자바스크립트 한 줄 없이 "다크에선 골드, 밝은 데선 네이비"가 된다. */
.jk-onepage .op-rail__fill{
  display:block; width:100%; height:100%; background:var(--c-gold);   /* 지나온 구간 */
  transform:scaleY(0); transform-origin:top center; transition:transform .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .jk-onepage .op-rail__fill{transition:none}
}
/* 혼합 모드를 못 쓰는 환경 — 예전 방식(흰 테두리 + 검은 속)으로 되돌린다 */
@supports not (mix-blend-mode: difference){
  .jk-onepage .op-rail{
    background:rgba(17,17,17,.22); border:var(--rail-edge) solid #fff; box-sizing:content-box;
  }
  .jk-onepage .op-rail__fill{background:var(--c-primary)}
}

/* ── 유튜브 파사드 ───────────────────────────────────────── */
.jk-onepage .jk-yt{position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; padding:0;
  background:#000; cursor:pointer; overflow:hidden; border-radius:4px}
.jk-onepage .jk-yt>img{width:100%; height:100%; object-fit:cover; display:block}
.jk-onepage .jk-yt::after{content:""; position:absolute; left:50%; top:50%; width:68px; height:48px;
  transform:translate(-50%,-50%); background:rgba(20,20,20,.78); border-radius:12px; transition:background .25s ease}
.jk-onepage .jk-yt::before{content:""; position:absolute; left:50%; top:50%; z-index:1;
  transform:translate(-38%,-50%); border-style:solid; border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff}
.jk-onepage .jk-yt:hover::after{background:#c00}
.jk-onepage .jk-yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ── 오시는 길 ───────────────────────────────────────────── */
.jk-onepage .op-contact{display:grid; gap:clamp(24px,4vw,44px)}
/* 오시는 길 목록 — ★글자 크기를 하나로 통일한다(사용자 260818).
   라벨과 값의 구분은 크기가 아니라 ★굵기와 색으로만 한다.
   (전에는 라벨·값 16px, 안내문 17.9px, 괄호 문구 13.3px 로 세 가지가 섞여 있었다) */
.jk-onepage .op-info,
.jk-onepage .op-info dt,
.jk-onepage .op-info dd,
.jk-onepage .op-info small,
.jk-onepage .op-info a{font-size:var(--lead); line-height:1.7}
.jk-onepage .op-info dt{font-weight:700; color:var(--c-primary-dark); margin-top:1.15em}
.jk-onepage .op-info dt:first-child{margin-top:0}
.jk-onepage .op-info dd{margin:.25em 0 0; color:var(--c-ink); word-break:keep-all}
.jk-onepage .op-info small{display:block; margin-top:.15em; color:var(--c-muted)}
/* 지도 — ★정적 그림 + 카카오맵 링크(아영 260819). 임베드 위젯이 아니라 그림 한 장이라
   폭에 맞춰 늘고 준다. 그림이 안 올 때를 대비해 최소 높이와 바닥색은 남겨 둔다. */
.jk-onepage .op-map{min-height:120px; background:var(--c-bg-alt); border:1px solid var(--c-line)}
.jk-onepage .op-map__view{position:relative; display:block}
.jk-onepage .op-map__view img{width:100%; height:auto; display:block}
/* 물방울 핀 — 뾰족한 끝이 ★그림 한가운데(회사 위치)를 가리킨다 */
.jk-onepage .op-map__pin{
  position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-21px 0 0 -9px;
  background:var(--c-primary); border:3px solid #fff; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.jk-onepage .op-map__cta{
  position:absolute; right:10px; bottom:10px; padding:6px 11px; border-radius:3px;
  background:rgba(255,255,255,.94); color:var(--c-primary-dark);
  font-size:.85rem; font-weight:700; box-shadow:0 2px 8px rgba(10,16,28,.22);
}
.jk-onepage .op-map__view:hover .op-map__cta{background:var(--c-primary); color:#fff}
.jk-onepage .op-map__links{margin:.7em 0 0; font-size:.9rem; color:var(--c-muted)}
.jk-onepage .op-map__links a{font-weight:600}

/* 앵커 이동 시 고정 헤더에 가리지 않게 */
.jk-onepage [id]{scroll-margin-top:80px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ── 넓은 화면 ───────────────────────────────────────────── */
@media (min-width:768px){
  /* 레일이 본문 위에 겹치지 않도록 ★왼쪽에 자리를 비워 둔다(사용자 260818) */
  .jk-onepage .container,
  .jk-onepage .op-drift,
  .jk-onepage .op-flow__track{padding-left:calc(var(--pad) + var(--rail-space))}
  .jk-onepage .op-rail{display:block}

  /* 장비 — 뒤집힌 칸도 ★글자는 왼쪽 정렬이다 (260819 2차 점검 6번).
     사진 쪽에 붙이려고 우측정렬을 줬더니 대시가 글자 오른쪽 끝에 붙고 마지막 줄이
     "대응" 한 단어만 오른쪽에 떨어져 남았다. 한글 본문은 좌측 정렬이 읽기 편하다.
     ★사진 좌우 배치(op-eq__media order)는 그대로 둔다 — 바꾸는 건 글자 정렬뿐이다. */

  .jk-onepage .op-split{grid-template-columns:1.15fr 1fr}
  /* ★지도는 위에 붙인다. 안 그러면 격자가 옆 칸(주소·연락처) 높이에 맞춰 지도 상자를
     늘여서, 실제 지도 그림(515px) 아래로 회색 바닥이 147px 남는다 (260819 2차 점검 4번,
     1440x900 새로고침 상태 실측). 지도 자체는 500x500 고정 임베드라 늘어나지 않는다. */
  .jk-onepage .op-contact{grid-template-columns:1fr 1fr; align-items:start}

  /* 장비 — 좌우 번갈아 */
  .jk-onepage .op-eq{grid-template-columns:1fr 1fr}
  .jk-onepage .op-eq--rev .op-eq__media{order:2}

  /* 가로 흐름 켜기: 섹션을 패널 수만큼 길게 잡고 안쪽을 화면에 고정 */
  .jk-onepage .op-flow{height:calc(var(--panels,4) * 92vh)}
  .jk-onepage .op-flow__sticky{position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
    justify-content:center; padding:0}
  .jk-onepage .op-flow__sticky .op__head{margin-bottom:clamp(16px,2vw,28px)}
  /* ★minmax(0,…) 를 쓰면 칸이 0까지 줄어들어 4장이 화면 폭에 눌린다(260818 실측: 트랙 폭 1425px).
     가로로 넘치게 하려면 ★고정 폭이어야 한다. */
  .jk-onepage .op-flow__track{grid-auto-flow:column; grid-auto-columns:min(760px,78vw);
    justify-content:start; will-change:transform; padding:0 var(--pad)}
  .jk-onepage .op-panel{grid-template-columns:1fr 1.05fr; height:min(54vh,440px)}
  .jk-onepage .op-panel__media{height:100%}
}
@media (min-width:1200px){
  .jk-onepage .op-flow__track{grid-auto-columns:820px}
}

/* ── 히어로 레이저 커팅 연출 (지시서 260818) ──────────────
   검은 막 위에서 로고를 잘라내고 식힌 뒤 막이 걷힌다.
   ★막일 뿐이다 — 아래 본문은 처음부터 정상적으로 그려져 있다. */
.jk-onepage .op-laser{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition:opacity .7s ease;
}
/* ★막(커튼)은 ★배경 판으로 따로 뒀다 (아영 260820).
   요소 자체에 배경을 주면 막을 걷을 때 ★로고까지 같이 딸려 올라간다.
   판을 갈라 두면 ★막만 위로 걷히고 로고는 제자리에서 계속 재생된다. */
/* 커튼은 ★양옆으로 갈라진다(아영 260820). 전에는 위로 걷었는데, 그러면 로고가 있는
   ★화면 한가운데가 절반쯤 지나야 열려서 로고가 거기 우두커니 서 있는 구간이 생겼다.
   갈라지면 ★중앙이 가장 먼저 열리고, 로고가 위로 날아가도 커튼에 가릴 일이 없다.
   그래서 커튼과 비행을 ★겹쳐 진행할 수 있다 = 한 동작으로 읽힌다.
   폭은 50%+1px — 딱 절반이면 서브픽셀 때문에 가운데에 실금이 비친다. */
.jk-onepage .op-laser::before,
.jk-onepage .op-laser::after{
  content:""; position:absolute; top:0; bottom:0; width:calc(50% + 1px); z-index:-1; background:#08080a;
  /* ★빠르게 열고 끝에서만 부드럽게 멈춘다(0.28초). 커튼은 이제 ★로고가 다 날아간 뒤에
     열리므로 오래 끌 이유가 없다 — 열리는 순간이 곧 '화면이 시작되는' 신호다. */
  transition:background 3s ease, transform .28s cubic-bezier(.2,.85,.25,1);
}
.jk-onepage .op-laser::before{left:0}
.jk-onepage .op-laser::after{right:0}
.jk-onepage .op-laser[hidden]{display:none}
.jk-onepage .op-laser.is-cool::before,
.jk-onepage .op-laser.is-cool::after{background:#f2f3f3}
.jk-onepage .op-laser.is-done{opacity:0; pointer-events:none}
/* ★모션 최소화 설정(prefers-reduced-motion)에서 쓰는 정지 화면 — 아영 260820.
   전에는 연출을 통째로 건너뛰어 ★로고가 아예 안 보였다(배터리 절약 모드를 켠 폰이
   대개 이 상태다). 이제는 움직임만 빼고 로고는 보여준다: 배경을 처음부터 밝게 두고
   완성된 로고를 띄운 뒤, ★투명도만으로 사라진다(위치·크기 변화 없음 = 모션 아님). */
.jk-onepage .op-laser.is-still::before,
.jk-onepage .op-laser.is-still::after{background:#f2f3f3; transition:none}
.jk-onepage .op-laser__stage{width:min(1100px,92vw); display:flex; justify-content:center}
.jk-onepage .op-laser__svg{width:82%}
.jk-onepage .op-laser__svg svg{width:100%; height:auto; display:block; overflow:visible}
/* ※건너뛰기 버튼 규칙은 걷어냈다 — 버튼 자체를 없앴다(아영 260820). */

/* ★막이 씌워지기 ★전에 본문이 새어 보이던 것을 막는다 (260818).
   진짜 막(.op-laser)은 ★본문 안에 있는 요소다. 그래서 본문을 다 읽은 뒤에야 씌울 수 있고,
   그 틈에 히어로가 먼저 그려져 보였다(실측: 첫 화면 1028ms → 막 1103ms = ★75ms 샘.
   회선이 느리면 이 틈이 더 벌어진다).
   그래서 ★문서 최상단(html)에 검은 판을 하나 깔아 둔다. 이건 본문이 만들어지기 ★전부터
   있으므로 첫 화면부터 검다. 표시는 <head> 의 짧은 스크립트가 붙인다.
   ★표시가 안 붙으면(스크립트 차단·재방문·모션최소화) 이 판은 아예 생기지 않는다. */
html.laser-on::before{
  content:""; position:fixed; inset:0; z-index:199; background:#08080a;
}
/* 로고가 날아가기 시작하면 이 판은 ★즉시 없앤다.
   그 순간 진짜 막이 아직 같은 색으로 꽉 차 있어 눈에는 아무 변화가 없다.
   같이 서서히 걷으면 두 겹이 겹쳐 중간이 더 어두워 보인다. */
html.laser-fly::before{display:none}

/* 연출이 도는 동안에는 배경 스크롤을 묶어 둔다(막이 걷히면 바로 푼다) */
html.laser-on, html.laser-on body{overflow:hidden}

/* ★막이 걷힌다 — 커튼이 위로 올라가듯. 로고는 제자리에서 계속 재생된다.
   걷는 계기 = 사용자의 첫 스크롤·터치·키·클릭, 또는 냉각이 끝나는 시점(자동). */
html.laser-open .jk-onepage .op-laser::before{transform:translateX(-100%)}
html.laser-open .jk-onepage .op-laser::after{transform:translateX(100%)}
/* ※로고에 그림자를 깔았던 규칙은 걷어냈다 (아영 260820).
   막이 걷힌 뒤 로고가 사진 위에 오래 떠 있을 때를 대비한 것이었는데, 이제 스크롤은
   ★빨리 감기라 그 상태가 길어야 몇 백 ms 다. 오프닝 끝 화면에도 헤더 로고에도 그림자가
   없는데 ★중간에만 생겼다 사라지니 오히려 눈에 걸렸다. */
/* ★막이 걷혔으면 이 층은 클릭을 가로막지 않는다 — 아래 버튼·링크가 바로 눌려야 한다 */
html.laser-open .jk-onepage .op-laser{pointer-events:none}

@media (max-width:767px){
  .jk-onepage .op-laser__svg{width:94%}
}

/* ============================================================
   12. 여백·타이포 확대 + 3D 설계 섹션 (지시서 2차 260818)
       사용자 표현: "컨텐츠가 너무 빡빡하다. 좋다고 한 페이지들보다 촘촘하다."
       ★핵심: 여백만 늘려선 시원해지지 않는다. ★글자 크기와 함께 가야 한다.
       실측 근거(개편 직후): 섹션패딩 70px · H1 35px · H2 30px · 제목하단 12px
   ============================================================ */
.jk-onepage{
  --sec-pad:clamp(90px, 10vw, 160px);     /* 70px -> 넉넉하게 */
  --lead:clamp(1rem, 1.15vw, 1.06rem);    /* 본문 15~17px, 행간은 아래에서 넉넉히 */
  --head-gap:clamp(24px, 3vw, 40px);      /* 제목 아래 숨통 */
  --block-gap:clamp(40px, 5vw, 64px);     /* 제목 블록 ↔ 콘텐츠 블록 */
}
.jk-onepage .op__head{margin-bottom:var(--block-gap); max-width:900px}
.jk-onepage .op__head h2{
  /* 디자인 D-3 (260819): 히어로 h1 과 섹션 h2 의 차가 17% 뿐이라 히어로가 안 압도했다.
     D-2 로 제목이 ★짧은 명사구가 됐으므로 낮춰도 허전하지 않다. 24 ~ 36px. */
  font-size:clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing:-.03em;                        /* 커질수록 벌어져 보이는 것을 조인다 */
  line-height:1.28; margin:0 0 var(--head-gap);
}
/* 행간 — ★1.95 는 넓은 게 아니라 문단이 흩어지는 값이다 (디자인 D-4, 260819).
   16.56px 글자에 32.29px 행간이면 5~6줄 문단에서 줄이 낱개로 뜬다.
   국문 본문은 1.7~1.75 가 덩어리로 읽힌다. ★word-break:keep-all 은 잘 돼 있으니 그대로 둔다. */
.jk-onepage .op__head p{line-height:1.72}
.jk-onepage .op-split p,
.jk-onepage .op-card p,
.jk-onepage .op-info dd{line-height:1.72}

/* 히어로 — 화면 높이만큼. 단 꽉 채우지 않아 아래가 살짝 보이게 */
.jk-onepage .op-hero{min-height:clamp(560px, 92vh, 900px)}
.jk-onepage .op-hero h1{
  font-size:clamp(2.5rem, 6vw, 4.75rem);       /* 35 -> 최대 76px */
  letter-spacing:-.035em; line-height:1.24; margin:0 0 .55em;
}
.jk-onepage .op__eyebrow{margin:0 0 1em}

/* 섹션 라벨은 좌에서 우로 짧게 밀려 들어온다(리듬) */
html.jk-anim .jk-onepage .op__eyebrow.r{transform:translateX(-18px)}
html.jk-anim .jk-onepage .op__eyebrow.r.is-in{transform:none}

/* 제목과 본문의 이동 거리를 벌려 위계를 만든다 */
html.jk-anim .jk-onepage .r--lead{transform:translateY(48px)}
html.jk-anim .jk-onepage .r{transform:translateY(24px)}
html.jk-anim .jk-onepage .r--zoom.r{transform:translateY(24px)}

/* ── 3D 설계 섹션 ──────────────────────────────────────────
   차별점인데 가장 짧았다(676px). 영상을 크게 두고, 설명을 세 항목으로 나누고,
   설계 화면 ↔ 실물 대비를 붙여 비중을 올린다. */
/* ★연한 회색 바닥(사용자 260818). 원래는 네이비였고 글자색이 전부 '어두운 바닥' 전제로
   잡혀 있었다. 배경만 바꾸면 글이 안 보이므로 ★이 블록 전체를 밝은 기준으로 다시 썼다.
   위아래가 흰색·연회색이라 서로 구분되는 값을 골랐다(측정으로 확인). */
.jk-onepage .op--design{background:#eceef0}
.jk-onepage .op--design .op__head p{color:var(--c-muted)}
.jk-onepage .op-video{max-width:1000px; margin:0 auto var(--block-gap)}
.jk-onepage .op-video__cap{margin:.9em 0 0; text-align:center; font-size:.9rem; color:var(--c-muted)}
.jk-onepage .op-cards--3{grid-template-columns:1fr}
/* ★글상자 뒤 배경과 테두리를 없앤다(사용자 260818). 글만 남는다.
   칸 구분은 간격으로 충분하다. 클래스 이름의 '--dark'는 이제 뜻이 없지만,
   이름만 바꾸면 다른 규칙들과 어긋나므로 ★한 번에 정리할 때 같이 손본다. */
.jk-onepage .op-card--dark{
  background:none; border:0; padding-left:0; padding-right:0;
}
.jk-onepage .op-card--dark h3{color:var(--c-primary-dark); font-size:1.08rem}
.jk-onepage .op-card--dark p{color:var(--c-ink)}

.jk-onepage .op-compare{display:grid; gap:clamp(16px,2.5vw,28px); margin:var(--block-gap) 0 0}
.jk-onepage .op-compare__item{margin:0}
.jk-onepage .op-compare__item img{width:100%; height:100%; object-fit:cover; display:block;
  border-radius:4px; aspect-ratio:4/3}
.jk-onepage .op-compare__item figcaption{
  margin:.8em 0 0; font-size:.88rem; letter-spacing:.02em; color:var(--c-muted);
}

@media (min-width:768px){
  .jk-onepage .op-cards--3{grid-template-columns:repeat(3,1fr)}
  .jk-onepage .op-compare{grid-template-columns:1fr 1fr}
}

/* 히어로 — 제목이 커진 만큼 담는 폭도 넓힌다.
   ★작성된 줄바꿈(2줄)이 유지되게 하는 것이 목적이다. 4줄로 갈라지면 첫인상이 산만해진다. */
.jk-onepage .op-hero__inner{max-width:min(1220px, 94vw)}
.jk-onepage .op-hero h1{text-wrap:balance}

/* 제목이 커졌으니 버튼도 그에 맞춘다 */
.jk-onepage .op-hero__cta .btn{padding:16px 34px; font-size:1.02rem}
.jk-onepage .btn{transition:transform .35s var(--ease), background .3s ease}
.jk-onepage .btn:hover{transform:translateY(-2px)}

/* ============================================================
   13. 레이저 연출 → 히어로 전환 (지시서 B 260818, (c)안 확정)
       "로고가 화면 중앙에서 헤더 로고 자리로 축소·이동하고, 그 자리를 히어로 문구가 채운다."
       ★연출은 막일 뿐이다 — 아래 본문은 처음부터 정상 렌더돼 있고, 이 규칙들은 ★잠시 가릴 뿐이다.
       그래서 전부 html 에 붙는 상태 클래스로만 제어한다. 스크립트가 죽으면 아무것도 안 가려진다.
   ============================================================ */

/* 연출이 도는 동안 — 헤더를 숨긴다(로고가 둘로 보이면 안 된다) */
/* 헤더를 가리는 몫 — 연출 중(laser-on)과 ★막이 걷힌 뒤 로고가 날아오는 동안(laser-veil).
   ★둘을 갈라 둔 이유: 잠금(laser-on)을 푸는 시점과 헤더를 되살리는 시점이 다르다.
   한 표시로 묶으면 커튼이 걷히자마자 헤더 로고가 떠서 ★로고가 두 개로 보인다. */
html.laser-on .site-header,
html.laser-veil .site-header{opacity:0; pointer-events:none}
html.laser-header .site-header{opacity:1; pointer-events:auto; transition:opacity .5s ease}

/* 연출이 도는 동안 — 히어로 문구를 잡아 둔다. 로고가 날아갈 때 차례로 놓아준다.
   ★등장 규칙(html.jk-anim … .r.is-in)이 더 구체적이라 그냥 쓰면 밀린다.
     그래서 잡아두는 쪽도 ★같은 구체성으로 맞춘다(260818 실제로 밀려서 안 잡혔다). */
html.laser-on .jk-onepage .op-hero__inner > *,
html.laser-on .jk-onepage .op-hero__inner > .r.is-in{opacity:0; transform:translateY(24px)}

/* 놓아주는 쪽은 같은 구체성 + ★더 뒤에 온다 → 이긴다 */
html.laser-fly .jk-onepage .op-hero__inner > *,
html.laser-fly .jk-onepage .op-hero__inner > .r.is-in,
html.laser-open .jk-onepage .op-hero__inner > *,
html.laser-open .jk-onepage .op-hero__inner > .r.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--seq, 0ms);
}
/* 등장 차례: 라벨 → 제목 → 버튼. 로고 이동과 겹쳐야 매끄럽다.
   ★부제 한 줄을 뺐으므로(사용자 260818) 4단이 아니라 3단이다. */
.jk-onepage .op-hero__inner > *:nth-child(1){--seq:0ms}
.jk-onepage .op-hero__inner > *:nth-child(2){--seq:180ms}
.jk-onepage .op-hero__inner > *:nth-child(3){--seq:400ms}

/* 막이 걷히며 히어로가 드러난다. 로고만 남아 헤더 자리로 날아간다 */
/* ★transition 을 다시 쓸 때 ★transform 몫을 빠뜨리면 안 된다. 빠뜨리면 그 순간
   커튼이 ★슬며시 걷히다 말고 뚝 사라진다 — 로고가 날아가기 직전에 화면이 한 번 튀어
   '미묘한 틈'으로 보였다(아영 260820 지적, 실측으로 확인). */
/* ※'날아갈 때 커튼을 투명하게' 규칙은 걷어냈다 (아영 260820).
   커튼은 이제 ★로고가 다 날아간 뒤에 열리므로, 그 전에 투명해지면 안 된다.
   게다가 두 패널이 겹친 가운데만 ★덜 투명해져 세로 실금처럼 보였다.
   커튼은 오직 ★옆으로 빠지는 것으로만 사라진다. */
.jk-onepage .op-laser.is-fly .op-laser__stage{align-items:flex-start}

/* 연출이 끝났거나 처음부터 생략된 상태 — 아무것도 가리지 않는다 */
html.laser-done .site-header{opacity:1}

@media (prefers-reduced-motion:reduce){
  html.laser-fly .jk-onepage .op-hero__inner > *{transition:none}
}

/* ============================================================
   14. 섹션별 애니메이션 보강 (지시서 A 260818)

       원칙 — 섹션당 강조 1~2개. 전부 움직이면 아무것도 강조되지 않는다.
       ★무한 반복은 3D 재생 버튼 ★하나뿐이다. 나머지는 전부 1회성.
       transform / opacity / clip-path 만 쓴다(레이아웃을 다시 계산시키지 않는 것들).
       이징은 섹션 11 의 --ease 하나로 통일했다(지시서 A 7-1).
   ============================================================ */

/* ── 공통: 마스크 리빌 ──────────────────────────────────────
   가려 두었다가 한쪽에서 걷어내며 드러낸다. 떠오르는 리빌(.r)과 성격이 달라
   ★.r 을 붙이지 않고 이것만 쓴다(두 연출이 겹치면 산만해진다).

   ★가리는 것은 ★안쪽 사진이지 바깥 상자가 아니다.
   상자 자체를 clip-path 로 0 넓이까지 접으면 브라우저는 그 요소를 ★화면에 없는 것으로
   본다 → 등장 감시기(IntersectionObserver)가 영영 안 걸리고 사진이 끝까지 안 나온다.
   (260818 실측: 이 방식으로 장비 사진 4장·대비 사진 2장·서명이 통째로 안 떴다)
   상자는 그대로 두고 안쪽만 접으면 감시도 되고 연출도 된다. */
html.jk-anim .jk-onepage .r--mask{opacity:0}
html.jk-anim .jk-onepage .r--mask-l{opacity:0}
html.jk-anim .jk-onepage .r--mask-r{opacity:0}
html.jk-anim .jk-onepage .r--mask > img{clip-path:inset(100% 0 0 0)}      /* 아래 → 위 */
html.jk-anim .jk-onepage .r--mask-l > img{clip-path:inset(0 100% 0 0)}    /* 좌 → 우 */
html.jk-anim .jk-onepage .r--mask-r > img{clip-path:inset(0 0 0 100%)}    /* 우 → 좌 */
html.jk-anim .jk-onepage .r--mask.is-in,
html.jk-anim .jk-onepage .r--mask-l.is-in,
html.jk-anim .jk-onepage .r--mask-r.is-in{
  opacity:1; transition:opacity .8s var(--ease);
}
html.jk-anim .jk-onepage .r--mask.is-in > img,
html.jk-anim .jk-onepage .r--mask-l.is-in > img,
html.jk-anim .jk-onepage .r--mask-r.is-in > img{
  clip-path:inset(0); transition:clip-path 1.1s var(--ease);
}

/* ── 1. 회사소개 — 숫자와 서명 ─────────────────────────────── */
/* 대표 서명 — 이 페이지에서 가장 인간적인 요소다. 왼쪽에서 오른쪽으로 그어진다.
   ★위 마스크 리빌과 같은 이유로 접는 대상은 ★안쪽 이미지다 */
html.jk-anim .jk-onepage .op-sign > img{clip-path:inset(0 100% 0 0)}
html.jk-anim .jk-onepage .op-sign.is-in > img{clip-path:inset(0); transition:clip-path 6s var(--ease)}

/* ── 2. 가공 서비스 — 가로 흐름 ────────────────────────────── */
/* 인디케이터는 점프하지 않고 미끄러진다 */
.jk-onepage .op-flow__dot{transition:background .45s var(--ease), transform .45s var(--ease)}

@media (min-width:768px){
  /* ★가로 흐름이 켜진 화면에서만. 세로로 쌓이는 좁은 화면에서 이걸 걸면
     '지금 보는 패널'이라는 개념이 없어 전부 흐려진 채로 남는다. */
  .jk-onepage .op-panel{opacity:.45; transition:opacity .5s var(--ease)}
  .jk-onepage .op-panel.is-on{opacity:1}

  /* 패널 안은 번호 → 제목 → 본문 → 사양 순으로 조금씩 늦게 */
  html.jk-anim .jk-onepage .op-panel > .op-panel__body > *{
    opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *{opacity:1; transform:none}
  /* ★시차는 ★들어올 때만. 나갈 때까지 늦추면 흐려지는 게 질질 끌린다.
     그래서 지연값을 .is-on 쪽에 적는다 — 위 transition 묶음보다 ★구체적이어야
     한다(묶음 표기는 transition-delay 를 0 으로 되돌린다. 260818 실측: 전부 0s). */
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *:nth-child(1){transition-delay:0ms}
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *:nth-child(2){transition-delay:70ms}
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *:nth-child(3){transition-delay:140ms}
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *:nth-child(4){transition-delay:210ms}
  html.jk-anim .jk-onepage .op-panel.is-on > .op-panel__body > *:nth-child(5){transition-delay:280ms}
}

/* ── 3. 3D 설계 — 이 회사의 차별점, 가장 힘주는 곳 ─────────── */
/* ★이 사이트에서 무한 반복은 여기 하나뿐이다(지시서 A 3장·8장).
   틀·삼각형 두 조각이 따로 놀지 않게 같은 배율로 함께 숨쉰다. */
@keyframes jk-yt-box{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes jk-yt-tri{0%,100%{transform:translate(-38%,-50%) scale(1)}50%{transform:translate(-38%,-50%) scale(1.06)}}
.jk-onepage .jk-yt::after{animation:jk-yt-box 2s ease-in-out infinite}
.jk-onepage .jk-yt::before{animation:jk-yt-tri 2s ease-in-out infinite}
/* ★영상이 실제로 재생되면 재생버튼은 사라져야 한다.
   (::before 에 z-index:1 이 있어 그냥 두면 재생 중인 화면 ★위에 흰 삼각형이 떠 있는다) */
.jk-onepage .jk-yt[data-loaded]::after,
.jk-onepage .jk-yt[data-loaded]::before{display:none}

/* METACAM 설명 세 항목 — 왼쪽에서 순차로 밀려 들어온다 */
html.jk-anim .jk-onepage .op-card--dark.r{transform:translateX(-24px)}
html.jk-anim .jk-onepage .op-card--dark.r.is-in{transform:none}

/* ── 4. 보유 장비 — 스펙이 한 줄씩 읽히게 ──────────────────── */
html.jk-anim .jk-onepage .op-eq__specs li{opacity:0; transform:translateX(-12px);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__specs li{opacity:1; transform:none}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__specs li:nth-child(1){transition-delay:140ms}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__specs li:nth-child(2){transition-delay:210ms}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__specs li:nth-child(3){transition-delay:280ms}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__specs li:nth-child(4){transition-delay:350ms}
/* ※ 뒤집힌 칸의 스펙을 오른쪽에서 밀어 넣던 규칙은 지웠다 — 글자 정렬을 좌측으로
   되돌렸으므로(260819 2차 점검 6번) 등장 방향도 다른 칸과 같이 ★왼쪽에서가 맞다. */

/* 장비 사이 구분선이 좌 → 우로 그어진다(도면 같은 질감) */
.jk-onepage .op-eq{position:relative; border-top:0}
.jk-onepage .op-eq::before{content:""; position:absolute; left:0; top:0; height:1px; width:0;
  background:rgba(255,255,255,.12); transition:width 1.2s var(--ease)}
.jk-onepage .op-eq:first-of-type::before{content:none}
.jk-onepage .op-eq.is-in::before{width:100%}

/* '대표장비' 배지 — 한 박자 늦게 톡 튀어나온다. ★4대 중 이것 하나뿐이라 눈에 든다 */
.jk-onepage .op-eq__badge{display:inline-block; margin-left:.6em; padding:.3em .7em; border-radius:2em;
  background:var(--c-gold); color:#141414; font-size:.92em; font-weight:800; letter-spacing:.04em;
  vertical-align:middle}
html.jk-anim .jk-onepage .op-eq__badge{opacity:0; transform:scale(.8)}
html.jk-anim .jk-onepage .op-eq__body.is-in .op-eq__badge{opacity:1; transform:none;
  transition:opacity .45s var(--ease) .5s, transform .45s cubic-bezier(.34,1.5,.64,1) .5s}

/* ── 6. 오시는 길 — 페이지가 여기서 끝난다. 여운 있게 ───────── */
/* 라벨과 값은 ★한 쌍씩 차례로 뜬다(라벨만 먼저 뜨면 짝이 어긋나 보인다).
   쌍 단위 지연은 JS 가 --d 로 넣는다. */
html.jk-anim .jk-onepage .op-info > *{opacity:0; transform:translateY(12px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0ms)}
html.jk-anim .jk-onepage .op-info.is-in > *{opacity:1; transform:none}
/* 지도는 살짝 확대된 채로 들어와 제자리에 앉는다 */
html.jk-anim .jk-onepage .op-map{opacity:0; transform:scale(1.03);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
html.jk-anim .jk-onepage .op-map.is-in{opacity:1; transform:none}
/* 전화·이메일 — 밑줄이 좌 → 우로 그어진다. 누를 수 있다는 신호 */
.jk-onepage .op-info a{position:relative; text-decoration:none}
.jk-onepage .op-info a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--ease)}
.jk-onepage .op-info a:hover::after,
.jk-onepage .op-info a:focus-visible::after{transform:scaleX(1)}

/* ── 모션 최소화 — 위에서 더한 것 전부를 되돌린다 ───────────
   섹션 11 의 되돌림 규칙은 .r 만 훑는다. 여기서 새로 생긴 것들(마스크·스펙·
   패널·지도·연락처)은 .r 이 아니므로 ★따로 적어 줘야 한다. */
@media (prefers-reduced-motion:reduce){
  .jk-onepage .r--mask, .jk-onepage .r--mask-l, .jk-onepage .r--mask-r,
  .jk-onepage .r--mask > img, .jk-onepage .r--mask-l > img, .jk-onepage .r--mask-r > img,
  .jk-onepage .op-sign > img, .jk-onepage .op-map, .jk-onepage .op-info > *,
  .jk-onepage .op-eq__specs li, .jk-onepage .op-panel,
  .jk-onepage .op-panel > .op-panel__body > *, .jk-onepage .op-eq__badge{
    opacity:1 !important; transform:none !important; clip-path:none !important;
    transition:none !important;
  }
  .jk-onepage .op-eq::before{transition:none; width:100%}
  .jk-onepage .jk-yt::after, .jk-onepage .jk-yt::before{animation:none}
}

/* ============================================================
   15. 2차 수정 (아영 260818 밤)
   ============================================================ */

/* ── 6. 가공 서비스 — 칸 안에서 글을 다 읽을 수 있게 ─────────
   레이저 칸 설명이 칸 높이를 넘겨 ★잘려 있었다.
   ★스크롤을 가로채지 않는다 — 본문에 overflow-y:auto 만 주면 브라우저가 알아서
   '칸 안을 먼저 굴리고 다 굴리면 페이지로 이어 굴린다'(스크롤 연쇄). 자바스크립트를
   쓰지 않는 이유가 이것이다. 손으로 가로채면 폰에서 반드시 망가진다. */
@media (min-width:768px){
  .jk-onepage .op-panel__body{
    max-height:100%; overflow-y:auto;
    /* ★overscroll-behavior 를 contain 으로 막으면 안 된다. 그러면 글을 다 읽어도
       페이지가 이어서 내려가지 않아 마우스를 칸 밖으로 빼야 한다 — 요구사항의 반대다.
       기본값(auto)이라야 '칸을 다 굴리면 페이지로 이어 굴린다'가 된다. */
    padding-right:14px;                     /* 스크롤 막대가 글을 덮지 않게 */
    scrollbar-width:thin;                   /* 있다는 건 보이되 얇게 */
    scrollbar-color:var(--c-line) transparent;
  }
  .jk-onepage .op-panel__body::-webkit-scrollbar{width:6px}
  .jk-onepage .op-panel__body::-webkit-scrollbar-track{background:transparent}
  .jk-onepage .op-panel__body::-webkit-scrollbar-thumb{
    background:var(--c-line); border-radius:3px}
  .jk-onepage .op-panel__body:hover::-webkit-scrollbar-thumb{background:#c4c8cc}

  /* ★칸 아래를 흐리게 지운다 (260819 2차 점검 7번).
     스크롤 자체는 아영이 260818 직접 요청한 기능이라 ★건드리지 않는다. 다만 잘린 자리가
     글자 획 중간이라 '고장난 화면'으로 읽혔다. 아래 12px 을 서서히 투명하게 만들면
     ★잘린 게 아니라 이어진다는 신호가 된다(겉모습만 손댄다).
     끝까지 굴렸을 때 마지막 줄이 살짝 옅어지는 건 감수한다 — 스크롤 끝을 CSS 만으로는
     알 수 없고, 그걸 알아내려고 자바스크립트를 붙일 값어치는 없다. */
  .jk-onepage .op-panel__body{
    -webkit-mask-image:linear-gradient(#000 calc(100% - 12px), transparent);
            mask-image:linear-gradient(#000 calc(100% - 12px), transparent);
  }
}

/* ── 7. 모바일에서는 '지금 몇 번째 칸' 표시가 의미 없다 ──────
   칸이 옆으로 넘어가야 쓸모가 있는데, 좁은 화면에서는 세로로 다 나열된다.
   가로 흐름 자체가 768px 미만에서 꺼져 있으므로 같은 문턱에서 함께 숨긴다. */
@media (max-width:767px){
  .jk-onepage .op-flow__dots{display:none}
}

/* ── 8. 3D 설계 섹션 — ★섹션 12 의 원본 규칙을 밝은 기준으로 고쳐 썼다.
   여기에 덮어쓰기를 쌓지 않는다(같은 것을 두 군데서 정하면 나중에 반드시 어긋난다). */

/* ── 10. 갤러리 덮개 (사용자 260818) ─────────────────────────
   별도 갤러리 페이지를 없애고 이 페이지 안에서 다 보여준다.
   '더보기' → 화면 전체를 덮고 사진이 가로 한 줄로 끝없이 돈다 → 누르면 크게 → 닫기. */
.jk-onepage .op-drift__cell{border:0; padding:0; background:none; cursor:pointer}
.jk-onepage .op-gal__n{
  display:inline-block; margin-left:.5em; padding:.05em .55em; border-radius:2em;
  background:rgba(255,255,255,.22); font-size:.85em; font-weight:700;
}

.jk-onepage .op-gal[hidden]{display:none}

/* ── 갤러리 사진 줄 — ★제자리에서 옆으로 늘어난다 (아영 260819 개편) ──────
   전에는 화면 전체를 검게 덮는 한 겹이었다. 지금은 위 8장 격자가 있던 자리에서
   ★같은 칸 크기 그대로 옆으로 이어지는 줄이다. 검은 막도, 뒤 페이지 잠금도 없다. */
/* ── 갤러리 = ★극장 (아영 260820) ────────────────────────────────
   '더보기'를 누르면 화면 전체가 ★어두워지고 그 위로 사진 줄이 떠오른다.
   커튼이 내려오고 스크린이 켜지는 그림이다 — 사진에만 눈이 가게 한다.

   ★왜 화면 한가운데에 고정(fixed)인가
     전에는 격자 자리에 얹혀 있어서, 페이지 어디를 보고 있느냐에 따라 줄의 ★위쪽이 잘렸다.
     그렇다고 보이게 하려고 바깥에서 굴리면 줄이 꺼져 버렸다(아영 지적).
     이제 ★지금 보고 있는 화면의 한가운데에 뜬다. 페이지를 어디까지 내렸든 상관없다.

   ★나가는 문은 ★닫기 버튼 하나뿐이다(ESC 도 받는다).
     바깥을 굴리거나 끌어서 꺼지던 길은 없앴다 — 실수로 닫히는 쪽이 더 답답했다.
     대신 그 버튼을 ★구석이 아니라 한가운데 아래에 크고 밝게 둔다. 안 보이면 갇힌 것이다. */
.jk-onepage .op-galwrap{position:relative}
.jk-onepage .op-gal{
  position:fixed; inset:0; z-index:300;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  background:rgba(6,9,14,.93);          /* 커튼 */
  padding:0;
  /* ★한 번에 확 뜨지 않고 ★떠오른다(아영 260820). 커튼이 먼저 어두워지고
     그 위로 사진 줄이 살짝 밀려 올라오며 나타난다. 닫을 때는 거꾸로. */
  opacity:0; transition:opacity .32s ease;
}
.jk-onepage .op-gal.is-open{opacity:1}
.jk-onepage .op-gal .op-gal__strip,
.jk-onepage .op-gal .op-gal__count,
.jk-onepage .op-gal .op-gal__close{
  opacity:0; transform:translateY(22px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.jk-onepage .op-gal.is-open .op-gal__strip,
.jk-onepage .op-gal.is-open .op-gal__count,
.jk-onepage .op-gal.is-open .op-gal__close{opacity:1; transform:none}
/* 사진 줄 → 세는 줄 → 닫기 버튼 순으로 아주 조금씩 늦게 뜬다(눈이 따라가게) */
.jk-onepage .op-gal.is-open .op-gal__count{transition-delay:.06s}
.jk-onepage .op-gal.is-open .op-gal__close{transition-delay:.12s}
/* 극장이 열려 있는 동안 뒤 페이지는 멈춰 있는다 */
html.gal-open, html.gal-open body{overflow:hidden}

.jk-onepage .op-gal__strip{position:relative}

/* ── 「옆으로 넘겨라」 안내 = ★큰 화살표 (아영 260820) ────────────────────
   ★글자를 안 쓴다. 폰은 '스와이프', PC 는 '끌기·좌우버튼·휠'이라 한 문장으로 맞출 수가
   없었다(기기를 감지해 갈라 쓰는 길은 터치 노트북·마우스 태블릿에서 반대로 뜬다).
   화살표 하나면 기기를 안 가리고 뜻이 통한다.

   사진 줄 ★위쪽에 겹쳐 뜬다. PC·모바일 모습이 같고, ★보고 있는 창보다 넓어지지 않는다.
   유리처럼 반투명 — 뒤 사진이 비쳐서 화면을 막지 않는다.
   ★한 번이라도 밀면 사라진다. 계속 떠 있으면 그 자리 사진을 영영 가린다. */
.jk-onepage .op-gal__hint{
  position:absolute; z-index:3; top:14px; left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - var(--pad) * 2); box-sizing:border-box;
  margin:0; padding:.5em 1.15em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22); border-radius:2em;
  background:rgba(10,14,20,.38);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
          backdrop-filter:blur(10px) saturate(120%);
  color:rgba(255,255,255,.95);
  box-shadow:0 8px 26px rgba(0,0,0,.36);
  pointer-events:none;                     /* 안내가 손가락을 가로채면 안 된다 */
  transition:opacity .38s ease, transform .38s var(--ease);
}
/* 화살표 크기 = 창 폭을 따라간다. 폰에서도 눈에 확 들어올 만큼 크게. */
.jk-onepage .op-gal__hint-arrow{
  display:block; width:clamp(76px, 20vw, 116px); height:auto;
  /* 밝은 사진 위에서도 흰 선이 묻히지 않게 */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  animation:jk-hint-slide 1.8s ease-in-out infinite;
}
/* 오른쪽으로 슥 밀렸다 돌아온다 — '이쪽으로 넘겨라'를 몸짓으로 말한다 */
@keyframes jk-hint-slide{
  0%,  100%{transform:translateX(-6px); opacity:.72}
  45%      {transform:translateX(7px);  opacity:1}
}
.jk-onepage .op-gal__hint.is-gone{
  opacity:0; transform:translateX(-50%) translateY(-8px);
}
/* ★칸 크기는 첫 화면 8장과 ★같게 유지한다 — 격자와 같은 여백을 준다 */
.jk-onepage .op-gal__viewport{
  padding:0 var(--pad);
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
  overscroll-behavior-x:contain;
  /* ★touch-action 을 pan-x 로 못 박지 않는다 — 세로로 쓸 때 손가락이 갇힌다 */
}
.jk-onepage .op-gal__viewport::-webkit-scrollbar{display:none}
.jk-onepage .op-gal__viewport.is-drag{cursor:grabbing; scroll-snap-type:none}
@media (min-width:768px){
  .jk-onepage .op-gal__viewport{padding-left:calc(var(--pad) + var(--rail-space))}
}
/* ── 펼친 갤러리 줄 = ★원본 비율 (아영 260820 2차) ────────────────────────
   첫 화면 미리보기는 정사각 그대로 두되, ★펼치면 사진이 잘리지 않고 원래 비율로 나온다.
   ("원본 파일을 띄우라는 게 아니라 ★비율만 살리라"는 지시 — 파일은 줄인 판 그대로다)

   가로로 흐르는 줄이므로 ★높이를 고정하고 폭이 사진 비율대로 늘어난다.
   그래서 칸 폭을 CSS 로 못 박지 않는다(`grid-auto-columns:auto`).
   ★사진의 width·height 를 <img> 에 박아 두었기 때문에(JS) 사진이 도착하기 전에도
   폭이 정해진다 — 안 그러면 열자마자 재는 칸 위치가 전부 어긋난다. */
/* ★격자(grid)가 아니라 ★flex 다. 격자는 칸 폭을 미리 정해 줘야 하는데(예전에는
   정사각이라 계산식으로 박아 뒀다), 이제 칸마다 폭이 다르다. `grid-auto-columns:auto`
   로 두면 격자가 41칸을 ★한 화면 폭 안에 우겨넣으려 해서 줄이 통째로 접힌다
   (260820 실측: track 폭이 350px 로 주저앉고 사진이 안 보였다). flex 는 내용 폭을
   그대로 두고 넘치게 두므로 가로 줄에 맞다. */
.jk-onepage .op-gal__track{
  display:flex; gap:12px; align-items:center; width:max-content;
}
.jk-onepage .op-gal__cell{
  flex:0 0 auto;
  background:#1b2029; border-radius:3px; overflow:hidden; line-height:0;
  scroll-snap-align:center;   /* 눌러도 아무 일 없다 — 크게보기 폐지(아영 260820) */
}
/* ★칸이 사진에 맞춰지지, 사진이 칸에 맞춰지지 않는다 — 그래야 여백도 잘림도 없다.
   높이는 화면 높이를 따라가고(펼쳐 본다는 느낌), 가로로 아주 긴 사진이 와도
   ★창 밖으로 나가지 않게 폭에도 상한을 둔다. */
.jk-onepage .op-gal__cell img{
  display:block; width:auto; height:auto;
  max-height:clamp(190px, 44vh, 460px);
  max-width:calc(100vw - var(--pad) * 2);
}

/* 좌우 버튼 — 어두운 바탕 위라 밝게 */
.jk-onepage .op-gal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; font-size:26px; line-height:1; padding-bottom:4px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.90); color:var(--c-primary-dark);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  transition:background .25s ease, color .25s ease;
}
.jk-onepage .op-gal__nav:hover{background:var(--c-gold); color:#1a1205}
.jk-onepage .op-gal__nav[disabled]{opacity:.3; cursor:default; box-shadow:none}
.jk-onepage .op-gal__nav--prev{left:10px}
.jk-onepage .op-gal__nav--next{right:10px}
.jk-onepage .op-gal__count{
  margin:.8em 0 0; text-align:center; color:rgba(255,255,255,.72);
  font-size:.85rem; letter-spacing:.12em;
}

/* ★닫기 버튼 — 구석이 아니라 ★한가운데. 이 화면에서 나가는 ★유일한 문이라
   못 찾으면 갇힌 것이 된다. 그래서 크고 밝게, 손가락으로도 넉넉히 눌리게 둔다. */
.jk-onepage .op-gal__close{
  align-self:center; margin-top:clamp(16px,2.6vh,28px);
  min-height:52px; padding:14px 34px; border:0; border-radius:8px; cursor:pointer;
  background:#fff; color:var(--c-primary-dark);
  font-family:inherit; font-size:1rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.jk-onepage .op-gal__close:hover{background:var(--c-gold); color:#1a1205}
.jk-onepage .op-gal__close:active{transform:translateY(1px)}
@media (max-width:767px){
  .jk-onepage .op-gal__nav{display:none}     /* 폰에서는 손가락으로 넘긴다 */
}

/* ※크게 보기(전체화면) 규칙은 걷어냈다 — 기능 자체를 없앴다(아영 260820). */

@media (prefers-reduced-motion:reduce){
  .jk-onepage .op-gal,
  .jk-onepage .op-gal .op-gal__strip,
  .jk-onepage .op-gal .op-gal__count,
  .jk-onepage .op-gal .op-gal__close{transition:none; transform:none}
  .jk-onepage .op-laser::before{transition:background 3s ease}
  .jk-onepage .op-gal__cell img{transition:none}
  /* 안내는 그대로 보여 주되 ★화살표는 움직이지 않는다(모션 최소화 설정 존중) */
  .jk-onepage .op-gal__hint{transition:none}
  .jk-onepage .op-gal__hint-arrow{animation:none; opacity:.95}
  .jk-onepage .op-gal__viewport{scroll-behavior:auto}
}
}

/* ============================================================
   16. 디자인 점검 반영 (데스크탑 지시서 260819)
   ============================================================ */

/* ── 3. 모바일 펼침 메뉴 ─────────────────────────────────────
   지시서는 '배경이 불투명하지 않아 뒤 글자가 비친다'고 했으나 ★실측하면 이미 흰색이다.
   화면으로 확인한 진짜 문제는 둘이었다.
     · 글자가 너무 옅어(#80868f 회색) 흰 바닥에서 잘 안 읽힌다
     · 메뉴판 아래 경계가 없어 '떠 있는 판'으로 안 읽힌다
   그래서 ★색을 진하게, ★그림자로 경계를 준다. 배경은 원래 흰색이라 그대로 둔다. */
@media (max-width:767px){
  .primary-nav{
    background:var(--c-bg);
    box-shadow:0 14px 28px rgba(10,16,28,.18);   /* 아래 화면 위에 얹힌 판으로 읽히게 */
  }
  /* ★펼침 메뉴 안에서만 진하게. 넓은 화면의 옛 회색 메뉴 룩은 건드리지 않는다. */
  .primary-nav a{color:#39404a; font-size:1rem}
  .primary-nav a:active{color:var(--c-primary)}
}

/* ── 2. 모바일 첫 화면에 '제작 의뢰하기'가 들어오게 ──────────
   지시서는 버튼이 안 보인다고 했다. ★지금 상태에서는 재보면 다 보인다 —
   어젯밤 히어로에서 부제 한 줄을 뺐기 때문이다(그 줄이 있을 때 360x640 에서 62px 밀렸다).
   다만 짧은 폰에서 여유가 32px 뿐이라 아슬아슬하다. 그래서 ★여유를 더 준다.

   ★큰 글씨는 이 페이지의 인상이므로 함부로 줄이지 않는다.
   여백부터 줄이고, 그래도 모자라는 ★짧은 화면에서만 글씨를 줄인다. */
@media (max-width:767px){
  /* D-6 — 좁은 화면에서는 "왼쪽은 어둡고 오른쪽은 밝은" 자리가 안 나온다.
     ★세로 막을 그대로 쓰고 정렬만 왼쪽으로 통일한다. 새 분기점을 만들지 않았다. */
  .jk-onepage .op-hero::after{background:linear-gradient(180deg, rgba(3,14,36,.64), rgba(3,14,36,.82))}
  .jk-onepage .op-hero__inner{padding-top:44px; padding-bottom:44px}
  /* ★한글이 단어 중간에서 끊기지 않게(360px 에서 'NCT 펀칭'이 '펀/칭'으로 갈렸다) */
  .jk-onepage .op-hero .op__eyebrow{margin-bottom:.75em; word-break:keep-all}
  .jk-onepage .op-hero h1{margin-bottom:.45em}
}
/* 세로가 짧은 폰(구형·작은 기기) — 여기서만 글씨를 한 단계 줄인다 */
@media (max-width:767px) and (max-height:760px){
  /* ★높이를 없애면 히어로가 화면을 못 채워 다음 섹션이 삐죽 올라온다.
     화면 한 판을 채우되 ★내용을 작게 만들어 버튼까지 들어오게 한다.
     svh = 주소창을 뺀 실제 보이는 높이. 못 알아듣는 브라우저는 위의 vh 를 쓴다. */
  .jk-onepage .op-hero{min-height:calc(100vh - 66px); min-height:calc(100svh - 66px)}
  .jk-onepage .op-hero__inner{padding-top:36px; padding-bottom:36px}
  .jk-onepage .op-hero h1{font-size:clamp(1.75rem, 7.4vw, 2.2rem); line-height:1.3}
  .jk-onepage .op-hero .op__eyebrow{font-size:.74rem; letter-spacing:.1em}
  .jk-onepage .op-hero__cta{gap:10px}
}