@charset "utf-8";
/* main.css — 채움과비움외과의원 메인 전용 스타일 */
/* [P-03] 이 파일은 자체 @media 를 두지 않는다 — 반응형은 responsive.css (CSS-02) */
/* [2026-09-16 회장님 지시] 값은 규칙 반올림이 아니라 피그마 실측 그대로다.
   자간 -2% = -0.02em(폰트 크기 비례) · 색·반경·불투명도는 :root 변수에 실측값을 그대로 담았다.
   섹션 내부 좌표는 두 방식을 쓴다 — ① 콘텐츠가 표준 1440 컨테이너(x240 거터)에 맞으면 flex/grid 로,
   ② 배경·장식이 1920 풀블리드로 겹치면 그 구간만 1920 기준 % 로 절대배치한다(1920 에서 px 와 동일,
   1920 미만은 body max-width:1920 축소를 따라 함께 줄어 가로 넘침이 나지 않는다). */

#main{padding-top:0;}

/* ─────────────────────────────────────────────
   m-visual — 히어로 (프레임 557:3257 · 1920×940)
───────────────────────────────────────────── */
.m-visual{position:relative;width:100%;height:1080px;overflow:hidden;background:#000;}
.visual{position:absolute;width:100%;height:100%; top: 0; left: 0;}
.visual video {display: block; width: 100%; height: 100%; object-fit:cover;}
.visual__frame,
.visual__poster{position:absolute;inset:0;width:100%;height:100%;}
.visual__frame{z-index:2;}
.visual__frame iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(56.25vw,100%);transform:translate(-50%,-50%);border:0;pointer-events:none;}
.visual__poster{z-index:1;}
.visual__poster picture,
.visual__poster img{display:block;width:100%;height:100%;object-fit:cover;}
/* [결정-17·21] PLAYING 신호 오기 전·모션 끔·오류 시 포스터만. 인터랙션·부품 담당이 .is-playing 을 붙이면 숨긴다 */
.visual.is-playing .visual__poster{opacity:0;}

.visual__scroll{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;}
/* [P1-02 재작업 · 노드 557:3335 실측 rotation -90 · 20×68] 가로 텍스트를 세로쓰기로 —
   writing-mode 가 transform:rotate 보다 레이아웃 박스 크기(20×68)를 그대로 따른다 */
