/* =========================================================
   서브 페이지 (work · work/<slug> · products · company). style.css 토큰·헤더·버튼·섹션 제목 재사용.
   톤 리듬: 페이지 히어로(블랙) → 본문(차콜) → 문의(차콜). 빨강은 마침표·현재 필터·CTA 만. (2026-10-13 라이트 폐기)
   ========================================================= */

/* ---------- 페이지 히어로 ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + 120px) 0 120px;   /* 2026-10-28 서비스·회사소개·채용 높이 통일(사장님 "PC 에서 들쭉날쭉"): 기본·사진·기기 모두 192/120 */ background: #0F0F11; color: #F2F3F6; overflow: hidden; }
.page-hero::after {            /* 심볼 실루엣, 우하단 크롭 */
  content: ""; position: absolute; right: -6vw; bottom: -18vw; width: 44vw; height: 44vw; opacity: .035; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #fff 20%, transparent 78%); mask-image: linear-gradient(180deg, #fff 20%, transparent 78%);   /* 아래로 갈수록 묻힘(사장님 10-28 "회사소개 사진처럼") */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 49'%3E%3Cpath fill='%23fff' d='M23.209.832c-.808-.448-1.803-.448-2.61 0L1.297 11.575C.49 12.024-.008 12.853-.008 13.754c0 .901.498 1.73 1.305 2.179l15.386 8.564L1.297 33.062c-1.248.696-1.676 2.233-.954 3.437.722 1.203 2.317 1.616 3.565.92l15.385-8.565v17.125c0 1.389 1.171 2.517 2.611 2.517 1.44 0 2.61-1.128 2.61-2.517V3.011c0-.901-.497-1.73-1.305-2.179zM19.293 7.372V20.14L7.824 13.758l11.469-6.382v-.004zM47.964 37.718c-.004-.618-.234-1.198-.634-1.648l-.64-.46-9.09-5.057 9.087-5.057c1.248-.696 1.676-2.233.954-3.437-.722-1.203-2.316-1.616-3.569-.92l-13.003 7.236c-.808.448-1.305 1.281-1.305 2.178 0 .897.497 1.73 1.305 2.179l9.088 5.057-9.088 5.057c-1.248.696-1.676 2.233-.954 3.436.481.807 1.358 1.259 2.263 1.259.445 0 .894-.11 1.301-.338l12.975-7.224c.816-.459 1.316-1.319 1.322-2.131l-.012-.13zM29.74 23.234l18.225-10.145L29.74 2.943v20.291z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-hero .wrap { position: relative; z-index: 1; }
/* 11-03 사장님 "서브 히어로 오른쪽에"(참고 luganolivinglab.ch 푸터): 심볼 윤곽선, 커서(mark.js 가 --mx/--my 갱신) 주변만 방사형 마스크로 드러나고 빛남. 색·크기는 이 두 변수 */
.page-hero__mark { --mark-r: 230px; position: absolute; z-index: 0; top: calc(var(--header-h) + 16px); right: 7vw; width: min(40vw, 740px); height: min(40vw, 740px); pointer-events: none; fill: none; stroke: currentColor; stroke-width: calc(.3 * var(--s, 1)); stroke-linejoin: round; color: #F2F3F6;   /* 정사각 상자 안에 조각을 meet 로 가운데. 선·빛은 --s(조각 배율)로 보정해 어느 조각이든 같은 px */
  -webkit-mask-image: radial-gradient(circle var(--mark-r) at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); mask-image: radial-gradient(circle var(--mark-r) at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); }
.page-hero__mark path { filter: drop-shadow(0 0 calc(.6px * var(--s, 1)) currentColor) drop-shadow(0 0 calc(2.4px * var(--s, 1)) color-mix(in srgb, currentColor 60%, transparent)); }   /* 로고와 같은 색: 흰 윤곽 + 빨간 삼각형(헤더 심볼과 동일), 빛은 각자 색 */
.page-hero__mark-red { color: var(--c-red); }
@media (hover: none) { .page-hero__mark { -webkit-mask-image: none; mask-image: none; opacity: .14; } .page-hero__mark path { filter: none; } }   /* 터치 기기: 커서가 없어 흐리게 상시 */
@media (max-width: 1199px) { .page-hero__mark { display: none; } }   /* 제목과 겹치는 폭에선 숨김 */
/* 10-31 "서브 히어로에도 패턴 다": 격자(style.css 공용 ::before), 오른쪽 위 빈 곳이 가장 보이게. 사진 히어로는 사진 위·글 아래 */
.page-hero::before { --grid-c: rgba(255,255,255,.055); -webkit-mask-image: radial-gradient(ellipse 60% 90% at 78% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 90% at 78% 35%, #000 20%, transparent 75%); }
.page-hero--cats::before { content: none; }   /* 고양이 이야기는 매트릭스 레인이 이미 질감(협업 단계와 같은 이유로 제외) */
.page-hero__strip { position: relative; }
@supports (animation-timeline: view()) {
  .page-hero::after { animation: heroMarkDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes heroMarkDrift { from { transform: translateY(0); } to { transform: translateY(-8vw); } }
}
.page-hero__title { font: 800 clamp(36px, 4.4vw, 72px)/1.08 var(--font-sans); letter-spacing: -.04em; text-wrap: balance; }
.page-hero__title--sm { font-size: clamp(34px, 3.8vw, 56px); }
.page-hero__desc { margin-top: 28px; max-width: 36em; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.65; color: #B9B9C0; }
.page-hero__desc + .page-hero__desc { margin-top: 1em; }   /* 고양이 이야기 두 문단 */
.page-hero--detail { padding-bottom: 72px; }

/* 히어로 변형: 심볼 실루엣 대신 사진·기기·썸네일 띠 */
.page-hero--strip::after, .page-hero:has(.page-hero__mark)::after { display: none; }   /* 심볼 리빌이 있는 히어로는 실루엣 중복이라 끔 */
.page-hero--strip { padding-bottom: 0; }
.page-hero--strip .wrap { padding-bottom: 72px; }
.page-hero__strip { display: flex; overflow: hidden; padding-bottom: 56px; }   /* 띠는 히어로 안에 온전히(잘림 없음), 바로 밑에 LNB */
.page-hero__strip-track { display: flex; gap: 16px; padding-right: 16px; flex: none; animation: marquee 70s linear infinite; }
.page-hero__strip li { flex: none; width: 180px; aspect-ratio: 1; padding: 14px; box-sizing: border-box; overflow: hidden; border-radius: var(--radius); background: var(--bg); filter: saturate(.7) brightness(.8); }   /* 2026-10-31 16:10 cover → 정사각(여백은 px: % 는 트랙 폭 기준이라 커짐), 목록 타일과 같은 규칙(사장님 "비율이 다 다르네"): 목업은 여백 + 안에 전부 */
.page-hero__strip li { display: grid; grid-template: 100% / 100%; place-items: center; }
.page-hero__strip img { width: calc(100% * var(--fit, 1)); height: calc(100% * var(--fit, 1)); object-fit: contain; }
.page-hero__strip li.is-full { padding: 0; isolation: isolate; }   /* 이전 홈페이지 정사각 썸네일은 꽉 */
.page-hero__strip li.is-full img { object-fit: cover; }
@media (max-width: 767px) {
  .page-hero__strip li { width: 120px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero__strip-track { animation: none; } }

/* ---------- 브레드크럼 · LNB ---------- */
/* 스티키 LNB(56px)가 앵커·포커스 요소를 가리지 않게 */
html:has(.lnb) { scroll-padding-top: calc(var(--header-h) + 56px); }
html:has(.lnb) section[id] { scroll-margin-top: calc(var(--header-h) + 56px); }
.lnb {
  position: sticky; top: var(--header-h); z-index: 5;
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  transition: background-color var(--tone-dur) ease;
}
.lnb ul { display: flex; gap: 4px; margin-left: -16px; overflow-x: auto; scrollbar-width: none; }   /* 첫 항목 글자가 본문 왼쪽선(wrap)에 맞게: 링크 패딩 16 만큼 당김 */
.lnb ul::-webkit-scrollbar { display: none; }
.lnb a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px; font: 500 15px/1 var(--font-sans); white-space: nowrap; opacity: .7; }
.lnb a:hover { opacity: 1; }
.lnb a[aria-current] { opacity: 1; }
.lnb a[aria-current]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--c-red); }
.filter__empty { margin-top: 48px; color: var(--c-ink-2); }

/* ---------- 타일(프로젝트 카드) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px 48px; margin-top: var(--content-gap); }   /* 2026-10-14 4열→3열, 행 간격 80: 빽빽함 해소 */
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { content-visibility: auto; contain-intrinsic-height: auto 640px; }   /* 55장: 화면 밖 타일 렌더 생략. 폭은 그리드가 정함(intrinsic-size 한 값은 폭까지 560 이 돼 3열이 넘침) */
.tile[hidden] { display: none; }
.tile__link { display: grid; gap: 24px; }
.tile__media {
  aspect-ratio: 1; overflow: hidden; border-radius: var(--radius);
  background: var(--bg, color-mix(in srgb, currentColor 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.tile__media { padding: 8%; box-sizing: border-box; }   /* 2026-10-26 홈 카드와 같은 문법: 안쪽 여백 + contain */
.tile__media { display: grid; grid-template: 100% / 100%; place-items: center; }   /* 트랙을 100% 로 못 박아야 img 의 % 높이가 잡힘(auto 트랙이면 높이가 안 먹어 세로 긴 폰이 칸을 넘침) */
.tile__media img { width: calc(100% * var(--fit, 1)); height: calc(100% * var(--fit, 1)); max-width: none; align-self: var(--ay, center); object-fit: contain; transition: transform .6s var(--ease-out); }   /* 11-03 --fit(data.json fit): 목업 자체 여백이 적은 그림(에프엠에셋 모니터 .8)을 칸 안에서 더 작게 */
.tile__media--wide img { object-fit: contain; }
/* 11-02 사장님 "썸네일 바탕 어둡게, 하나로 통일 — 페이지 배경과 구분되되 밝지 않게": 이미지별 밝은 --bg 대신 페이지 톤에 네이비를 섞은 딥 네이비 그라데이션(11-02 사장님 "네이비 빛") */
.tile__media:not(.tile__media--full), .page-hero__strip li:not(.is-full) { background: radial-gradient(42% 34% at 50% 54%, var(--glow-stops)); }   /* 11-02 사장님 "가운데 화면 놓이는 부분이 빛나듯": 가운데 밝고 바깥으로 어두워지는 방사형. 색은 --glow(프로젝트별), 없으면 네이비 */
.tile__media { position: relative; }
.tile__media img.tile__media-logo { position: absolute; z-index: 1; filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); top: var(--lt, 7%); bottom: var(--lb, auto); right: 7%; width: auto; height: calc(3.6% * var(--lh, 1)); max-width: 36%; object-fit: contain; transform: none; }   /* .tile__media img(100%·호버 scale)보다 우선 */   /* 오른쪽 위 흰 로고: 글자 높이가 칸의 3.6% 로 같도록 --lh(= 이미지 높이 ÷ 글자 높이, data.json logoscale)로 보정 */
.tile__media--full { padding: 0; isolation: isolate; outline: 1px solid color-mix(in srgb, currentColor 8%, transparent); outline-offset: -1px; }   /* 11-02 사장님 "가생이 잘려 보여": 꽉 채운 그림이 모서리에서 둥근 클립을 벗어나 보이고(transform 자식 + filter 부모) 안쪽 1px 테두리도 덮임 → isolate 로 클립 고정, 테두리는 outline(자식 위에 그림) */   /* 2026-10-31 이전 홈페이지 썸네일(img/work/old): 그림 자체에 여백이 있어 안쪽 여백 없이 100% */
.tile__media--full img { object-fit: cover; }
/* 이미지 없는 프로젝트: 글 한 행(격자 전체 폭) */
.tile--row { grid-column: 1 / -1; contain-intrinsic-height: auto 80px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.tile--row + .tile--row { margin-top: -80px; }   /* 행끼리는 격자 행 간격(80) 없이 붙임 */
.tile--row .tile__link { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 20px 0; }
.tile--row .tile__sub, .tile--row .tile__year { margin-top: 0; }
.tile--row .tile__year { text-align: right; white-space: nowrap; }
/* 이미지 없는 프로젝트: 심볼 자리표시 */
.media--empty { display: grid; place-content: center; gap: 12px; text-align: center; color: var(--c-ink-2); }
.media--empty svg { width: 36px; height: 36px; margin: 0 auto; opacity: .35; }
.media--empty span { font: 500 13px/1 var(--font-sans); }
.tile__link:hover .tile__media img { transform: scale(1.03); }
/* 11-04 사장님 "로드될 때 배경 빛 원이 먼저 보이는 게 예쁘다, 효과로": 타일(빛·로고)이 먼저 또렷해지고 .3s 뒤 목업이 아래서 떠오름. backwards 라 끝난 뒤엔 보통 상태(호버 scale 그대로) */
@keyframes tile-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.js .tile.is-in .tile__media img:not(.tile__media-logo) { animation: tile-pop .8s var(--ease-out) calc(var(--i, 0) * 60ms + .3s) backwards; }
.tile__name { font: 600 20px/1.35 var(--font-sans); letter-spacing: -.01em; }
.tile__sub { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.tile__year { display: block; margin-top: 14px; font: 500 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.tile__year i { font-style: normal; margin: 0 4px; opacity: .6; }
.tile__link { display: flex; flex-direction: column; height: 100%; }   /* 2026-10-30 설명이 2줄인 타일만 메타 줄이 내려가던 것 → 한 행 안에서 메타를 바닥에 맞춤 */
.tile__link .tile__media { flex: none; }
.tile__meta { display: flex; flex-direction: column; flex: 1; }
.tile__meta .tile__year { margin-top: auto; padding-top: 14px; }
.tile__link:hover .tile__name { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- 프로젝트 목록 + 필터 ---------- */
.work-list { padding-block: 96px var(--sec-pad); }
.work-list .tiles { margin-top: 0; }

/* ---------- 상세 ---------- */
.detail__meta { display: flex; flex-wrap: wrap; gap: 12px 56px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.detail__meta dt { font: 500 13px/1 var(--font-sans); color: #9A9DA6; }
.detail__meta dd { margin-top: 8px; font-size: 16px; }
.detail { padding-block: 56px 128px; }
/* 2026-10-30 상세 이미지 크기 규칙(사장님 "크기 맛간 곳 많다, 깔끔하게"): 57페이지 측정 결과 히어로 높이 485~2128px(19건이 화면보다 큼), 업스케일 4건.
   한 규칙으로: 폭 = min(칸 폭, 원본 폭 --w, 높이 상한 --cap × 비율 --r). 즉 원본보다 안 키우고, 세로 긴 폰 합성은 상한 높이에 맞춰 작아지며, 제 비율은 그대로. 가운데 정렬 */
.detail__hero, .gallery figure {
  --cap: min(72vh, 720px);
  width: min(100%, var(--w, 1200px), calc(var(--cap) * var(--r, 1.7778)));
  aspect-ratio: var(--r, 16 / 9); margin-inline: auto;
}
.detail__hero {
  margin-top: 0;   /* 히어로/본문 경계에 걸치지 않게 */ overflow: hidden; border-radius: var(--radius);
  background: var(--bg, color-mix(in srgb, currentColor 6%, transparent));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.detail__hero img { width: 100%; height: 100%; object-fit: contain; }
/* 갤러리: 현 사이트 experience-detail 구성 이미지. 제 비율, 가장자리색 배경 */
/* 11-02 제공 방식 도식(.flowcards, build.py DIAGRAMS): 슬라이드 이미지 대신 글·아이콘·선. 2칸, 위 선 카드. 아이콘 타일은 함께할수록(.why__icon)과 같은 그린 규칙 */
.flowcards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); margin-top: 96px; }
.flowcards > li { padding-top: 20px; border-top: 2px solid color-mix(in srgb, currentColor 35%, transparent); }
.flowcards__num { font: 500 14px/1 var(--font-sans); color: var(--c-red-text); }
.flowcards h3 { margin-top: 12px; font: 700 clamp(20px, 1.6vw, 24px)/1.3 var(--font-sans); letter-spacing: -.01em; }
.flowcards__sub { margin-top: 4px; font-size: 15px; color: var(--c-ink-2); }
.flowcards__desc { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--c-ink-2); text-wrap: pretty; }   /* 11-04 사장님 "설명 폰트 크게": 본문(.detail__text p 18px)과 같은 크기 */
.flow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; padding: 32px 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.flow__node { flex: 1 1 0; display: grid; justify-items: center; gap: 14px; text-align: center; font: 600 15px/1.4 var(--font-sans); }
.flow__link { flex: none; }
.flowcards > li:only-child { grid-column: 1 / -1; }   /* 도식 카드가 하나면 전체 폭 */
.flowcards > li:only-child .flow { padding: 40px 32px; gap: 24px; }
.flowcards > li:only-child .flowcards__desc { max-width: 60em; }   /* 전체 폭 카드에서 설명 한 줄이 너무 길어지지 않게 */
.flowcards + .gallery { margin-top: 64px; }
.flow__node svg { width: 52px; height: 52px; padding: 12px; border-radius: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--inkg-300); background: linear-gradient(160deg, color-mix(in srgb, var(--inkg-500) 28%, transparent), color-mix(in srgb, var(--inkg-700) 18%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inkg-400) 30%, transparent); }
.flow__link { display: grid; justify-items: center; gap: 8px; font: 500 13px/1 var(--font-sans); color: var(--c-ink-2); }
.flow__link i { position: relative; display: block; width: 72px; height: 2px; background: color-mix(in srgb, currentColor 40%, transparent); }
.flow__link i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-right: 0; border-left: 7px solid color-mix(in srgb, currentColor 55%, transparent); }
@media (max-width: 900px) { .flowcards { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; } }
@media (max-width: 600px) { .flow { flex-direction: column; gap: 12px; } .flow__node { flex: none; } .flow__link i { width: 2px; height: 40px; } .flow__link i::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid color-mix(in srgb, currentColor 55%, transparent); } }
.gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; margin-top: 96px; }   /* 2026-10-30 세로 폰 합성이 한 장씩 세로로 쌓여 5,800px 까지 길어지던 것 → 폭이 좁은 것은 한 줄에 나란히 */
.gallery figure { --cap: min(80vh, 900px); flex: 0 1 auto; margin-inline: 0; }   /* 11-05 사장님 "가운데로 모아줘": auto 여백이 남는 폭을 나눠 가져 폭 좁은 그림들이 양옆으로 벌어졌음 → 여백 0, 가운데 모음은 .gallery 의 justify-content 가 맡음 */
.gallery figure.is-crop img { object-fit: cover; object-position: top; filter: none; }   /* 긴 풀페이지 캡처: 4:5 상자에 위부터(--r .8 은 build.py) */
.gallery figure.is-crop { background: var(--bg, color-mix(in srgb, currentColor 6%, transparent)); }
.gallery figure:not(.is-cut) { max-width: 1200px; }   /* 1600 풀폭 흰 화면은 다크에서 눈부심 */
.gallery figure { overflow: hidden; border-radius: var(--radius); background: var(--bg, color-mix(in srgb, currentColor 6%, transparent)); border: 1px solid var(--c-line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery figure[style*="--bg:#FFFFFF"] img { object-fit: contain; }
/* 투명 원본(컷아웃·목업): 바닥·테두리 없이 다크 위에 바로. 2026-10-22 흰 바닥 JPEG 변환을 되돌림 */
.gallery figure.is-cut, .detail__hero.is-cut { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.gallery figure.is-cut img, .detail__hero.is-cut img { object-fit: contain; filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }
.gallery figure.is-full { width: min(100%, var(--w, 1200px)); }   /* 11-05 사장님 "이런 목업 형태는 영역 100% 다 쓰면 안 돼?": 위가 잘린 기울인 화면 격자(gallery.json full:true)는 높이 상한(--cap)을 빼고 칸 폭을 다 씀. 원본 폭(--w)보다는 안 커짐 */
/* (2026-10-30 is-wide 가로 합성 cover 크롭 규칙 폐기 — 목업이 잘림. build.py 도 더 이상 안 붙임) */
.detail__body--noimg { margin-top: 0; padding-top: 72px; }
.detail__body { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 72px; align-items: start; }
.detail__text p { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--c-ink-1); }
.detail__text p, .flowcards__desc, .page-hero--detail .page-hero__desc, .prod .sec__desc, .feature__sub, .feature__desc { word-break: normal; overflow-wrap: anywhere; }   /* 11-04 사장님 "상세 공통 텍스트 끊지 말고 영역 맞춰 흐르게": body 의 keep-all(어절 단위) 대신 글자 단위 줄바꿈, 38em 상한도 해제 → 칸 끝까지 채움 */
.detail__text p:first-of-type { margin-top: 28px; }
.detail__side { position: static; padding-top: 0; }
@media (min-width: 1200px) {   /* 2026-10-30 사장님 "PC 는 왼 이미지 · 오른 소개 글" — 이미지는 가운데, 글은 그 아래 왼쪽 반쪽만 쓰던 축 두 개를 한 줄로. 갤러리는 아래 전체 폭 */
  .detail > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; }
  .detail__body { margin-top: 0; align-self: center; }   /* 글 묶음을 이미지 세로 가운데에 */
  .gallery { grid-column: 1 / -1; }
  /* (96) 사장님 "어떤 건 크고 어떤 건 작고" → 칸에 꽉 채우던 방식(가로형은 폭, 세로형은 높이로 맞춤)은 비율 따라 면적이 2배까지 차이 남.
     같은 면적 규칙: 폭 = 기준 길이 × √비율(--sr, build.py) → 비율이 달라도 면적이 비슷. 기준 min(40vw, 610px) 은 16:10 이 칸 폭(≈770)에 닿는 값.
     여전히 원본보다 안 키우고(--w), 높이 상한(--cap)·칸 폭 안에서만. 투명 여백이 큰 컷아웃 10장은 여백을 잘라낸 hero-trim 사용 */
  .detail__hero { width: min(100%, var(--w, 1200px), calc(var(--cap) * var(--r, 1.7778)), calc(min(40vw, 610px) * var(--sr, 1.26))); }
}
.detail__side-title { font: 500 13px/1 var(--font-sans); color: var(--c-ink-2); }
.detail__roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail__roles li { padding: 8px 14px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; font-size: 14px; color: var(--c-ink-1); }

.related { padding-block: 128px var(--sec-pad); }   /* 톤 경계 뒤 숨 쉴 여백 */
.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.related__all { display: inline-block; padding: 10px 0; margin: -10px 0; font-size: 15px; color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.related__all:hover { color: var(--c-ink); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 40px; margin-top: 96px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.pager .pager__list { align-self: center; justify-self: center; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px; font: 600 14px/1 var(--font-sans); }
.pager .pager__list:hover { border-color: currentColor; text-decoration: none; }
.pager a { display: grid; gap: 8px; padding: 28px 0; font: 600 20px/1.3 var(--font-sans); letter-spacing: -.01em; }
.pager a:last-child { text-align: right; }   /* 세로 구분선 제거: 목록 버튼 바로 옆에 붙어 보였음 */
.pager small { font: 500 13px/1 var(--font-sans); color: var(--c-ink-2); }
.pager a:hover { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- 서비스(products) ---------- */
.prod { padding-block: clamp(80px, 6vw, 96px); }   /* 서비스 페이지는 섹션이 4개 연속이라 sec-pad(128)보다 좁게 */
/* 11-06 사장님 "영역 끝점이 다 다르다, 영역 구분·그룹핑이 안 보인다": 서비스 하나 = 상자 하나(그림 왼쪽 7 · 글 오른쪽 5, 좌우 교차 없음).
   세로 기준선은 상자 왼쪽 끝 · 그림 오른쪽 끝 · 글 왼쪽 끝 · 상자 오른쪽 끝 네 줄뿐이고 모든 줄에서 같은 자리. */
.prod { --feat-pad: clamp(40px, 4.2vw, 72px); }   /* 11-06 사장님 "요소가 커지면 여백도 그만큼": 상자 안쪽 여백(상하좌우 동일)과 그림·글 사이가 화면 폭을 따라 커짐 */
.feature { --pad: var(--feat-pad); --gap: var(--feat-pad); --gx: 31%; --gy: 50%; display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: start; margin-top: 24px; padding: var(--pad); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--c-line);
  /* 11-06 사장님 "썸네일 배경 양식처럼": WORK 타일과 같은 방사형 빛, 빛 중심은 그림 뒤. 색은 서비스별로 두면 쿠핀만 초록·보험은 보라로 제각각이라 전부 공통 네이비(#4A6FB5, 타일 기본값)로. 범위는 그림 둘레까지만(타일 비례: 그림 폭의 0.6·높이의 0.8) — 46%×64% 는 상자 전체가 물들어 글 쪽까지 색이 번졌음 */
  background: radial-gradient(var(--grx, 34%) var(--gry, 66%) at var(--gx) var(--gy), var(--glow-stops)); }
.feature--flip { grid-template-columns: 5fr 7fr; --gx: 69%; }   /* 그림 오른쪽 · 글 왼쪽(한 줄 걸러) */
.feature--flip .feature__media { order: 2; }
.feature__text { padding-top: var(--win-bar); }   /* 글 시작선 = 주소 막대(40) 아래 화면 그림의 윗선 */
.sec__desc + .feature { margin-top: var(--content-gap); }
/* 섹션 설명: 문장별 강제 줄바꿈은 풀고(br 앞 공백은 build.py) 그림 오른쪽 끝까지 흐르게 → 설명 끝 = 상자 안 그림 끝 */
.prod .sec__desc { max-width: none; }
.prod .sec__desc br { display: none; }
@media (min-width: 901px) { .prod .sec__desc { max-width: calc(var(--feat-pad) + (100% - 3 * var(--feat-pad)) * 7 / 12); } }
.feature__media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  background: var(--bg, color-mix(in srgb, currentColor 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.feature__media img { width: 100%; height: 100%; object-fit: contain; }
.feature__name { font: 700 clamp(26px, 2.4vw, 36px)/1.25 var(--font-sans); letter-spacing: -.02em; }
.feature__sub { margin-top: 8px; font-size: 16px; color: var(--c-ink-2); }
.feature__desc { margin-top: 24px; font-size: 18px; line-height: 1.7; color: var(--c-ink-1); }
/* 브라우저 틀: 홈 서비스 창과 같은 주소 막대(.svc__bar, style.css) + 16:10 화면 */
.feature__media--win { aspect-ratio: auto; background: #0B0B0D; }
.feature__media--win img { display: block; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.feature__more { display: inline-block; margin-top: 18px; padding: 10px 0; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.feature__more:hover { color: var(--c-red-text); }
.feature__more + .feature__more { margin-left: 24px; }
.detail__site { margin-top: 24px; }
.prod .tiles { margin-top: 80px; }

.prod__list { display: grid; gap: 0; margin-top: 56px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.prod__list li { display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.prod__list h3 { font: 600 20px/1.3 var(--font-sans); letter-spacing: -.01em; }
.prod__list p { font-size: 16px; color: var(--c-ink-2); }
.prod__list a { font-size: 14px; font-weight: 500; color: var(--c-ink-2); white-space: nowrap; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.prod__list a:hover { color: var(--c-ink); }
@media (max-width: 767px) { .prod__list li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- 회사소개 ---------- */
.about__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
.about__info { display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.about__info > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); font-size: 16px; }
.about__info dt { color: var(--c-ink-2); }
.about__info a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.about__info a:hover { text-decoration: underline; text-underline-offset: .22em; }
.values { margin-top: clamp(80px, 8vw, 128px); }   /* 나머지는 공용 .linecards */

.history-sec { background: var(--c-bg); transition: background-color var(--tone-dur) ease; }
/* 2026-10-28 사장님 "기존처럼 스크롤 모션": 왼쪽 제목 고정(sticky) + 오른쪽 세로 타임라인, 화면 45% 선을 지난 연도의 점·숫자만 레드 */
.history-sec .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--card-gap); align-items: start; }
.history-sec__head { position: sticky; top: calc(var(--header-h) + 56px + 48px); }   /* 헤더 + LNB 56 + 숨 */
.history-sec__years { position: relative; padding-left: 48px; border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.history__year { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 24px; padding: 28px 0 44px; }
.history__year::before { content: ""; position: absolute; left: -54px; top: 38px; width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, currentColor 28%, var(--c-bg)); transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.history__year.is-cur::before { background: var(--c-red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-red) 22%, transparent); }
.history__year h3 { font: 800 clamp(28px, 2.6vw, 40px)/1 var(--font-sans); letter-spacing: -.03em; color: var(--c-ink-2); font-variant-numeric: tabular-nums; transition: color .4s var(--ease-out); }
.history__year.is-cur h3 { color: var(--c-red-text); }
.history__year li { display: flex; gap: 16px; padding: 6px 0; font-size: 15px; line-height: 1.55; }
.history__year time { flex: none; width: 5em; font-variant-numeric: tabular-nums; color: var(--c-ink-2); }

/* 10-31 문화 · 알에스팀의 순간들(이전 홈페이지 Diary 4건): 사진 4:3 + 날짜 + 제목 + 한 줄. PC 4칸, 900 이하 2칸 */
/* 11-06 사장님 "크게 네 개, 어두운 투명 레이어로 톤 맞추고 호버 시 텍스트": 2열 큰 사진 + 바탕색 반투명 막, 올리면 막이 짙어지며 글이 뜸.
   직전: 4열 사진 + 아래 제목·설명. 글은 숨겨도 마크업에 그대로 있어 읽기 프로그램에는 읽힘. 호버가 없는 기기(터치)는 글을 항상 보임 */
.moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); margin-top: var(--content-gap); }
.moment { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.moment__media { position: absolute; inset: 0; margin: 0; }
.moment::after { content: ""; position: absolute; inset: 0; background: var(--c-bg); opacity: .36; transition: opacity .4s var(--ease-out); }
.moment__body { position: absolute; inset: auto 0 0; z-index: 1; padding: clamp(24px, 2.6vw, 40px); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.moment__title { font: 700 clamp(20px, 1.7vw, 26px)/1.35 var(--font-sans); letter-spacing: -.01em; }
.moment__desc { margin-top: 8px; max-width: 30em; font-size: 16px; line-height: 1.65; color: var(--c-ink-1); }
.moment:hover::after { opacity: .78; }
.moment:hover .moment__body { opacity: 1; transform: none; }
@media (hover: none) {   /* 터치: 아래쪽만 짙게 하고 글을 항상 보임 */
  .moment::after { opacity: 1; background: linear-gradient(to top, var(--c-bg) 6%, color-mix(in srgb, var(--c-bg) 62%, transparent) 46%, color-mix(in srgb, var(--c-bg) 30%, transparent)); }
  .moment__body { opacity: 1; transform: none; }
}
@media (max-width: 767px) { .moments { grid-template-columns: minmax(0, 1fr); gap: 16px; } .moment__desc { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .moment::after, .moment__body { transition: none; } }
.culture__cats { margin-top: clamp(96px, 9vw, 136px); }   /* 순간들 다음 묶음(고양이와 공존)과의 간격 — 11-06 실수로 지웠다가 복구 */
.culture__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--content-gap); }
.culture__photos li { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.culture__photos img, .moment__media img { width: 100%; height: 100%; object-fit: cover; }
.culture__sub { margin-top: clamp(72px, 7vw, 112px); font: 700 clamp(24px, 2.2vw, 32px)/1.25 var(--font-sans); letter-spacing: -.02em; }

/* ---------- 문의 페이지 ---------- */
.contact-page__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }   /* 왼쪽 안내·연락처, 오른쪽 폼 */
.contact-page .contact__info { grid-template-columns: 1fr; margin-top: 40px; }   /* 2026-10-30 2열이면 이메일 옆 복사 버튼이 아래로 떨어짐 → 1열 */
.steps span { font: 600 15px/1 var(--font-sans); letter-spacing: .04em; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 12px; font: 700 22px/1.3 var(--font-sans); letter-spacing: -.01em; }   /* 문의 후 진행은 한 단계 작게 */
.steps p { margin-top: 10px; }
@media (max-width: 1199px) { .contact-page__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- 고양이 이야기 ---------- */
.page-hero--cats { padding-bottom: 0; --hero-circle: var(--green-600); --hero-circle-alpha: .8; }   /* 히어로 원 색·투명도: 이 두 값만 바꾸면 됨 (사장님 지정 그린) */
.page-hero--cats .wrap { padding-bottom: 96px; }
.page-hero__insta { display: inline-block; margin-top: 28px; padding: 10px 0; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.page-hero__insta:hover { color: var(--c-red-text); }
.page-hero--cats::after { display: none; }   /* 심볼 실루엣 대신 붉은 원(회사소개 냥무부 컷아웃과 같은 문법) 위에 고양이 */
.page-hero__cat { position: absolute; right: 2vw; bottom: 40px; width: clamp(360px, 50vw, 940px); pointer-events: none; }   /* 2026-10-26 새 컷(1871px) 받고 PC 에서 키움: 40vw/720 → 50vw/940 */
.page-hero__cat::before { content: ""; position: absolute; left: 58%; bottom: -34%; width: 72%; aspect-ratio: 1; margin-left: -36%; border-radius: 50%; background: radial-gradient(closest-side, var(--hero-circle, var(--c-red)) 62%, color-mix(in srgb, var(--hero-circle, var(--c-red)) 55%, transparent) 82%, transparent 100%); opacity: var(--hero-circle-alpha, 1); filter: blur(10px); }   /* 원: 가운데는 꽉 찬 색, 바깥 38% 구간에서 서서히 빠지는 그라데이션 + 약한 블러. 단순 blur 보다 자연스럽게. 색·투명도는 --hero-circle / --hero-circle-alpha */
.page-hero__cat img { position: relative; filter: drop-shadow(0 18px 28px rgba(0,0,0,.35)); }
@supports (animation-timeline: view()) {
  .page-hero__cat { animation: catDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes catDrift { from { transform: translateX(3vw); } to { transform: translateX(-4vw); } }
}

.catcards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: var(--content-gap); }
/* 카드 전체를 상세 포트레이트 상자와 같은 면(그 고양이 색 16% + 테두리는 밝힌 액센트 30% — 춘장 보라처럼 어두운 색도 선이 보이게)으로 감쌈. 반원은 상자 위쪽에 꽉 차게 */
.catcard { border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 30%, transparent); overflow: hidden; transition: transform .6s var(--ease-out); }
.catcard__link { display: grid; gap: 20px; }
.catcard__body { padding: 0 24px 28px; }
/* 프로필 카드 상자: 반쪽 얼굴(face-N)이 바닥에서 빼꼼. 그 고양이 원 색 16% 면 + 22% 테두리 */
/* 프로필 카드: 상자 없이 반원(원반)만. 반원 폭 = 카드 폭(글·바와 좌우 라인 맞춤), 높이는 폭의 절반 */
.catcard__media { position: relative; margin: 24px 24px 0; aspect-ratio: 2 / 1; display: grid; place-items: end center; border-radius: 999px 999px 0 0; background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 72%, #000), inset -3px 10px 8px rgba(0,0,0,.22); overflow: hidden; }   /* 반원도 글과 같은 24px 안쪽 여백. 어두운 보더 + 안쪽 위에서 지는 그림자(움푹 들어간 느낌) */
.catcard__media img { position: relative; width: auto; max-width: 100%; height: auto; }   /* 원본(219px) 넘겨 키우지 않음 */
.catcard:hover { transform: translateY(-6px); }   /* 호버: 카드째(반원이 상자 안이라 반원만 올리면 잘림) */
.catcard, .catstory { --accent-text: color-mix(in srgb, var(--accent) 65%, #fff); }   /* 글자용 액센트: 파랑·보라 원색은 graphite 위 2.9:1 → 4.9:1+ */
.catcard__order { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.catcard__name { margin-top: 4px; font: 700 26px/1.2 var(--font-sans); letter-spacing: -.02em; }
.catcard__name small { margin-left: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--c-ink-2); vertical-align: middle; }
.catcard__desc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }   /* 회사소개 축약 카드 */
/* 회사소개 냥무부: 작게 6장 일렬(사장님 10-28) */
.catcards__grid--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.catcards__grid--row .catcard__link { gap: 14px; }
.catcards__grid--row .catcard__media { margin: 14px 14px 0; grid-template-rows: 100%; }   /* auto 행은 이미지 자연 높이로 커져 img 의 max-height:100% 가 안 먹음 */
.catcards__grid--row .catcard__media img { max-height: 100%; width: auto; }   /* 반원이 낮아져 얼굴이 이마만 남던 것: 높이에 맞춤 */
.catcards__grid--row .catcard__body { padding: 0 16px 20px; }
.catcards__grid--row .catcard__order { font-size: 12px; }
.catcards__grid--row .catcard__name { font-size: 19px; }
.catcards__grid--row .catcard__name small { display: none; }
.catcards__grid--row .catcard__desc { margin-top: 6px; font-size: 13px; }
.catcard__meta { display: flex; gap: 24px; margin-top: 16px; font-size: 15px; }
.catcard__meta dt { font-size: 13px; color: var(--c-ink-2); }
.catcard__meta dd { margin-top: 2px; font-weight: 600; }
.catcard__stats { margin-top: 20px; display: grid; gap: 8px; }
.catcard__stats li { display: grid; grid-template-columns: 2.4em 1fr 2.2em; align-items: center; gap: 12px; font-size: 13px; color: var(--c-ink-2); }
.catcard__stats i { position: relative; height: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.catcard__stats i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--accent-text); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease-out); }
.is-in .catcard__stats i::after { transform: none; }
.catcard__stats b { font: 500 13px/1 var(--font-mono); text-align: right; }

.catstory { scroll-margin-top: calc(var(--header-h) + 24px); margin-top: clamp(80px, 8vw, 128px); padding-top: 48px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.catstory__order { font-size: 14px; font-weight: 500; color: var(--accent-text); }
.catstory__name { margin-top: 6px; font: 800 clamp(34px, 3.5vw, 56px)/1.1 var(--font-sans); letter-spacing: -.03em; }
.catstory__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; margin-top: 40px; align-items: start; }
/* 상세 포트레이트 상자: 전신 포트레이트 상하 가운데. 프로필 카드와 별개 규칙(사장님 지시 2026-10-26) */
.catstory__portrait { position: sticky; top: calc(var(--header-h) + 32px); aspect-ratio: 4 / 5; padding-block: 24px; box-sizing: border-box; display: grid; place-items: center; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 30%, transparent); overflow: hidden; }
.catstory__portrait img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }   /* 상세는 원본 포트레이트를 상자에 꽉 채움(사장님 "크게 원본"). 세로 493 → 상자 높이까지 약 1.2배 */
.catstory__profile { display: grid; gap: 14px; }
.catstory__profile div { display: grid; grid-template-columns: 56px 1fr; gap: 16px; font-size: 17px; line-height: 1.6; }
.catstory__profile dt { color: var(--c-ink-2); font-size: 15px; padding-top: 2px; }
.catstory__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.catstory__tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 14px; color: var(--c-ink-2); }
.catstory__sub { margin-top: 48px; font: 700 20px/1.3 var(--font-sans); }
.catstory__sub::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.catstory__meet { margin-top: 12px; font-size: 17px; line-height: 1.75; color: var(--c-ink-1); }   /* 글 폭 = 열 폭(양옆 라인 맞춤, 사장님 2026-10-26) */
.catstory__strip { margin-top: 32px; }
.catstory__strip img { width: 100%; height: auto; border-radius: var(--radius); }   /* 열 폭에 맞춤. 어릴 적 스트립(810px)은 열(≈900)까지 ~1.1배 커짐 — 양옆 라인 우선 */
.catstory__strip figcaption { margin-top: 10px; font-size: 13px; color: var(--c-ink-2); }

.catpolas__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 64px; margin-top: var(--content-gap); }
/* 회전은 img 에(li 는 data-reveal 이 transform 을 씀). 9장 = 3×3, 빈 칸 없음 */
.catpolas__grid img { width: auto; max-width: 100%; height: auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); transition: transform .4s var(--ease-out); }
.catpolas__grid li:nth-child(odd) img { transform: rotate(-2deg); }
.catpolas__grid li:nth-child(even) img { transform: rotate(1.5deg); }
.catpolas__grid li:hover img { transform: rotate(0) scale(1.04); }
.catpolas__grid li:hover { z-index: 1; position: relative; }

/* ---------- 고양이 이야기 스크롤 모션 (2026-10-26) ----------
   원칙: 기존 [data-reveal] 페이드업(style.css) 위에 얹는 "차이"만. 전부 transform/opacity, 한 번만, reduced-motion 이면 아래 블록에서 전부 끔.
   귀여운 감: 얼굴이 반원 아래서 빼꼼 올라오고(백아웃), 태그가 톡톡 켜지고, 폴라로이드가 위에서 툭 떨어져 자리 잡음 */
.catcard, .catstory, .catpolas__grid { --ease-pop: cubic-bezier(.34, 1.56, .64, 1); }   /* 백아웃(살짝 넘쳤다 돌아옴) */

/* 히어로: 고양이가 오른쪽 아래서 미끄러져 들어오고, 원 빛은 뒤따라 퍼짐 */
.page-hero__cat img { animation: heroCatIn 1s var(--ease-out) .15s both; }
.page-hero__cat::before { animation: heroGlowIn 1.4s var(--ease-out) .4s both; }
@keyframes heroCatIn { from { opacity: 0; transform: translate(72px, 28px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes heroGlowIn { from { opacity: 0; scale: .55; } to { opacity: var(--hero-circle-alpha, 1); scale: 1; } }

/* 프로필 카드: 살짝 작은 상태에서 올라오며 펴짐(90ms 스태거), 들어온 뒤 얼굴이 반원 아래서 빼꼼 */
.js .catcard[data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }
.js .catcard[data-reveal]:not(.is-in) { transform: translateY(32px) scale(.96); }
.js .catcard__media img { transform: translateY(75%); transition: transform 1s var(--ease-out) calc(var(--i, 0) * 90ms + .3s); }   /* 백아웃 쓰면 잘린 바닥이 반원 위로 튀어 보임 → 넘침 없는 ease-out, 바닥 0 에서 멈춤 */
.js .catcard.is-in .catcard__media img { transform: none; }
.catcard__stats li:nth-child(1) i::after { transition-delay: 0.54s; }
.catcard__stats li:nth-child(2) i::after { transition-delay: 0.63s; }
.catcard__stats li:nth-child(3) i::after { transition-delay: 0.72s; }
.catcard__stats li:nth-child(4) i::after { transition-delay: 0.81s; }

/* 상세: 포트레이트 상자는 펴지며, 그 안 고양이는 한 박자 늦게 올라옴. 태그는 순서대로 톡톡 */
.js .catstory__portrait[data-reveal]:not(.is-in) { transform: translateY(24px) scale(.97); }
.js .catstory__portrait img { transform: translateY(10%); opacity: 0; transition: transform .9s var(--ease-pop) .2s, opacity .5s .2s; }
.js .catstory__portrait.is-in img { transform: none; opacity: 1; }
.js .catstory__tags li { opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s var(--ease-out), transform .55s var(--ease-pop); }
.js .catstory__tags.is-in li { opacity: 1; transform: none; }
.catstory__tags li:nth-child(1) { transition-delay: 0.13s; }
.catstory__tags li:nth-child(2) { transition-delay: 0.18s; }
.catstory__tags li:nth-child(3) { transition-delay: 0.23s; }
.catstory__tags li:nth-child(4) { transition-delay: 0.28s; }
.catstory__tags li:nth-child(5) { transition-delay: 0.33s; }
.catstory__tags li:nth-child(6) { transition-delay: 0.38s; }
.catstory__tags li:nth-child(7) { transition-delay: 0.43s; }
.catstory__tags li:nth-child(8) { transition-delay: 0.48s; }
.js .catstory__strip[data-reveal]:not(.is-in) { transform: translateY(16px) translateX(-20px); }
.js .catstory__strip[data-reveal] + .catstory__strip[data-reveal]:not(.is-in) { transform: translateY(16px) translateX(20px); }

/* 폴라로이드: 위에서 툭 떨어지며 삐딱하게 왔다가 제자리 각도로 */
.js .catpolas__grid li[data-reveal]:not(.is-in) { transform: translateY(-28px); }
.catpolas__grid img { transition: transform .8s var(--ease-pop); }
.js .catpolas__grid li:not(.is-in) img { transform: rotate(-9deg) scale(.96); }

/* ---------- 고양이 이야기 진입 커튼 (2026-10-26) ----------
   검은 막 가운데 치즈냥이 뒷모습이 팔 없이 앉아 있다가 → 점프하며 앞발이 쑥 올라와 막을 붙잡고 → 찌이익 미끄러지며 발톱 자국 → 막이 양쪽으로 갈라지고 냥이는 아래로 빠짐. 총 ~2.5s.
   페이지 진입마다 재생(사장님 2026-10-26). 해시(#cat-N) 진입·reduced-motion 만 생략. 일러스트 = img/cats/rs-cat-curtain.svg 인라인(build.py catintro_svg) */
.catintro { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; --cw: clamp(80px, 7vw, 110px);   /* 직전 clamp(100px, 9vw, 140px) — 느낌 보고 되돌릴 수 있음 */ --ch: calc(var(--cw) * 1.3); --cling: -6vh; --slide: 22vh; }   /* SVG 안 고양이가 뷰박스의 절반 폭이라 박스를 크게 */
.catintro__half { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #09090B;   /* 10-31 녹색 스포트는 막에서 빼서 .catintro__spot 로(고양이와 같이 떨어짐) */ animation: catintroSplit .8s cubic-bezier(.7, 0, .3, 1) 1.75s both; }
.catintro__half--l { left: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.04); --dir: -1; }
.catintro__half--r { right: 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.04); --dir: 1; }
/* 10-31 "초록 원도 고양이 비추면서 같이 떨어지게": 스포트를 따로 두고 고양이와 같은 키프레임(catintroCat)으로 이동. 막 위·고양이 아래, screen 으로 레인에 비침 */
.catintro__spot { position: absolute; left: 50%; top: 50vh; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, #2F8A63 22%, #09090B) 40%, transparent);   /* 10-31 밝기 65 → 42 → 26% 로 낮추니 회색 안개처럼 보여서, 밝기는 그대로(≈ #11251E) 두고 채도 높은 그린으로 색만 살림 */   /* 10-31 "덜 퍼지게, 고양이에 집중" → "더 작게": 84 → 52 → 34vmin, 가운데 40% 까지 꽉 찬 뒤 빠르게 사라짐 */ mix-blend-mode: screen; animation: catintroCat 2.5s linear both; }
@keyframes catintroSplit { to { transform: translateX(calc(var(--dir) * 104%)); } }
.catintro__half .rain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: .8; }   /* 막 위에 홈과 같은 그린 레인. screen 이라 막의 녹색 스포트는 비쳐 보임 */
/* 고양이: 가운데 앉아 있다가(0~.5s) 점프(.5~.75) → 매달림(-6vh, .75~.95) → 찌이익 미끄러짐(+18vh, .95~1.75) → 낙하(1.8~2.4) */
.catintro__cat { position: absolute; left: 50%; top: calc(50vh - var(--ch) / 2); width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2); animation: catintroCat 2.5s linear both; }   /* 검은 막 위라 그림자 불필요(큰 SVG filter 는 느림) */
.catintro__cat svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes catintroCat {
  0%, 18% { transform: translateY(0) scale(1); }
  21% { transform: translateY(1.5vh) scale(1.06, .92); }
  30% { transform: translateY(calc(var(--cling) - 9vh)) scale(.96, 1.06); }
  36% { transform: translateY(var(--cling)) scale(1); }
  38% { transform: translateY(calc(var(--cling) + .6vh)) rotate(1deg); }
  70% { transform: translateY(calc(var(--cling) + var(--slide))) rotate(-1deg); }
  74% { transform: translateY(calc(var(--cling) + var(--slide) + 1vh)) rotate(1.5deg); }
  100% { transform: translateY(130vh) rotate(14deg); }
}
/* 앞발: 처음엔 없음(아래로 접힘) → 점프와 함께 쑥 올라옴(살짝 넘침) → 미끄러지는 동안 번갈아 긁음 */
.catintro__arm { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: catintroArm 2.5s linear both; }
.catintro__arm--r { animation-name: catintroArmR; }
@keyframes catintroArm  { 0%, 22% { transform: scaleY(0); } 32% { transform: scaleY(1.12) rotate(-3deg); } 36% { transform: scaleY(1); } 44% { transform: scaleY(.96) rotate(2deg); } 52% { transform: scaleY(1.03) rotate(-2deg); } 60% { transform: scaleY(.97) rotate(2deg); } 68%, 74% { transform: scaleY(1); } 78% { transform: rotate(-24deg); } 82% { transform: rotate(16deg); } 86% { transform: rotate(-24deg); } 90% { transform: rotate(16deg); } 94% { transform: rotate(-24deg); } 100% { transform: rotate(10deg); } }
@keyframes catintroArmR { 0%, 22% { transform: scaleY(0); } 32% { transform: scaleY(1.12) rotate(3deg); } 36% { transform: scaleY(1); } 44% { transform: scaleY(1.03) rotate(-2deg); } 52% { transform: scaleY(.96) rotate(2deg); } 60% { transform: scaleY(1.03) rotate(-2deg); } 68%, 74% { transform: scaleY(1); } 78% { transform: rotate(24deg); } 82% { transform: rotate(-16deg); } 86% { transform: rotate(24deg); } 90% { transform: rotate(-16deg); } 94% { transform: rotate(24deg); } 100% { transform: rotate(-10deg); } }
/* 10-31 "점프 후 떨어질 때 발도·손도·꼬리도 파닥": 앞발 번갈아 ±24°, 뒷발 ±20°, 꼬리 ±22°(아래) — 모두 74%(떨어지기 시작)부터 */
.catintro__leg { transform-box: fill-box; transform-origin: 50% 0; animation: catintroLeg 2.5s linear both; }
.catintro__leg--r { animation-name: catintroLegR; }
@keyframes catintroLeg  { 0%, 34% { transform: none; } 38% { transform: translateY(14px) rotate(45deg); } 43% { transform: translateY(0px) rotate(-20deg); } 48% { transform: translateY(14px) rotate(45deg); } 53% { transform: translateY(0px) rotate(-20deg); } 58% { transform: translateY(14px) rotate(45deg); } 63% { transform: translateY(0px) rotate(-20deg); } 68% { transform: translateY(14px) rotate(45deg); } 73% { transform: translateY(0px) rotate(-20deg); } 78% { transform: translateY(14px) rotate(45deg); } 83% { transform: translateY(0px) rotate(-20deg); } 88% { transform: translateY(14px) rotate(45deg); } 93% { transform: translateY(0px) rotate(-20deg); } 98% { transform: translateY(14px) rotate(45deg); } 100% { transform: translateY(8px) rotate(30deg); } }
@keyframes catintroLegR { 0%, 34% { transform: none; } 38% { transform: translateY(0px) rotate(20deg); } 43% { transform: translateY(14px) rotate(-45deg); } 48% { transform: translateY(0px) rotate(20deg); } 53% { transform: translateY(14px) rotate(-45deg); } 58% { transform: translateY(0px) rotate(20deg); } 63% { transform: translateY(14px) rotate(-45deg); } 68% { transform: translateY(0px) rotate(20deg); } 73% { transform: translateY(14px) rotate(-45deg); } 78% { transform: translateY(0px) rotate(20deg); } 83% { transform: translateY(14px) rotate(-45deg); } 88% { transform: translateY(0px) rotate(20deg); } 93% { transform: translateY(14px) rotate(-45deg); } 98% { transform: translateY(0px) rotate(20deg); } 100% { transform: translateY(8px) rotate(-30deg); } }   /* 10-31 "발이 안 움직임": 낙하(0.65초)만으론 짧고 몸에 가려 안 보임 → 매달려 미끄러질 때부터(34%~) 125ms 간격으로 아래로 14px 차면서 45°, 좌우 엇박 */
/* 꼬리: 앉아 있을 땐 가만, 매달려 미끄러질 땐 살랑(±12°, 0.3s 주기), 떨어질 땐 파닥(±22°, 0.15s 주기). 축은 꼬리 밑동(몸통 쪽) */
.catintro__tail { transform-box: fill-box; transform-origin: 20% 6%; animation: catintroTail 2.5s linear both; }
@keyframes catintroTail {   /* 10-31 "꼬리도 발처럼 더 파닥": 매달릴 때부터 100ms 간격 ±30°, 떨어질 때 ±40° */
  0%, 30% { transform: rotate(0); }
  34% { transform: rotate(30deg); } 38% { transform: rotate(-30deg); } 42% { transform: rotate(30deg); } 46% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } 54% { transform: rotate(-30deg); } 58% { transform: rotate(30deg); } 62% { transform: rotate(-30deg); } 66% { transform: rotate(30deg); } 70% { transform: rotate(-30deg); } 74% { transform: rotate(40deg); } 78% { transform: rotate(-40deg); } 82% { transform: rotate(40deg); } 86% { transform: rotate(-40deg); } 90% { transform: rotate(40deg); } 94% { transform: rotate(-40deg); } 98% { transform: rotate(40deg); } 100% { transform: rotate(24deg); }
}
/* 발톱 자국: 앞발 끝(SVG x 127·273 / y 47)에서 미끄러진 거리만큼 아래로. 막 위 밝은 선 */
.catintro__scratches { position: absolute; top: calc(50vh - var(--ch) / 2 + var(--cling) + var(--ch) * .255); display: flex; gap: 7px; translate: -50% 0; }
/* 10-31 진단: 자국이 화면에 붙어 있어 커튼이 열린 뒤 0.7초 혼자 떠 있었음 → 막(.catintro__half) 안으로 넣어 커튼과 같이 밀려남. 오른쪽 막은 49.5vw 에서 시작하므로 그만큼 뺌 */
.catintro__scratches--l { left: calc(50vw - var(--cw) / 2 + var(--cw) * .245); }   /* 앞발 끝: 자세 변경 후 x 98·302 / y 81 (뷰박스 400×520) */
.catintro__scratches--r { left: calc(.5vw - var(--cw) / 2 + var(--cw) * .755); }
.catintro__scratches i { width: 4px; height: calc(var(--slide) + 2vh); background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42) 75%, transparent); clip-path: polygon(50% 0, 100% 4%, 60% 100%, 40% 100%, 0 4%); transform-origin: top; transform: scaleY(0); animation: catintroScratch .8s linear .95s both; }
.catintro__scratches i:nth-child(2) { animation-delay: .98s; height: calc(var(--slide) + 3.5vh); }
.catintro__scratches i:nth-child(3) { animation-delay: 1.01s; height: calc(var(--slide) + 1vh); }
@keyframes catintroScratch { to { transform: scaleY(1); } }
/* 커튼 도는 동안 히어로 등장은 막이 갈라진 뒤에 */
.is-intro .page-hero .wrap[data-reveal] { transition-delay: 1.9s; }
.is-intro .page-hero__cat img { animation-delay: 2s; }
.is-intro .page-hero__cat::before { animation-delay: 2.2s; }

@media (max-width: 1199px) {
  .catcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .catcards__grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .catstory__grid { grid-template-columns: 1fr; gap: 32px; }
  .catstory__portrait { position: static; max-width: 420px; }
  .catpolas__grid { gap: 24px; }
  .page-hero__cat { position: relative; right: auto; width: min(92%, 560px); margin: 0 auto; }   /* 2026-10-28 390 에서 꼬리·앞발 잘림 */
}
@media (max-width: 767px) {
  .catcards__grid { grid-template-columns: 1fr; }
  .catcards__grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catstory__profile div { grid-template-columns: 1fr; gap: 4px; }
  .catpolas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tile.is-in .tile__media img { animation: none; }
  .catcard__stats i::after { transition: none; transform: none; }
  .catcard, .catpolas__grid img { transition: none; }
  .page-hero__cat img, .page-hero__cat::before { animation: none; }
  .catintro { display: none; }
  .js .catcard__media img, .js .catstory__portrait img, .js .catstory__tags li, .js .catpolas__grid li img { transform: none; opacity: 1; transition: none; }
  .catcard:hover { transform: none; }
  .catpolas__grid li:hover img { transform: rotate(0); }
  .page-hero__cat { animation: none; }
}

/* ---------- 문의 CTA (모든 서브 페이지 끝) ---------- */
.cta__layout { display: grid; grid-template-columns: 1fr; gap: 32px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
  .tiles, .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .detail__body, .about__grid, .cta__layout, .feature { grid-template-columns: 1fr; gap: 40px; }
  .feature, .feature--flip { --pad: 24px; --gx: 50%; --gy: 26%; --grx: 72%; --gry: 30%; gap: 24px; }
  .feature--flip .feature__media { order: 0; }
  .feature__text { padding-top: 0; }
  .detail__side { position: static; }
  .history-sec .wrap { grid-template-columns: 1fr; gap: 48px; }
  .history-sec__head { position: static; }
}
@media (max-width: 767px) {
  .page-hero { padding: calc(var(--header-h) + 64px) 0 96px; }   /* 2026-10-28 회사소개·채용 답답 → 아래 +32 */
  .lnb ul { padding-right: 48px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }   /* 2026-10-28 가로 스크롤 탭 '더 있음' 페이드 */
  .tiles, .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .tile__name { font-size: 16px; }
  .tile__sub { display: none; }
  .culture__photos { grid-template-columns: 1fr 1fr; }
  .history__year { grid-template-columns: 1fr; gap: 12px; }
  .history-sec__years { padding-left: 24px; }
  .history__year::before { left: -30px; top: 36px; }
  .pager { grid-template-columns: 1fr 1fr; gap: 0 16px; }   /* 2026-10-28 세로 3단 → 이전·다음 좌우, 목록은 아래 가운데 */
  .pager a { padding: 24px 0; font-size: 17px; }
  .pager a:last-child { text-align: right; }
  .pager .pager__list { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 0 0 8px; }
  .detail__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }   /* 2026-10-30 flex-wrap 에서 연도만 둘째 줄에 혼자 떨어지던 것 → 고객 한 줄 / 분야·연도 한 줄 */
  .detail__meta > div:first-child { grid-column: 1 / -1; }
  .gallery { gap: 12px; margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile__media img { transition: none; }
  .page-hero::after { animation: none; }
}

/* ---------- 채용 (2026-10-26) ---------- */
.talent__en { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-red-text); }
.talent__list h3 { margin-top: 14px; }   /* 위 영문 라벨 아래 */
.talent__list p { line-height: 1.7; }
/* 11-02 인재상 아래 추가 묶음: 문장 제목 + 설명 + 번호 목록 5개(번호 | 제목·설명, 줄마다 위 선) */
.talent__ax-wrap { margin-top: clamp(96px, 9vw, 136px); }
.talent__ax-title { font: 700 clamp(26px, 2.4vw, 36px)/1.25 var(--font-sans); letter-spacing: -.02em; }
.talent__ax { margin-top: var(--content-gap); }
/* 11-02 사장님 "PC 레이아웃 허접" → 서비스·함께할수록 섹션과 같은 5:7 두 칸: 왼쪽 문장 제목+설명(위에 고정), 오른쪽 목록 5개 */
@media (min-width: 901px) {
  .talent__ax-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .talent__ax-head { position: sticky; top: calc(var(--header-h) + 96px); }
  .talent__ax { margin-top: 0; }
  .talent__ax li:first-child { border-top: 0; padding-top: 8px; }   /* 오른쪽 첫 줄은 제목과 같은 높이에서 시작 */
}
.talent__ax li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.talent__ax li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.talent__num { font: 500 14px/1.6 var(--font-sans); color: var(--c-red-text); }
.talent__ax li > div { display: grid; gap: 8px; align-content: start; }
.talent__ax h4 { margin: 0; font: 700 20px/1.35 var(--font-sans); letter-spacing: -.01em; }
.talent__ax p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--c-ink-2); text-wrap: pretty; }
.talent__num { padding-top: 5px; }   /* 제목 글줄과 눈높이 */
@media (max-width: 760px) { .talent__ax li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } }
.welfare__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 24px; margin-top: var(--content-gap); }   /* 11-06 12개 → 10개: 4열이면 마지막 줄이 2칸 비어 5열 두 줄로(1199 이하는 2열) */
.welfare__grid li { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.welfare__grid img { width: 48px; height: 48px; }   /* 현 사이트 선 아이콘. <img> 로 넣은 SVG 는 currentColor 를 못 받아 파일 안 stroke 를 #8A888F(--ink-400, 보조 글자보다 한 단계 아래)로 고정 — 사장님 "색 좀 죽이자" */
.welfare__grid h3 { margin-top: 16px; font: 700 18px/1.3 var(--font-sans); }
.welfare__grid p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.apply__mail { margin-top: 32px; }
@media (max-width: 1199px) { .welfare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (max-width: 767px) { .welfare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }

/* ---------- 문의 폼 (2026-10-26, 현 사이트 폼 이식) ---------- */
.form { display: grid; gap: 40px; scroll-margin-top: 48px; }   /* 헤더의 문의 버튼(#contactForm)으로 내려올 때 첫 줄이 고정 헤더에 붙지 않게 */
.form__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__group legend { display: block; margin-bottom: 20px; font: 700 20px/1.3 var(--font-sans); letter-spacing: -.01em; }
.form__step { display: block; margin-bottom: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green-400); }   /* 빨강은 경고처럼 읽혀 그린 */
.form__fields { display: grid; gap: 16px; }
.form__fields--2 { grid-template-columns: 1fr 1fr; }
.form__field { display: grid; gap: 8px; }
.form__field label { font-size: 13px; color: var(--c-ink-2); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form textarea {
  width: 100%; padding: 14px 16px; font: 500 16px/1.4 var(--font-sans); color: var(--c-ink);
  background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}
.form input:focus-visible, .form textarea:focus-visible { outline: 0; border-color: var(--green-400); background: color-mix(in srgb, currentColor 7%, transparent); }
.form textarea { resize: vertical; min-height: 160px; }
.form__file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form__file label:has(:focus-visible) { outline: 2px solid var(--green-400); outline-offset: 4px; }
.form__filename { font-size: 14px; color: var(--c-ink-1); }
.form__filedel { font-size: 13px; color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; cursor: pointer; }
.form__file small { font-size: 13px; color: var(--c-ink-2); }
.form__terms { max-height: 180px; overflow: auto; padding: 16px 18px; font-size: 13px; line-height: 1.7; color: var(--c-ink-2); background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius); }
.form__terms b { display: block; margin-bottom: 8px; color: var(--c-ink-1); }
.form__terms p + p { margin-top: 8px; }
.form__agree { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; cursor: pointer; }
.form__agree input { width: 18px; height: 18px; accent-color: var(--green-600); }
.form__captcha { margin-top: 20px; width: 300px; height: 74px; overflow: hidden; border-radius: 4px; }   /* reCAPTCHA 다크 위젯 바깥 흰 2px 띠 잘라냄 */
.form__captcha iframe { margin: -2px 0 0 -2px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 24px; }   /* 버튼 오른쪽 정렬, 상태 줄은 왼쪽에 */
.form__foot .form__status { margin-right: auto; }   /* 버튼과 상태 줄 한 행: 캡차 아래 빈 공간 없앰 */
.form__status { font-size: 15px; }
.form__status:empty { display: none; }
.form__status[data-state="error"] { color: var(--c-red-text); }
.form__status[data-state="ok"] { color: var(--green-400); }
.form__submit { min-width: 160px; justify-content: center; }   /* 기본 48px 높이, 폭 160 — 입력칸 높이(≈50)와 맞춤 */
.form__submit:disabled { opacity: .6; cursor: progress; }
@media (max-width: 767px) { .form__fields--2 { grid-template-columns: 1fr; } .form { gap: 32px; } }

/* ---------- 404 (2026-11-06) ---------- 공사 중인 고양이 그림 + 안내 + 버튼 둘, 가운데 한 줄기. 화면 한 장에 들어오게 그림 높이를 화면 높이에 맞춰 줄임 */
.notfound { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; padding-block: calc(var(--header-h) + 48px) 96px; }
@media (min-width: 901px) { .notfound { min-height: 100vh; min-height: 100svh; padding-block: calc(var(--header-h) + 48px) 48px; } }   /* PC: 헤더 아래 ~ 화면 바닥의 한가운데(푸터는 첫 화면 밖) */
.notfound__wrap { display: grid; justify-items: center; text-align: center; container-type: inline-size; }
/* 숫자를 냥이들 뒤에 건물처럼 세운다: 그림과 숫자를 같은 칸에 겹치고 둘 다 바닥에 맞춤. 숫자 폭이 그림의 약 1.42배라 그림 폭은 칸 폭의 70% 이하 */
.notfound__art, .notfound__code { grid-area: 1 / 1; align-self: end; --nf-w: min(420px, 40vh, 70cqw); }
.notfound__art { position: relative; z-index: 1; width: var(--nf-w); height: auto; }
.notfound__code { margin-bottom: calc(var(--nf-w) * .039); font: 800 calc(var(--nf-w) * .72)/.72 var(--font-sans); letter-spacing: -.02em; color: color-mix(in srgb, var(--c-red) 55%, var(--c-bg)); user-select: none; }   /* 배경이라 레드를 바닥색에 섞어 가라앉힘 */
.notfound__title { margin-top: 40px; }
.notfound__desc { margin-top: var(--head-gap); font-size: clamp(16px, 1.1vw, 18px); }
.notfound__actions { margin-top: 40px; justify-content: center; }