.visual__scroll-txt{writing-mode:vertical-rl;font-family:'Montserrat','Poppins',sans-serif;font-size:var(--fs-14);line-height:20px;font-weight:700;letter-spacing:.1em;color:#fff;}
.visual__scroll-track{position:relative;display:block;width:14px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:100px;}
/* [P1-02 재작업 · 노드 557:3334 실측 14×14.46, 트랙 위가 아니라 아래 플러시] */
.visual__scroll-dot{position:absolute;left:50%;bottom:0;top:auto;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;}
/* [결정-31·D-1·V-10] 점 움직임은 피그마에 지시 없음 — 정지. 애니메이션 추가 금지 */

/* ─────────────────────────────────────────────
   sec2 — 원장 인사 (프레임 557:3581·557:3586 · y940 h886, 풀블리드 비대칭)
   좌표계 — 이 섹션만 1920 기준 %(코멘트에 px 병기). 786:832(43.33%)/170,195(8.85%,22.01%)/1131,180(58.91%,20.32%)
───────────────────────────────────────────── */

@font-face {
    font-family: 'KccEunyeong';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.sec2{position:relative;height:886px;overflow:hidden;background:#fff;}
.sec2__box{position:absolute;left:0;top:0;width:43.33%;height:100%;background:var(--c-primary);overflow:hidden;}   /* 832/1920 */
/* [P1-04 재작업 · 노드 557:3583 실측] 배경 실제 이미지는 MULTIPLY 로 얹혀 있어 CSS 도 동일하게 —
   납품 자산(bg_sec202)은 이미 합성된 결과물이라 mix-blend-mode 는 필요 없다(FIG-04 export 그대로) */
.sec2__box picture,
.sec2__box img{display:block;width:100%;height:100%;object-fit:cover;}
.sec2 > .container{position:static;max-width:none;height:100%;}
.sec2__pic{position:absolute;left:8.854%;top:195px;width:43.542%;}   /* 170/1920, 836/1920 */
.sec2__pic picture,.sec2__pic img{display:block;width:100%;height:auto;}
.sec2__txt{position:absolute;left:58.906%;top:180px;width:28.542%;min-width:420px;}   /* 1131/1920, 548/1920 */
/* [R3-A2 재작업 · 노드 557:3589~3599 전수 y 실측 — 02:5x 지휘자 지시]
   margin 누적(줄바꿈 line-height 를 57→71 로만 고쳐도 브라우저 폰트 leading 이 Figma 박스
   높이와 달라 아래로 갈수록 어긋난다 — eyebrow 부터 13px 어긋난 것이 서명줄에서 72px 로
   누적됐다) 대신, 자식을 전부 .sec2__txt(자기 자신이 컨테이닝 블록) 기준 절대좌표로 고정한다.
   기준 y1120(eyebrow, 909의 top:180px 와 일치) 을 0 으로 — title 41 · lead 215 · sign 409. */
/* [F-07 정정 · coord-diff] eyebrow line-height 1→1.7(170%, 노드 557:3589) */
.sec2__eyebrow{position:absolute;top:0;left:0;font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--fs-18);line-height:1.7;letter-spacing:-.02em;color:var(--c-accent);}
/* [F-07 정정] 노드 557:3590 실측 letter-spacing 0%(자간 없음) — 임의로 넣은 -2% 제거 */
.sec2__txt h2{position:absolute;top:41px;left:0;width:100%;font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--fs-52);line-height:71px;letter-spacing:normal;color:#222;}
.sec2__lead{position:absolute;top:215px;left:0;width:100%;}
.sec2__lead p{font-family:'Pretendard';font-weight:600;font-size:var(--fs-22);line-height:1.5;letter-spacing:-.02em;color:#666;}
.sec2__lead p + p{margin-top:20px;font-weight:400;font-size:var(--fs-18);line-height:1.7;}
/* [P1-05·R3-A2 재작업 — 03:1x 재개, 노드 557:3595(병원명 x1131 y1562)·557:3597(원장 x1263 y1559)·
   557:3598/99(서명 프레임 x1301 y1529) 재조회] align-items:center 로는 세 요소의 실제 세로
   중심이 서로 달라(1574/1570.5/1562) 시안과 못 맞춘다 — .sec2__sign 을 컨테이닝 블록으로 두고
   3요소 전부 절대좌표로 고정(컨테이너 기준 = page 1131,1529를 0,0으로). */
.sec2__sign{position:absolute;top:409px;left:0;width:100%;height:83px;}
/* [F-07 정정] 병원명 line-height 1.6→1.7(170%, 노드 557:3595) */
.sec2__sign-hospital{position:absolute;top:33px;left:0;font-size:var(--fs-14);line-height:1.7;letter-spacing:-.02em;color:#666;}
.sec2__sign-name{display:flex; position:absolute;top:4px;left:132px; align-items: center; gap: 10px;}
/* [F-07 정정] "원장" 노드 557:3597 실측 letter-spacing -2% · line-height 150% 누락분 추가 */
.sec2__sign-label{font-weight:600;font-size:var(--fs-16);line-height:1.5;letter-spacing:-.02em;color:#000;}
.sec2__sign-name .sign {font-family: 'KccEunyeong'; font-size: 44px; font-weight: 400; line-height: 1.5; letter-spacing: -.88px; color: #000; padding-bottom: 15px;}



/* ─────────────────────────────────────────────
   sec3 — 진료 철학 (프레임 557:3556 · y1826 h889)
   배경만 풀블리드, 본문은 표준 1440 컨테이너(x240 거터와 정확히 일치)
───────────────────────────────────────────── */
.sec3{position:relative;height:889px;overflow:hidden;}
.sec3__bg{position:absolute;inset:0;z-index:0;}
.sec3__bg img{width:100%;height:100%;object-fit:cover;}
/* [P1-06 재작업 · 노드 557:3562 title 인스턴스 실측 x240 y2204.5 · 텍스트 y2238.5≈2239]
   기존 229px 는 h2 박스 top 이 2055 에 오게 해 목표(2204.5)보다 149px 높았다(자식만 고쳐서
   해결 안 됨 — section-header 를 감싸는 컨테이너 padding-top 자체가 틀린 값이었다). */
.sec3 > .container{position:relative;z-index:1;padding-top:378px;}
/* 523 은 피그마 텍스트 박스 폭 그대로(노드 557:3563) — 실측 결과 그 폭·글자 그대로는 줄바꿈 직전
   한 단어(「채웁니다.」)가 약 5px 모자라 두 줄로 접힌다(자연 폭 실측 439+79, 사이 간격 포함 시 523 초과).
   피그마 텍스트 엔진과 브라우저 커닝 차 — 규칙 근거 있는 차이로 530px 로 5px 만 늘려 한 줄로 유지(사유 기록). */
.sec3 .section-header{max-width:530px;}
/* [F-07 정정 · coord-diff] 노드 557:3562 실측 weight Medium(500, 기존 600 오기) · letter-spacing -2% 누락 */
/* [지휘자 08:4x 재측 · 지워보기] 카드 박스 y 는 실측 0 diff(getBoundingClientRect 2054.5/2290.5 —
   정확히 목표와 일치, 원인 아님) — 남은 +3~+4.4 dy 는 카드·섹션 위치가 아니라 텍스트 자체가 자기
   박스 안에서 아래로 치우쳐 그려지는 폰트 leading 성격(h2 도 grid 밖에서 독립적으로 +3, 카드
   strong/p 도 +4.1~4.4 — 서로 다른 line-height(45/33/30.6)·서로 다른 배치 방식(정적 흐름 vs
   flex 가운데 정렬)인데 방향·크기대가 비슷해 같은 leading 성격으로 판단). 박스 위치는 그대로 두고
   텍스트만 transform 으로 보정(카드 높이·grid gap·다음 섹션(sec4 top 2863) 에 영향 없음, 문서높이도
   불변 — transform 은 레이아웃에 관여하지 않는다). */
.sec3 .section-header h2{font-size:var(--fs-30);line-height:45px;font-weight:500;letter-spacing:-.02em;color:#222;position:relative;padding-top:38px;transform:translateY(-3px);}
/* [P1-06] 막대 색 네이비→노랑(#edb629) — 다른 섹션(sec4~7)과 같은 title 컴포넌트인데 sec3 만
   빠져 있었다([재발] 유형 — 아이콘/색 배타 배정과 같은 「공용 컴포넌트 값 통일 누락」) */
.sec3 .section-header h2:before{content:'';position:absolute;left:0;top:0;width:80px;height:2px;background:var(--c-accent);}
/* [F-06/F-07 정정] 노드 557:3563 실측 weight SemiBold(600) — 누락돼 있었다 */
.sec3 .section-header p{margin-top:16px;font-size:var(--fs-22);font-weight:600;line-height:1.5;letter-spacing:-.02em;color:#666;}

/* [F-06 정정 · coord-diff box dy -31.5] 노드 557:3572/3580(Frame1334/1336) 실측 y2290.5 —
   229→260.5(229+31.5) */
/* [P5R3-03 정정 · 지휘자 06:4x 지시 · 지워 보기로 확인] row-gap 8px 은 오기(노드 실측 2290.5−2054.5−196=40,
   column-gap 40 과 동일) — 이전 회차가 2행 −31.5 를 맞추려고 이 8px 은 그대로 두고 top 만 260.5 로
   +32 밀어(228.5→260.5) 2행은 우연히 맞았지만(196+8+32=196+40) 1행이 그 +32 를 고스란히 받아 밀렸다
   ([재발] H1). row-gap 을 40 으로 되돌리고 top 을 260.5→228.5(−32)로 되돌리면 1행·2행 계산이 각각
   228.5+0=228.5 기준 1행 목표(2054.5 대응) · 228.5+196+40=464.5(2행, 이전 260.5+196+8=464.5 와 동일) —
   1행만 정상화되고 2행은 그대로 유지된다(대조군: gap 8→40 만 바꾸고 top 그대로면 2행이 +32 더 밀려
   반대로 틀어짐 — 두 값을 함께 고쳐야 함을 계산으로 확인). */
.sec3__list{position:absolute;right:0;top:228.5px;display:grid;grid-template-columns:repeat(2,383px);gap:40px;}
.sec3__item{display:flex;align-items:center;gap:25px;height:196px;padding:0 25px;border-radius:100px;background:var(--c-primary);color:#fff; transition: all .3s linear}
.sec3__item--gold{background:var(--c-philo-gold);}   /* [구조 담당 실측 557:3566] 다른 3개와 다른 골드 — 확인 사항 아님, 피그마 그대로 */
.sec3__item img{flex:0 0 80px;width:80px;height:80px;}
/* [P5R3-03 정정] 텍스트 블록에 폭 지정이 없어 flex 기본(auto·content-fit) 로 좁게 잡혀 「채우기」
   설명이 2줄 대신 3줄로 접혔다(실측 164.5 vs 노드 폭 230 — 아이템 내부 여유폭은 383−25×2(padding)−80(아이콘)−25(gap)=228,
   노드 230 과 거의 같다 · min-width:0 은 flex 기본 min-width:auto 가 content 기준으로 과소 축소되는 것을 막는다). */
.sec3__item-txt{flex:1 1 auto;min-width:0;transform:translateY(-4.2px);}   /* [지휘자 08:4x 재측] strong +4.4 · p +4.1 — 카드 박스(0 diff, 위 h2 주석 참고)는 그대로 두고 텍스트 블록만 위로 보정. 두 값의 중간(4.2)으로 한 번에 */
/* [P5R3-03 정정 · 코드-diff 재실측 06:5x] 폭 228 로 고친 뒤 4장 중 「채우기」 카드만 2번째 줄
   자연 폭이 229.4px(측정, 나머지 3장은 228 미만이라 문제 없음)로 228 을 1.4px 넘어 3줄로 접혔다 —
   3줄로 접히면 align-items:center 때문에 글머리(dy)도 다른 카드와 −10.9 어긋난다(같이 해소됨).
   같은 파일 §sec3 section-header 규칙(523→530, "브라우저 커닝 차 — 규칙 근거 있는 차이")과 같은
   유형이라 같은 방식으로 처리 — 이 카드만 아이콘 간격을 25→23 으로 좁혀 텍스트 여유폭을 228→230
   (노드 원래 폭)으로 넓힌다. 다른 3장은 노드값 25 그대로 유지. */
.sec3__item:nth-child(2){gap:23px;}
/* [F-06/F-07 정정] 노드 실측 — strong 자간 -2%(누락) · p 행간 170%(기존 1.5→1.7) */
.sec3__item-txt strong{display:block;font-size:var(--fs-22);line-height:33px;font-weight:600;letter-spacing:-.02em;margin-bottom:11px;}
.sec3__item-txt p{font-size:var(--fs-18);line-height:1.7;letter-spacing:-.02em;}

/* ─────────────────────────────────────────────
   sec4 — 과정·시술 (프레임 557:3512 · y2863 h991)
───────────────────────────────────────────── */
/* [번질 곳 · P1-07~10 실측] 시안은 섹션 사이 캔버스 간격이 균일하지 않다 — sec3 하단(2715)→
   sec4 상단(2863) 148px 갭이 프레임 자체에 있다(사이 카드가 991 높이로 정확히 프레임 하단에
   닿는다 · 여백 없음). sec3 는 다른 구조 담당 범위라 그쪽 파일은 건드리지 않고, 이 148 을
   margin-top(배경 없는 섹션이라 페인트 영향 없음)으로 sec4 자신에 둔다 — sec3 쪽에서도
   같은 148 을 별도로 더하면 갭이 중복되니 담당 간 조율 필요(보고서 참조). */
.sec4{position:relative;padding-top:148px;overflow:hidden;}
.sec4__deco{position:absolute;right:0;top:-262px;width:27.29%;height:auto;pointer-events:none;z-index:0; animation: rotate 20s infinite linear;}   /* 524/1920, top: 2447-2863(margin-top 148 로 박스 자체가 내려가 값 변경 불필요) */
@keyframes rotate{
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}
.sec4 > .container{position:relative;z-index:1;}
.sec4__head{position:relative;padding-top:0;}
/* [P1-07 재작업] 제목묶음 전체를 1440 컨테이너 안에서 가운데 정렬 — 피그마 Frame 1234(x730~1189)가
   1440 폭(x0~1440 상대) 안에서 중앙(490.5~949.5)에 온다. h2 는 inline-block 으로 폭을 텍스트에 맞춰
   히어로 문구 실폭(459)만큼만 박스를 만들고, 그 박스를 .section-header 가 가운데로 보낸다. */
.sec4 .section-header{text-align:center;}
.sec4 .section-header h2{display:inline-block;font-size:var(--fs-30);line-height:45px;font-weight:500;letter-spacing:-.02em;color:#222;position:relative;padding-top:34px;white-space:nowrap;}   /* [R6-F07 정정 · coord-diff 재확인] weight 600→500 · 자간 -2% 추가는 맞았으나 lh 는 45px(150%)가 실제 시안값 — 51(170%)로 바꾼 것을 되돌린다 */
.sec4 .section-header h2:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:80px;height:2px;background:var(--c-accent);}   /* [P1-07] 노랑(#edb629) — 노드 I557:3514;36:872 */
.sec4 .section-header > p{margin-top:20px;font-size:var(--fs-22);line-height:1.5;font-weight:600;letter-spacing:-.02em;color:#666;}   /* [R6-F07] weight 400→600 — 노드 557:3515 실측. margin-top 16→20 (Frame1234: 제목79+20+부제33+20+본문97=249 정확히 일치) */
.sec4__desc{margin-top:20px;}   /* [번질 곳 실측] 53→20 (Frame1234 desc rel152, subtitle rel99+33=132, 152-132=20) */
.sec4__desc p{font-size:var(--fs-18);line-height:1.7;letter-spacing:-.02em;color:#666;}   /* [번질 곳 실측] 1.5→1.7 (Frame1308 라인31≈18×1.7) */
.sec4__desc p + p{margin-top:4px;}   /* [번질 곳 실측] 8→4 (35-31=4) */
/* [P5R3-04 정정 · 노드 557:3518 실측 x0 w440 → 페이지 가운데 951, 컨테이너(1440) 가운데 720=페이지960 과 9px 차]
   text-align:center 만으로는 이 문단이 h2·다른 문단과 같은 폭 전체(1440) 기준으로 가운데 잡혀 960 에 온다 —
   이 문단만 폭440 박스 기준으로 951 에 있어야 하므로 relative left 로 9.3px 만 왼쪽으로 옮긴다(다른 줄은 그대로). */
.sec4__desc p:last-child{position:relative;left:-9.3px;}
/* [P1-08 재작업] 버튼 행 — 제목묶음(높이249) 아래 40px, 컨테이너(1440) 우측 끝에 정렬.
   노드 Frame 1358(y3152, 컨테이너 기준 상대 289=249+40) · Frame 1200(x1324~1440, 우측 끝 정렬) */
.sec4__nav{margin-top:40px;display:flex;justify-content:flex-end;gap:12px; display: none;}
.sec4__nav-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--c-line);transition:background var(--t-base) linear;}
.sec4__nav-btn--next{background:var(--c-primary);border-color:var(--c-primary);}
.sec4__nav-btn--next img{filter:brightness(0) invert(1);}
.sec4__nav-btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);}
.sec4__nav-btn:hover img{filter:brightness(0) invert(1);}

/* [P1-09 재작업] 카드 슬라이더는 이제 .container 밖(1920 풀블리드) — 노드 Frame 1357(폭1919)
   버튼행 하단(340.5=289+52 상대) 에서 50px 뒤 카드 시작(391=289+102). gap40(카드450+갭40=490 반복,
   4장+3갭=1920). 클래스명(.swiper/.swiper-wrapper/.swiper-slide)은 유지 — 인터랙션·부품 담당 인계 이름 그대로. */
/* .sec4__slider{margin-top:50px;overflow:visible;}
.sec4__list{display:flex;gap:40px;}
.sec4__item{position:relative;flex:0 0 450px;width:450px;height:600px;border-radius:0;background:#f2f0ec;overflow:hidden;}   [R4-B2] 노드 557:3525 각짐(반경 없음) — --r-md 는 결정-32 위반이었다 */
.sec4__slider{margin-top:50px;overflow:visible;}
.sec4__list{display:flex;gap:0;}
.sec4__item{position:relative;flex:0 0 auto;width:auto;height:500px;border-radius:0;background:#f2f0ec;overflow:hidden;}
.sec4__item a {display: block; width: 100%;}
.sec4__item-icon{position:absolute;left:40%;top:60%; transform: translate(-50%, -50%);display:flex;align-items:center;justify-content:center;width:105px;height:105px;border-radius:50%;background:rgba(246,196,69,.7);z-index:2;}   /* [R2-B4] 76→302 — 노드 45:2385 는 사진 프레임(45:2386, top123 카드 기준) 안 top179 에 있다(123+179=302). [R3-B1] 사진 프레임이 카드 x0 부터 시작(아래)하므로 아이콘도 프레임 안 left150 그대로 — 카드 중앙(50%) 기준이 아니었다 */
.sec4__item-icon img{width:57px;height:auto;}
.sec4__item-pic{position:absolute;left:0;top:123px;width:calc(100% - 46px);height:477px;border-radius:0;overflow:hidden;}   /* [R2-B2] 반경 없음. [R3-B1] left 23→0 — 노드 Frame1326(45:2387) 자체가 카드 x0 부터(패딩 없음), 사진 프레임(45:2386)도 그 안 x0 — 카드 왼쪽 끝에 붙어야 했다 */
.sec4__item-pic img{display:block;width:100%;height:100%;object-fit:cover;}
.sec4__item-pic-hover{display:none;}   /* [R5-B2] hover 전용 사진(카드2·3 만) — 시안 hover 프레임(681:531) 이 기본 사진 확대가 아니라 별도로 크롭한 사진을 쓴다 */
.sec4__item-tit{position:absolute;left:0;top:69px;width:calc(100% - 46px);text-align:right;font-size:24px;line-height:33px;font-weight:600;letter-spacing:-.02em;color:#666;z-index:2;}   /* [R3-B1] left 23→0(노드 45:2358) · [R6-F07] lh 22(미지정)→33(150%) · 자간 -2% 추가 */
.sec4__item-tit--hover{display:none;} 
/* [S4-3·확인 사항] hover 전환 — 근거 없음·표준값(모양만) 구간. 확대/슬라이드 연출은 금지 */
.sec4__item:hover .sec4__item-icon,
.sec4__item:hover .sec4__item-tit{opacity:0;}
.sec4__item:hover .sec4__item-pic{left:0;top:0;width:100%;height:100%;border-radius:0;}
.sec4__item:hover .sec4__item-pic:after{content:'';position:absolute;inset:0;background:rgba(27,45,85,.58);}
.sec4__item:hover .sec4__item-pic-base{display:none;}
.sec4__item:hover .sec4__item-pic-hover{display:block;}
.sec4__item:hover .sec4__item-tit--hover{display:block;position:absolute;left:50%;top:50%;width:100%;text-align:center;font-size:30px;line-height:34px;font-weight:600;color:#fff;z-index:2; transform: translate(-50%, -50%);}

/* ─────────────────────────────────────────────
   sec5 — 미용시술 (프레임 681:677 · y4024 h858)
───────────────────────────────────────────── */
/* [번질 곳] sec4 하단(3854)→sec5 상단(4024) 170px 갭 — 프레임 자체 간격(858 이 정확히
   타이틀~바디 끝까지다, 여백 없음). margin-top 으로 처리(sec5__body 는 흰 배경이지만 섹션
   래퍼 자체는 배경 없음 — 페인트 영향 없음). */
.sec5{margin-top:170px;padding:0;}
.sec5 .section-header h2{font-size:var(--fs-30);line-height:45px;font-weight:500;letter-spacing:-.02em;color:#222;position:relative;padding-top:34px;display:inline-block;}   /* [R6-F07 정정] lh 51→45(150%, 시안 실측대로 되돌림) */
.sec5 .section-header h2:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:80px;height:2px;background:var(--c-accent);}   /* [P1-11] title 컴포넌트 공통값 — 노랑 */
.sec5 .section-header{text-align:center;}
.sec5 .section-header p{margin-top:20px;font-family:'Noto Sans KR','Pretendard',sans-serif;font-size:var(--fs-20);line-height:1.7;font-weight:500;letter-spacing:normal;color:#666;}   /* [P1-11] 16→20 · [R6-F07 정정] weight 500(Medium) · 자간 0 · [결정-36] font-family Noto Sans KR 탑재 완료 */

/* [P1-11 재작업 · 노드 681:677] 미용시술 — 왼쪽 740 고정 피처(사진+어둡게+중앙정렬 카피),
   오른쪽 700 세로 리스트(피처와 gap 없음, 740+700=1440). 왼쪽 사진 위 40% 검정 오버레이가
   피그마에 있는데 기존 코드엔 없었다 — 추가. */

.sec5__body{position:relative;margin-top:50px;display:flex; align-items: center;height:675px;border-radius:0;overflow:hidden;background:#fff;}   /* [P1-11] 64→50(노드 681:677 최상위 gap50) · [R2-B2] 노드 681:634 반경 없음 */
.sec5__feature{position:relative;flex:0 0 740px;width:740px;height:100%;}
.sec5__feature:before{content:'';position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.4);}
.sec5__feature picture,.sec5__feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.sec5__feature-txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 40px;color:#fff;text-align:center;}
.sec5__feature-txt h3{position:relative;font-size:var(--fs-22);line-height:33px;font-weight:600;letter-spacing:-.02em;padding-top:34px;}   /* [R6-F07] 자간 -2% 추가(노드 I681:639;36:873) */
.sec5__feature-txt h3:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:80px;height:2px;background:#fff;}
.sec5__feature-txt p{font-size:var(--fs-18);line-height:1.7;letter-spacing:-.02em;}   /* [R6-F07 정정] lh 1.5→1.7(170%, 노드 681:640/669 실측) */

/* 오른쪽 세로 리스트 — 700 폭(1440-740), 항목 간 세로 gap 없음(구분선만). 5항목×284=1420,
   컨테이너675 안에서 활성(idx1 「필러」)이 가운데 오도록 정적 상태에서 translateY(-88.5px)
   (= -(1×284) + (675-284)/2). Swiper 초기화 후에는 JS 가 이 transform 을 대체한다.
   [P5R4-04 정정 · 퍼피-4 · 지워보기로 확정] pitch 가 283 이었던 원인은 간격(gap) 합성이
   아니라 .sec5__item 높이 리터럴 그 자체 — box-sizing:border-box(reset.css:129) 라 border 는
   283 안에 먹혀 들어가고(border 추가·제거 전후 offsetHeight 동일 283 확인) .sec5__item-col 도
   height 를 안 쓴다(align-items:center 로 부모 높이에 맞춰질 뿐). 시안 284 로 1px 올린다.
   [번질 곳] css/responsive.css:337~341(1024 폭 구간)의 .sec5__list translateY(-158.5px) 는
   이 항목이 override 되지 않는 폭이라 284 로 다시 계산해야 한다 — -(1×284)+(420-284)/2=-216px.
   파일 경계상 이 파일은 고치지 않았다(퍼피-2 담당) — 보고서에 인계. */
.sec5__slider{position:relative;flex:1 1 auto;width:1%;height:100%;overflow:hidden;}
.sec5__list{transform:translateY(-88.5px);}
.sec5__item {position: relative;height:284px;opacity:.3;transition:opacity var(--t-base) linear,border-color var(--t-base) linear;border-top:1px solid transparent;border-bottom:1px solid transparent;}
.sec5__item a {position:relative;display:flex;align-items:center;gap:58px; pointer-events: none;}
.sec5__item.is-active,
.sec5__item.swiper-slide-active{opacity:1;border-top-color:rgba(0,0,0,.1);border-bottom-color:rgba(0,0,0,.1);}
.sec5__item.is-active a,
.sec5__item.swiper-slide-active a {pointer-events: all;}
.sec5__item-pic{flex:0 0 315px;width:315px;height:284px;border-radius:0;overflow:hidden;}   /* [R2-B2] 노드 681:663/643/653 반경 없음 · [P5R4-04] 283→284 pitch 정정에 동반 */
.sec5__item-pic img{width:100%;height:100%;object-fit:cover;filter:blur(5px);transition:filter var(--t-base) linear;}
.sec5__item.is-active .sec5__item-pic img,
.sec5__item.swiper-slide-active .sec5__item-pic img{filter:none;}
.sec5__item-col{width:1%;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:54px;}
.sec5__item-txt{width:100%;}
.sec5__item-txt strong{display:block;font-size:var(--fs-22);line-height:33px;font-weight:600;letter-spacing:-.02em;color:#222;margin-bottom:12px;}   /* [R6-F07] 자간 -2% 추가(노드 681:658 등) */
.sec5__item-txt p{font-size:var(--fs-18);line-height:1.7;letter-spacing:-.02em;color:#666;}   /* [R6-F07 정정] lh 1.5→1.7(170%, 노드 681:669 실측) */
.sec5__item-arrow{display:block;align-self:flex-end;margin-right:51px;position:relative;top:2.1px;width:100.5px;height:auto; transition: all .2s linear;}   /* [R6-V04 위치] 노드 681:650 x1528.5 y4613 — 열의 align-items:flex-end 로 화살표까지 오른쪽 끝에 붙어 dx+51 이 났다. margin-right:51 로 안쪽에 앉히고(오른쪽 끝1680−51=1629, 폭100.5 빼면 1528.5 일치). [P5R3-11 정정] top 6→2.1 — R6 수정이 dy −5.7→+3.9 로 반대 방향 과보정했다(재발 유형 H1), 6−3.9=2.1 로 되돌린다. 자산(흐림 구움) 재추출은 별도 담당 */
.sec5__item a:hover .sec5__item-arrow {margin-right: 71px;}

/* ─────────────────────────────────────────────
   sec6 — 영상/미디어 (프레임 557:3457 · y5052 h492)
───────────────────────────────────────────── */
/* [번질 곳] sec5 하단(4882)→sec6 상단(5052) 170px 갭 — 동일 패턴. margin-top. */
.sec6{margin-top:170px;padding:0;overflow:hidden;}   /* [번질 곳 실측] sec4 는 overflow:hidden 이 있어 슬라이드 오버플로가 문서 가로 넘침에 안 잡히는데 sec6 엔 없었다 — 768/375 scrollW 1454 의 실제 원인(sec4 카드는 같은 이유로 육안상 넘쳐 보여도 클리핑돼 있었다) */
.sec6__head{position:relative;display:flex;align-items:center;justify-content:space-between;}
/* [P1-12 재작업 · 노드 557:3459] title 컴포넌트의 가로형(문구 옆 막대) 변형 — 텍스트+gap32+
   막대(노랑,80×2), 세로 가운데 정렬. 기존 코드는 세로형(막대가 위·회색)이었다 */
.sec6 .section-header{display:flex;align-items:center;gap:32px;}
.sec6 .section-header h2{font-size:var(--fs-30);line-height:45px;font-weight:500;letter-spacing:-.02em;color:#070707;white-space:nowrap;}   /* [R6-F07 정정] lh 51→45(150%, 시안 실측대로 되돌림) */
.sec6 .section-header:after{content:'';display:block;flex:0 0 80px;width:80px;height:2px;background:var(--c-accent);}
.sec6__nav{display:flex;gap:12px;}
.sec6__nav-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--c-line);transition:background var(--t-base) linear;}
.sec6__nav-btn--next{background:var(--c-primary);border-color:var(--c-primary);}
.sec6__nav-btn--next img{filter:brightness(0) invert(1);}
/* [회장님 지시 2026-09-16 13:3x · 답 「지금 색으로 두 섹션 통일」] 영상/미디어 좌우 버튼은 과정 섹션 버튼과
   피그마에서 값까지 같은 컴포넌트인데(좌 = 인스턴스 Btn Arrow_L · 우 = 분리 프레임 남색) 이쪽만 hover 가 없었다.
   과정 쪽 값(위 .sec4__nav-btn:hover)과 같은 선언으로 맞춘다. 피그마에는 hover 상태·지시가 없다(전수 재조사
   — 메모의 오버 지시는 GNB 1건뿐 · 캔버스 댓글은 확보하지 못했다) — 색 자체는 확인이 필요한 값이다. TODO */
.sec6__nav-btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);}
.sec6__nav-btn:hover img{filter:brightness(0) invert(1);}

.sec6__slider{margin-top:50px;margin-left:240px;}   /* [R3-B2] .container 밖으로 뺀 뒤 왼쪽만 컨테이너 기준(240)으로 들여쓰기 — 오른쪽은 트여 있어 4번째 카드가 시안처럼 화면 끝에서 잘려 보인다(섹션 자체 overflow:hidden 이 뷰포트 밖 넘침은 계속 막는다) */
.sec6__list{display:flex;}   /* [R6-2·F-03] gap:40px 제거 — Swiper spaceBetween:40 과 이중이라 간격이 80 이 됐다(인터랙션 담당 F-03 완료 후 CSS 쪽 정리) */
.sec6__item{flex:0 0 456px;width:456px;height:390px;}   /* [번질 곳 실측] 시안 카드 프레임은 고정390(내용에 따라 줄지 않음) — 문구가 1줄이라 콘텐츠 높이만으로는 379 */
.sec6__item-pic{display:block;position:relative;width:100%;aspect-ratio:456/303;border-radius:0;overflow:hidden;}   /* [R2-B1] <span> 기본 display:inline 이라 aspect-ratio 가 안 먹어 높이19px 로 찌그러졌었다 — display:block 추가. [R2-B2] 노드 Rectangle 53 반경 없음 */
.sec6__item-pic img:first-child{display:block;width:100%;height:100%;object-fit:cover;}
.sec6__item-yt{position:absolute;right:16px;bottom:16px;width:52px;height:52px;}
.sec6__item-tit{margin-top:24px;font-size:var(--fs-18);line-height:1.7;font-weight:400;letter-spacing:-.02em;color:#070707;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}   /* [TYP-04] · [R6-F11] weight 500→400(Regular) · lh 1.5→1.7(30.6, 170%) — 노드 실측. 문구 4장이 전부 동일(피그마 더미)이고 1줄에서 끝나 카드 실측 379(시안 390, −11) — 문구가 실제로 짧아 나는 차, min-height 강제는 보류(확인 사항) */
.sec6__item-date{display:block;margin-top:9.6px;font-family:'Noto Sans KR','Pretendard',sans-serif;font-size:var(--fs-16);line-height:1.5;font-weight:500;color:#999;}   /* [R6-F07·F11] weight 400→500 · lh→24(150%) · [결정-36] font-family Noto Sans KR 탑재 완료. [P5R3-07 정정 · 노드 I557:3464;1:861] Frame1257 안 제목(y0h31)→날짜(y39) 간격은 39−31=8 인데 R6 이 8→4 로 줄여 dy−5.6(F-11 미해소)이 났다(재발 유형 H1) — 4+5.6=9.6 으로 되돌린다 */

/* ─────────────────────────────────────────────
   sec7 — 오시는 길 (프레임 557:3431 · y5745 h648)
───────────────────────────────────────────── */
/* [P1-13 재작업 · 노드 557:3431] 섹션 배경 옅은 베이지(#f2f0ec, 캡처 대조로 실측 — 흰색 아님) ·
   컨테이너 행(map874+gap72+info493=1439) · info 는 유동폭이 아니라 고정493 */
/* [번질 곳] sec6 하단(5544)→sec7 상단(5745) 201px 갭. margin-top 으로 분리해서 베이지 배경이
   갭 구간까지 번지지 않게 한다(배경은 padding 63/523/63=649 구간에만 칠해야 한다). */
.sec7{margin-top:201px;padding:63px 0;background:#f2f0ec;}
.sec7 > .container{display:flex;gap:72px;}
.sec7__map{flex:0 0 874px;width:874px;border-radius:0;overflow:hidden;position:relative;}   /* [R2-B2] 노드 557:3433 반경 없음 */
.sec7__map img{width:100%;height:auto;display:block;}
.sec7__info{flex:0 0 493px;width:493px;padding-top:51px;}
/* [P1-13] title 가로형(문구+gap32+막대 노랑) — sec6 과 동일 컴포넌트(6:714/6:715) */
.sec7__info .section-header{display:flex;align-items:center;gap:32px;margin-bottom:28px;}   /* 28 = Frame1435 3항목 공통 gap(수정 전 73은 오기) */
.sec7__info .section-header h2{font-size:var(--fs-30);line-height:45px;font-weight:500;letter-spacing:-.02em;color:#070707;white-space:nowrap;}   /* [R6-F07 정정] lh 51→45(150%, 시안 실측대로 되돌림) */
.sec7__info .section-header:after{content:'';display:block;flex:0 0 80px;width:80px;height:2px;background:var(--c-accent);}
.sec7__hours h3{font-size:var(--fs-22);line-height:33px;font-weight:600;letter-spacing:-.02em;color:#222;margin-bottom:15px;}   /* [R6-F08] 자간 -2% 추가 */
.sec7__hours{position:relative;padding-bottom:12px;}
.sec7__hours:after{content:'';position:absolute;left:0;top:48px;width:100%;height:1px;background:var(--c-line);}
.sec7__hours-row{display:flex;align-items:center;gap:20px;font-size:var(--fs-18);line-height:1.7;font-weight:400;letter-spacing:-.02em;}   /* [R6-F08 정정 · coord-diff 재실행] weight 는 실제로 Regular(400) 이 맞았다(스크립트 재확인 — 400→500 은 오독) · 자간 -2% 추가 */
.sec7__hours dl{padding-top:15px;display:flex;flex-direction:column;gap:6px;}   /* [R2-B5] 63→15 — h3(0-33)+margin15(=48, 노드 Line15 y48 지점) 뒤에 15 만 더하면 행이 63 에서 시작한다. 63 은 「프레임 맨위부터의 절대거리」였는데 h3 margin-bottom 15 와 이중으로 더해져 행 이하 전부(주소·전화)가 48px 씩 밀렸었다 */
.sec7__hours-row dt{flex:0 0 100px;color:#222;}
.sec7__hours-row dd{color:#222;white-space:nowrap;}
/* [P5R3-05 정정] 노드 557:3450 실측 — 「점심」행만 다음 행(평일→토요일)과 다른 간격이었다(F-08 1차 −12.4→이번 −2.3 로 좁혀졌으나 잔존). gap 6 은 그대로 두고 이 행에만 2.3 을 더한다(번짐 없음 — 뒤 두 요소 없음). */
.sec7__hours-row:nth-child(3){margin-top:2.3px;}
.sec7__hours-note{margin-top:14.8px;font-size:var(--fs-14);line-height:1.6;font-weight:500;letter-spacing:-.02em;color:#666;}   /* [R6-F08] 15→3(dy 보정) · weight 400→500 · 자간 -2% 추가(coord-diff 재확인). [P5R3-05 정정 · 노드 557:3450] F-08 미해소 dy−14.1(1차 −12.4 보다 벌어짐, 재발 H1) — 3+14.1=17.1 로 1차 시도 후 coord-diff 재실행(dy+2.3 잔차) → 17.1−2.3=14.8 */
/* [P5R3-05 정정 · 번짐 확인] 위 note margin-top 을 늘리면 뒤따르는 .sec7__addr 도 같은 양만큼
   함께 밀린다(정상 흐름) — note 는 1차 F-08 로 원래 −14.1 어긋나 있었지만 .sec7__addr 는
   원래(수정 전) 이미 시안과 거의 일치(dy −1.2)했다. note 만 고치고 addr margin-top 을 그대로
   두면 addr 가 note 가 밀린 양(+14.8−3=11.8)만큼 함께 밀려 새로 어긋난다(coord-diff 실측 dy+15.2) —
   addr margin-top 에서 그만큼 되돌려 뺀다(28→15.1) — 번지는 곳까지 함께 잰 값. */
.sec7__addr{margin-top:15.1px;}   /* [P1-13] 73 → 28 — 수정 전 값이 오시는 길 섹션 높이 +109 초과의 절반을 차지했다. [P5R3-05 정정] note 밀림 보정 28→15.1 */
.sec7__addr-txt{font-size:var(--fs-20);line-height:1.6;font-weight:600;letter-spacing:-.02em;color:#222;margin-bottom:16px;}   /* [R6-F08] 자간 -2% 추가 */
.sec7__tel{display:flex;align-items:center;gap:8px;}
.sec7__tel a{font-size:var(--fs-30);line-height:1.5;font-weight:500;letter-spacing:-.02em;color:#222;}   /* [R6-F08] 자간 -2% 추가 */
/* [CSS-02] 1440 미만 안전장치는 main.css 에 두지 않는다 — css/responsive.css 로 옮김
   (map874+info493 고정폭 합(1439) 이 1440 미만 컨테이너에서 넘치는 것을 막는 규칙) */

/* ─────────────────────────────────────────────
   section-header 공통(피그마 title 컴포넌트 6:539 — 밑줄 42×2 + 30px 타이틀)
───────────────────────────────────────────── */
.section-header{margin-bottom:0;}

/* ═════════════════════════════════════════════
   상태 — 인터랙션·부품 담당. 레이아웃(좌표·크기·정렬)은 위 블록을 건드리지 않고
   여기에만 더한다. 전환 시간·이징은 인터랙션·부품 담당 소관이 아니다 — 골격 표준값만 쓴다.
═════════════════════════════════════════════ */

/* ~21·V-A] 히어로 영상 — PLAYING 신호가 오기 전까지 iframe 을 시각적으로 숨긴다.
 frame 은 z-index 로 poster 위에 있으므로(main.css 상단 .visual__frame), opacity 로 감추지
 않으면 로딩 화면·file:// 오류 153 화면이 poster 를 가린다(02_ §3-3). 표준 전환값(overlay)만 —
 새 연출 없음. */
.visual__frame{opacity:0;transition:opacity var(--t-overlay) linear;}
.visual.is-playing .visual__frame{opacity:1;}

/* [S4-2·S6-2·확인 사항] 이 프로젝트의 좌우 버튼 컴포넌트(Arrow_L·Arrow_R·Arrow_More)는 피그마에
   disabled variant 가 없다(02_ 참고동작해석서 §4 S4-2 실측) — Swiper 가 기본으로 입히는 35% 흐림은
   피그마에 없는 상태 모양이라 FIG-06 관점에서 만들지 않는다. CSS-08 순서 — ① 변수: 확인했으나
   --swiper-navigation-color/size/offset 뿐, 비활성 투명도 변수는 없다(grep 확인, 검사기 신뢰 X 아님
   직접 확인) ② 선택자 특이도로 덮는다(：이 규칙이 로드 순서상 뒤에 오고 특이도도 같거나 높다) —
   !important 없음. */
.sec4__nav-btn.swiper-button-disabled,
.sec6__nav-btn.swiper-button-disabled{opacity:1;cursor:pointer;pointer-events:auto;}

/* [S4-1·681:531] 과정 카드 hover 의 터치 대응 — main.css 상단 .sec4__item:hover 규칙과 값이
   동일하다(고치지 않고 복제). hover:none 환경에서만 js/main.js 가 .is-touch-active 를 토글한다 —
   데스크톱 마우스는 기존 :hover 그대로 동작하고 이 규칙과 무관하다. */
.sec4__item.is-touch-active .sec4__item-icon,
.sec4__item.is-touch-active .sec4__item-tit{opacity:0;}
.sec4__item.is-touch-active .sec4__item-pic{left:0;top:0;width:100%;height:100%;border-radius:0;}
.sec4__item.is-touch-active .sec4__item-pic:after{content:'';position:absolute;inset:0;background:rgba(27,45,85,.58);}
.sec4__item.is-touch-active .sec4__item-tit--hover{display:block;position:absolute;left:0;top:276px;width:100%;text-align:center;font-size:var(--fs-28);line-height:34px;font-weight:600;color:#fff;z-index:2;}
.sec4__item.is-touch-active .sec4__item-pic-base{display:none;}
.sec4__item.is-touch-active .sec4__item-pic-hover{display:block;}

/* ═════════════════════════════════════════════
   모션 — 좌표·크기·정렬 값은 위 블록을 그대로 참조만 한다(재선언·재조정 없음).
   전환 시간·곡선만 더한다. 근거 — 결정-31(전환 시간은 골격 표준값)
   · 참고 동작 해석서 §4 S4-3(모양은 있음 · 시간·곡선 없음 — 표준값 구간).
═════════════════════════════════════════════ */

/* [MOT-02] 섹션 노출 AOS 값은 js/main.js AOS.init(duration:800,easing:'ease-out-cubic',
   offset:100,once:true,disable:reduced-motion) 한 곳에 전 섹션 공통 — 여기서 섹션별로
   다시 선언하지 않는다(피그마 근거 없음 · 새 연출 금지, 결정-31). */

/* [S4-3·681:531] 과정 카드 hover — 모양은 위 블록(.sec4__item:hover)·터치 대응
   (.is-touch-active) 값 그대로. 여기서는 전환 시간만 추가한다(근거 없음 · 표준값 구간,
   확대/슬라이드 같은 새 연출은 걸지 않았다).
   - 아이콘·기본 제목(opacity)은 이미 애니메이션 가능한 값이라 시간만 추가하면 된다(기본값).
   - 사진 박스는 기존 구조가 left/top/width/height/border-radius 로 짜여 있다(레이아웃을
     흔드는 속성 — 매 프레임 재계산 유발). transform(scale)으로 바꾸면 60fps 에 유리하지만
     좌표 구조 자체를 다시 짜는 일이라 이 작업 범위(좌표·구조 불가침) 밖이다 — 값은 그대로 두고
     시간만 추가한다(불가피 — 사유 기록). 카드 자체가 사진 성격이라 이미지 구간 표준값(.3s). */
.sec4__item-icon,
.sec4__item-tit{transition:opacity var(--t-base) linear;}
.sec4__item-pic{transition:left var(--t-slow) linear,top var(--t-slow) linear,width var(--t-slow) linear,height var(--t-slow) linear,border-radius var(--t-slow) linear;}

/* 어두운 오버레이(::after, 장식용 빈 콘텐츠라 접근성 트리에 텍스트가 없다)는 opacity 토글로
   페이드를 추가한다 — 최종 모양(불투명도 rgba(27,45,85,.58))은 위 블록 값과 동일, 시간만 추가.
   hover 전용 제목(.sec4__item-tit--hover)은 여기서 손대지 않는다 — display:none/block 은
   transition 이 불가능한 이진 속성이라, opacity 토글로 바꾸면 이 텍스트가 항상 접근성 트리에
   남아 카드 제목이 스크린리더에 중복 낭독된다(aria-hidden 부여가 필요 — HTML 은 data-aos 속성만
   허용된 범위라 여기서 하지 않았다). 그대로 스냅 전환 — [확인 필요]로 보고. */
.sec4__item-pic:after{content:'';position:absolute;inset:0;background:rgba(27,45,85,.58);opacity:0;transition:opacity var(--t-base) linear;pointer-events:none;}
.sec4__item:hover .sec4__item-pic:after,
.sec4__item.is-touch-active .sec4__item-pic:after{opacity:1;}

/* ═════════════════════════════════════════════
 합류 수정 2 — . 모션 가 위에서 [확인 필요]로 남긴
 .sec4__item-tit--hover 의 display 토글을 접근성 범위 밖 전제로 opacity 전환으로
 바꾼다. 모양·좌표·문구는 원래 규칙과 완전히 같다(그대로 복제) — 이진 속성(display)만 걷어내고
 opacity+표준값(.2s, 다른 hover 요소와 동일 var(--t-base))으로 대체한다. aria-hidden 은 붙이지
 않는다(지시 그대로 — 접근성은 이 프로젝트 범위 밖). 뒤에 오는 이 블록이 앞의 두 규칙
 (위 "상태" · "모션" 블록의 .sec4__item-tit--hover)보다 특이도가 같거나 높아 확실히 이긴다.
═════════════════════════════════════════════ */
.sec4__item-tit--hover{
	display:block;position:absolute;left:0;top:276px;width:100%;text-align:center;
	font-size:var(--fs-28);line-height:34px;font-weight:600;color:#fff;z-index:2;
	opacity:0;pointer-events:none;transition:opacity var(--t-base) linear;
}
.sec4__item:hover .sec4__item-tit--hover,
.sec4__item.is-touch-active .sec4__item-tit--hover{opacity:1;}