@charset "utf-8";
/* =====================================================================
   WT 프로모션 페이지 — 워드프레스 삽입용 (build.py 자동 생성)
   원본 : promotion/web/style.css   ※ 이 파일을 직접 고치지 마세요
   ===================================================================== */

/* =======================================================================
   [1] 테마 간섭 차단 — 반드시 본문 CSS 보다 먼저 위치할 것
   Salient 테마가 div / section / h1 / strong / button / ul li / body p 같은
   "태그 선택자"로 값을 넣는데, 우리가 선언하지 않은 속성은 스코프와 무관하게
   그대로 스며든다. 그래서 브라우저 기본값으로 되돌린다.
   (2026-08-30 검수에서 6건 발견 : .btn padding / body 18px / h1 색·굵기 /
    strong 폰트 / button border-radius)
   ======================================================================= */
#wt-promo{
  font-size:16px;
  word-break:normal; word-spacing:normal;
  text-transform:none; font-style:normal;
}
#wt-promo *, #wt-promo *::before, #wt-promo *::after{
  word-break:normal; word-spacing:normal;
  text-transform:none; font-style:normal;
  float:none; text-indent:0;
}
#wt-promo h1, #wt-promo h2, #wt-promo h3,
#wt-promo h4, #wt-promo h5, #wt-promo h6{
  color:inherit; font-weight:700; font-family:inherit;
  letter-spacing:inherit; line-height:inherit; margin:0; padding:0;
}
#wt-promo strong, #wt-promo b{ font-family:inherit; font-weight:700; color:inherit; }
#wt-promo em, #wt-promo i{ font-family:inherit; font-style:italic; }
#wt-promo del, #wt-promo s{ font-family:inherit; }
#wt-promo ul, #wt-promo ol, #wt-promo li{ list-style:none; margin:0; padding:0; }
#wt-promo a, #wt-promo .btn{
  padding:0; margin:0; border:0; background:none; box-shadow:none;
  text-decoration:none; color:inherit; font-family:inherit;
  letter-spacing:inherit; line-height:inherit; text-transform:none;
}
/* 버튼 : Salient 의 body[data-button-style] button{border-radius:200px !important}
   폰트·패딩은 브라우저 기본값(Arial 13.3333px / 1px 6px)을 살려야 원본과 같아진다. */
#wt-promo button{
  border-radius:0 !important;
  font:400 13.3333px/normal Arial;
  letter-spacing:normal; text-transform:none;
  margin:0; box-shadow:none;
}
#wt-promo .vplayer__play, #wt-promo .lbox__x, #wt-promo .lbox__nav{
  border-radius:50% !important; padding:1px 6px;
}
#wt-promo .lbox__x{ font-size:26px; line-height:26px; }
#wt-promo .vplayer__btn{ padding:0; }
#wt-promo p, #wt-promo figure, #wt-promo blockquote{ margin:0; padding:0; }
#wt-promo img{ box-shadow:none; border:0; }


/* =======================================================================
   WT-METHODE  두피/탈모 검진 프로모션 페이지
   PSD(2500 x 15000) 기준 1/2 스케일로 재구성. PC + 모바일 반응형.
   ======================================================================= */

/* 잉크립퀸드체 (더페이스샵) — PSD의 THEFACESHOP 서체와 동일
   ※ 라이선스: 장폭/평 변형, 기울기(italic) 적용 금지 */
@font-face{
  font-family:'InkLiquid';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
#wt-promo{
  /* palette (PSD 스포이드 값) */
  --bg:        #E9E6E1;
  --card:      #EEEDEB;
  --dark:      #083D35;
  --cta:       #0A4237;
  --tag:       #D2C2B2;
  --ink:       #000000;
  --ink-soft:  #111111;
  --accent:    #FF0000;

  /* type scale : PSD px ÷ 2 */
  --fs-hero:        70px;
  --fs-hero-sub:    27.7px;
  --fs-tag:         12.4px;
  --fs-en:          10.8px;
  --fs-btn:         26.5px;
  --fs-eyebrow:     30px;
  --fs-title:       73.5px;
  --fs-body:        19.3px;
  --fs-note:        12.1px;
  --fs-pt-eyebrow:  16.9px;
  --fs-pt-name:     45px;
  --fs-pt-desc:     16px;
  --fs-price:       28.9px;
  --fs-rec:         13px;
  --fs-card-t:      19.3px;
  --fs-card-d:      14.4px;

  /* geometry */
  --r-photo:  17px;
  --r-card:   18.5px;
  --r-btn:    36.5px;
  /* 전체 섹션 공통 폭 (2026-08-30: 940 / 1180 이원화 -> 1100 통일) */
  --wrap:     1100px;
  --wrap-wide:1100px;

  /* fonts */
  --f-display: "Paperlogy", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-text:    "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --f-num:     "Pretendard", "Noto Sans KR", sans-serif;
  --f-square:  "NanumSquare", "Noto Sans KR", sans-serif;
  --f-hand:    "InkLiquid", "Noto Sans KR", sans-serif;
}

/* ---------- reset ---------- */
#wt-promo *, #wt-promo *::before, #wt-promo *::after{ box-sizing:border-box; }
#wt-promo{ -webkit-text-size-adjust:100%; }
#wt-promo{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-text); font-weight:400;
  letter-spacing:-0.04em; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* width/height 속성으로 공간을 미리 예약해 레이아웃 시프트(CLS) 방지 */
#wt-promo img{ display:block; max-width:100%; height:auto; }
#wt-promo ul, #wt-promo ol{ list-style:none; margin:0; padding:0; }
#wt-promo h1, #wt-promo h2, #wt-promo h3, #wt-promo p, #wt-promo figure{ margin:0; }
#wt-promo a{ text-decoration:none; color:inherit; }
#wt-promo del{ text-decoration:none; }

/* ---------- shared blocks ---------- */
#wt-promo .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
#wt-promo .wrap--wide{ max-width:var(--wrap-wide); }

#wt-promo .eyebrow{
  font-family:var(--f-display); font-weight:800;
  font-size:var(--fs-eyebrow); letter-spacing:-0.02em; line-height:1.09;
  text-align:center;
}
#wt-promo .title{
  font-family:var(--f-display); font-weight:800;
  font-size:var(--fs-title); letter-spacing:-0.02em; line-height:1.09;
  text-align:center; margin-top:2px;
}
#wt-promo .body{
  font-size:var(--fs-body); line-height:1.5; letter-spacing:-0.04em;
  text-align:center;
}
#wt-promo .title + .body{ margin-top:28px; }
#wt-promo .w400{ font-weight:400 } #wt-promo .w500{ font-weight:500 } #wt-promo .w800{ font-weight:800 }

/* CTA button ------------------------------------------------------------ */
#wt-promo .btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:376px; max-width:100%; height:83px;
  background:var(--cta); color:#fff; border-radius:var(--r-btn);
  font-family:var(--f-display); font-size:var(--fs-btn);
  letter-spacing:-0.02em; font-weight:300;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#wt-promo .btn b{ font-weight:700; }
#wt-promo .btn:hover{ background:#0d5245; transform:translateY(-2px);
            box-shadow:0 10px 26px rgba(8,61,53,.28); }
#wt-promo .btn:active{ transform:translateY(0); }

/* ============================ HERO ===================================== */
/* HERO
   시안 캔버스는 2500x1581(design) = 1250x790.5(css) 이다.
   배경만 화면 끝까지 깔고, 구성 요소(비주얼/카피)는 1250px 캔버스 안에
   시안 좌표 그대로 %로 배치한다. 이렇게 해야 시안과 1:1로 일치한다. */
#wt-promo .hero{
  position:relative; width:100%;
  background:url("img/hero-bg.jpg") center/cover no-repeat;
  overflow:hidden;
}
/* 비주얼은 .hero__inner(= 다른 섹션과 동일한 wrap) 안에 두어
   왼쪽 끝이 본문 콘텐츠 좌측 라인과 정확히 맞도록 한다.
   높이는 히어로 높이의 105.76%(시안 1672/1581) = 80vh x 1.0576 = 84.6vh,
   폭은 84.6vh x 1336/1672 = 67.6vh.
   56% 상한은 세로로 긴 창에서 비주얼이 카피를 덮는 것을 막는다. */
/* 시안 : x=44 / w=668 / h=836  (캔버스 1250x790.5 기준)
   → left 44/1250=3.52%,  height 836/790.5=105.76% (아래로 흘러넘침) */
#wt-promo .br-m{ display:none; }          /* 모바일 전용 줄바꿈 */
#wt-promo .hero picture{ display:contents; }   /* picture 래퍼가 배치에 영향 주지 않도록 */
#wt-promo .hero__visual{
  position:absolute; left:3.52%; top:0;
  width:auto; height:105.76%; z-index:1;
  pointer-events:none;
}
/* 아이콘은 CSS 높이가 우선하므로 width 속성을 무효화 */
#wt-promo .grid8__ico img{ width:auto !important; }
/* 히어로 내부도 본문과 같은 wrap 을 쓴다. 배경만 풀블리드. */
/* 시안 캔버스 = 배치 기준 박스. 비율을 고정해 세로 위치까지 시안과 맞춘다. */
#wt-promo .hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:1250px; margin-inline:auto;
  aspect-ratio:2500/1581;
  min-height:520px;
}
#wt-promo .hero__copy{
  /* 시안 기준 카피 블록의 세로 중심 = 히어로 높이의 53.45%.
     중심 기준으로 잡아야 히어로 높이가 바뀌어도 위아래 여백 비율이 유지된다. */
  /* 61% = 제목(405px)의 오른쪽 끝이 wrap 콘텐츠 우측 라인(1076px)과 맞는 지점.
     즉 비주얼 왼쪽 = wrap 좌측, 제목 오른쪽 = wrap 우측으로 양쪽이 본문 그리드에 정렬된다. */
  /* 시안 : 제목 x=694 → 694/1250 = 55.52%
     카피 블록 세로 중심 = (제목 상단 228 + 버튼 하단 626)/2 = 427 → 427/790.5 = 54.02% */
  position:absolute; left:55.52%; top:54.02%; transform:translateY(-50%);
  width:44.48%;
  z-index:2;
}
#wt-promo .hero__title{
  font-family:var(--f-display); font-size:var(--fs-hero);
  line-height:1.09; letter-spacing:-0.02em;
}
#wt-promo .hero__sub{
  margin-top:26px; font-size:var(--fs-hero-sub);
  line-height:1.175; letter-spacing:-0.02em; font-weight:400;
}
#wt-promo .hero__sub b{ font-weight:700; }

#wt-promo .hero__tags{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:34px; }  /* 시안 간격 30px */
#wt-promo .hero__tags li{
  font-size:var(--fs-tag); letter-spacing:-0.02em; font-weight:500;
  /* PSD의 밑줄 하이라이트 바 (#D2C2B2) 재현 */
  background:linear-gradient(var(--tag),var(--tag)) 0 88%/100% 42% no-repeat;
  padding:0 2px 2px;
}
#wt-promo .hero__tags b{ font-weight:700; font-family:var(--f-square); }
#wt-promo .hero__tags .sep{ margin:0 6px; }
#wt-promo .hero__tags .tight{ letter-spacing:-0.06em; }
#wt-promo .hero__en{
  margin-top:14px; font-size:var(--fs-en); font-weight:350;
  color:var(--ink-soft); letter-spacing:0;
}
#wt-promo .hero .btn{ margin-top:26px; }   /* 시안 간격 27px */

/* ============================ INTRO ==================================== */
/* 여백은 PSD 좌표 기준(design px ÷ 2)으로 산출 */
#wt-promo .intro{ padding:169px 0 144px; text-align:center; }
/* PSD: THEFACESHOP 147px(design) = 73.5px(css), tracking -20
   웹폰트(InkLiquid) 글꿴 폭이 원본 대비 2% 넓어 72.3px로 보정
   → 시안의 텍스트 폭 545px(css)와 일치 (균등 축소이므로 장폭 변형 아님) */
#wt-promo .intro__title{
  font-family:var(--f-hand); font-weight:400;
  font-size:72.3px; line-height:1.05; letter-spacing:-0.02em;
  font-style:normal;                 /* 라이선스상 기울기 적용 금지 */
}
#wt-promo .intro .body{ margin-top:22px; }
#wt-promo .intro .body + .body{ margin-top:29px; }
#wt-promo .ast{ color:var(--accent); font-size:.63em; vertical-align:.35em; }
#wt-promo .note{
  margin-top:62px; font-size:var(--fs-note);
  letter-spacing:-0.04em; text-align:center;
}

/* ============================ MENU ===================================== */
#wt-promo .menu{ padding-bottom:130px; }
#wt-promo .pt{
  /* wrap 1100(콘텐츠 1052) 기준. 시안의 강제 줄바꿈 중 가장 긴 줄이 567px이므로
     텍스트 열에 570px을 확보하고 남는 폭을 사진에 준다. (시안 사진 폭은 499px) */
  display:grid; grid-template-columns:438px 1fr; gap:44px;
  align-items:center; margin-bottom:40px;
}
#wt-promo .pt:last-child{ margin-bottom:0; }
/* 카드 사이 간격은 PSD 사진 상단 y좌표(2854/3556/4252/4925)를 실측한 값 그대로.
   원본 시안 자체가 균일하지 않아 카드별로 다르다. 균일하게 쓰려면 아래 3줄을 지우고
   .pt{ margin-bottom:31px } 로 통일하면 된다. */
/* PSD 실측값(37 / 34 / 22.5)의 1.5배 */
#wt-promo .pt:nth-of-type(1){ margin-bottom:55.5px; }
#wt-promo .pt:nth-of-type(2){ margin-bottom:51px; }
#wt-promo .pt:nth-of-type(3){ margin-bottom:33.5px; }
#wt-promo .pt__img{ border-radius:var(--r-photo); overflow:hidden; }
#wt-promo .pt__img img{ width:100%; aspect-ratio:998/628; object-fit:cover;
  margin-bottom:0; display:block; }  /* 테마의 img margin-bottom:15px 제거 — 남으면 하단 라운드가 안 보인다 */
/* 행간/자간은 PSD 텍스트 레이어의 잉크 박스(y좌표·행 피치·폭)를 실측해 맞춘 값.
   단행 요소는 line-height:1 로 두어 half-leading이 간격을 밀지 않게 한다. */
#wt-promo .pt__eyebrow{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--fs-pt-eyebrow); letter-spacing:-0.02em; line-height:1;
}
#wt-promo .pt__name{
  margin-top:5.5px; font-family:var(--f-display); font-weight:800;
  font-size:var(--fs-pt-name); letter-spacing:-0.02em; line-height:1;
}
#wt-promo .pt__desc{
  margin-top:5px; font-size:var(--fs-pt-desc);
  line-height:24.5px;          /* PSD 행 피치 49px ÷ 2 */
  letter-spacing:-0.053em;     /* 웹폰트 치환분 보정: PSD 실측 폭에 맞춤 */
}
#wt-promo .pt__price{
  margin-top:20.5px; font-family:var(--f-num);
  font-size:var(--fs-price); letter-spacing:-0.02em; line-height:1;
}
/* PSD에서 두 금액 사이는 공백 1칸뿐. 별도 margin 없음 */
#wt-promo .pt__price del{
  font-weight:100; color:var(--ink);
  text-decoration:line-through; text-decoration-thickness:1px;
}
#wt-promo .pt__price strong{ font-weight:700; }
#wt-promo .pt__rec{
  margin-top:6.5px; font-size:var(--fs-rec);
  font-weight:300;
  line-height:21px;            /* PSD 행 피치 42px ÷ 2 */
  letter-spacing:-0.053em;     /* 웹폰트 치환분 보정 */
}
/* PSD에는 '추천 두피' 뒤에 공백 2칸. margin 대신 공백으로 간격을 만든다. */
#wt-promo .pt__rec b{ font-weight:700; }
/* FREE 카드는 설명이 1줄이라 PSD상 가격까지 간격이 6px(=디자인 12px) 더 넓다 */
#wt-promo .pt--free .pt__price{ margin-top:26.5px; }
#wt-promo .pt__rec-indent{ padding-left:3.6em; display:inline-block; }

/* ======================== CHECK ITEMS (8) ============================== */
#wt-promo .check{ padding:122px 0 122px; }
#wt-promo .grid8{
  display:grid; grid-template-columns:repeat(4,1fr); gap:15px;
  margin-top:31px;
}
#wt-promo .grid8 li{
  background:var(--card); border-radius:var(--r-card);
  aspect-ratio:436/513; padding:22px 12px 26px;
  /* grid item 기본값 min-width:auto 때문에 설명문 최소폭만큼 칸이 벌어져
     좁은 태블릿(≈820px)에서 그리드가 넘쳤다. */
  min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
}
#wt-promo .grid8__ico{
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; margin-bottom:10px;
}
/* 아이콘은 PSD 실측 잉크 높이(≈250 design px)를 그대로 반영 */
#wt-promo .grid8__ico img{ height:120px; width:auto; }
#wt-promo .grid8 li:nth-child(7) .grid8__ico img{ height:96px; }
#wt-promo .grid8 b{
  font-weight:900; font-size:var(--fs-card-t);
  letter-spacing:-0.04em; line-height:1.35;
}
#wt-promo .grid8 em{
  font-style:normal; font-weight:400; font-size:var(--fs-card-d);
  letter-spacing:-0.04em; line-height:1.35; margin-top:3px;
}

/* ============================ PROCESS ================================== */
#wt-promo .process{ padding:122px 0 170px; }
/* 케어 프로세스 영상 (SCIENCE 플레이어와 동일 포맷 680px) */
#wt-promo .process__video{ max-width:900px; margin:38px auto 0; }   /* 680 → 900 확대 */
/* 영상이 주인공이 되도록 STEP 썸네일은 축소 */
#wt-promo .steps{ max-width:900px; margin-inline:auto; }   /* 영상 폭과 맞춤 */
#wt-promo .steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:27px; text-align:center;
}
#wt-promo .steps img{
  width:100%; aspect-ratio:750/520; object-fit:cover;
  border-radius:var(--r-photo); margin-bottom:20px;
}
/* 캐러셀 점 인디케이터는 모바일에서만 (PC 는 3단 그리드라 불필요) */
#wt-promo .steps__dots{ display:none; }

#wt-promo .steps__no{
  display:block; font-weight:500; font-size:var(--fs-rec);
  letter-spacing:-0.04em;
}
#wt-promo .steps b{
  display:block; font-weight:900; font-size:var(--fs-card-t);
  letter-spacing:-0.04em; line-height:1.25;
}
#wt-promo .steps em{
  display:block; margin-top:10px; font-style:normal; font-weight:400;
  font-size:var(--fs-card-d); letter-spacing:-0.04em; line-height:1.42;
}

/* ============================ SCIENCE ================================== */
#wt-promo .science{
  background:var(--dark); color:#fff;
  padding:128px 0 153px; text-align:center;
}
/* 배경 이미지 — 블러 + 투명도 50%.
   배경에만 블러를 걸어야 하므로 ::before 로 따로 깔고, 본문은 그 위에 둔다.
   isolation:isolate 로 쌓임 맥락을 만들어 z-index:-1 이 섹션 배경색 위·본문 아래에 오게 한다.
   inset:-40px 는 블러 때문에 가장자리가 비치는 것을 막기 위한 여유. */
#wt-promo .science{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#wt-promo .science::before{
  content:'';
  position:absolute;
  inset:-40px;
  background:url("img/science-bg.jpg") center center / cover no-repeat;
  filter:blur(12px);
  opacity:.3;
  z-index:-1;
  pointer-events:none;
}
#wt-promo .science > .wrap{ position:relative; z-index:1; }

#wt-promo .science .eyebrow, #wt-promo .science .title, #wt-promo .science .body{ color:#fff; }
#wt-promo .science .body{ font-weight:350; }
#wt-promo .science__fig{ margin:25px auto 30px; max-width:680px; }
#wt-promo .science__fig img{ width:100%; aspect-ratio:1359/764; border-radius:4px; }

/* ---------- 자체 영상 플레이어 (YouTube 임베드를 감싸 UI 를 직접 그림) ----------
   유튜브 기본 컨트롤(controls=0)을 끄고, iframe 위에 투명 레이어를 덮어
   유튜브 UI 가 노출되지 않게 한 뒤 아래 바를 직접 그린다.
   재생이 끝나면 다시 포스터로 돌아가 유튜브 종료화면(관련영상)을 막는다. */
#wt-promo .vplayer{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-photo); overflow:hidden;   /* 다른 이미지와 동일 radius */
  /* 배경을 검정으로 두면 16:9 계산에서 생기는 0.5px 잔여분이
     하단에 검은 1px 선으로 보인다. 검정은 영상 영역(.vplayer__frame)에만 준다. */
  background:transparent;
}
#wt-promo .vplayer__poster{
  /* 680 x (9/16) = 382.5px 처럼 소수 높이가 나오면 렌더링 반올림으로
     아래에 1px 틈이 생긴다. 1px 더 그려서 틈을 없앤다 (object-fit:cover 라 잘림 없음). */
  position:absolute; inset:0; z-index:1; width:100%!important; height:calc(100% + 1px)!important;
  object-fit:cover; border-radius:0!important; aspect-ratio:auto!important;
  transition:transform .5s ease, opacity .3s ease;
}
#wt-promo .vplayer:hover .vplayer__poster{ transform:scale(1.02); }
/* 재생 직후 유튜브 상단 타이틀 바가 잠깐 스치는 것을 포스터로 가린다 (0.5s 지연) */
#wt-promo .vplayer.is-playing .vplayer__poster{ opacity:0; pointer-events:none; transition:opacity .3s ease .5s; }

/* 포스터 하단 그라데이션 — 밝은 썸네일에서도 라벨이 읽히게 한다.
   (케어 프로세스 영상처럼 흰 책상이 깔린 장면에서 흰 글씨가 묻히던 문제) */
#wt-promo .vplayer::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:48%;
  background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:2; transition:opacity .3s ease;
}
#wt-promo .vplayer.is-playing::after{ opacity:0; }

#wt-promo .vplayer__frame{ position:absolute; inset:0; background:#000; opacity:0; transition:opacity .35s ease .45s; }
#wt-promo .vplayer.is-playing .vplayer__frame{ opacity:1; }
#wt-promo .vplayer__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 유튜브 UI 클릭/노출 차단용 레이어.
   일시정지 시 유튜브가 제목·로고·관련영상 오버레이를 띄우므로 브랜드 색으로 덮는다. */
#wt-promo .vplayer__hit{
  position:absolute; inset:0; z-index:3; display:none; cursor:pointer;
  background:rgba(8,61,53,0); transition:background .25s ease;
}
#wt-promo .vplayer.is-playing .vplayer__hit{ display:block; }
#wt-promo .vplayer.is-paused  .vplayer__hit{ background:rgba(8,61,53,.88); }

/* 중앙 재생 버튼 */
#wt-promo .vplayer__play{
  position:absolute; left:50%; top:50%; z-index:6; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--cta);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 26px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.34,1.4,.5,1), background .22s;
}
#wt-promo .vplayer__play::after{
  content:''; position:absolute; inset:-11px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
}
#wt-promo .vplayer__play svg{ width:28px; height:32px; margin-left:5px; fill:currentColor; }
#wt-promo .vplayer:hover .vplayer__play{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
#wt-promo .vplayer.is-playing .vplayer__play{ display:none; }
/* 일시정지 상태에서는 우리 재생 버튼을 다시 띄워 유튜브 UI 를 완전히 가린다 */
#wt-promo .vplayer.is-playing.is-paused .vplayer__play{ display:flex; }

/* 라벨 */
#wt-promo .vplayer__label{
  position:absolute; left:22px; bottom:20px; z-index:4;
  color:#fff; text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.55);
  pointer-events:none; transition:opacity .3s;
}
#wt-promo .vplayer__label b{ display:block; font-size:15px; font-weight:700; letter-spacing:-0.03em; }
#wt-promo .vplayer__label span{ display:block; margin-top:3px; font-size:12px; opacity:.92; font-weight:400; }
#wt-promo .vplayer.is-playing .vplayer__label{ opacity:0; }
#wt-promo .vplayer.is-paused  .vplayer__label{ opacity:1; bottom:58px; }  /* 컨트롤 바와 겹치지 않게 */

/* 하단 컨트롤 바 */
#wt-promo .vplayer__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:none; align-items:center; gap:12px;
  padding:30px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  opacity:0; transition:opacity .25s;
}
/* 재생 중에는 항상 보이게 (자체 플레이어라는 인상을 유지) */
#wt-promo .vplayer.is-playing .vplayer__bar{ display:flex; opacity:1; }
#wt-promo .vplayer__btn{
  flex:none; width:26px; height:26px; padding:0; border:0; background:none;
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:.9;
}
#wt-promo .vplayer__btn:hover{ opacity:1; }
#wt-promo .vplayer__btn svg{ width:100%; height:100%; fill:currentColor; }
#wt-promo .vplayer__prog{
  flex:1; height:16px; display:flex; align-items:center; cursor:pointer; position:relative;
}
#wt-promo .vplayer__prog::before{
  content:''; position:absolute; left:0; right:0; height:3px; border-radius:2px;
  background:rgba(255,255,255,.3);
}
#wt-promo .vplayer__cur{
  position:absolute; left:0; height:3px; width:0; border-radius:2px; background:#fff;
}
#wt-promo .vplayer__cur::after{
  content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#fff;
  opacity:0; transition:opacity .2s;
}
#wt-promo .vplayer__prog:hover .vplayer__cur::after{ opacity:1; }
#wt-promo .vplayer__time{
  flex:none; color:#fff; font-size:11.5px; font-variant-numeric:tabular-nums;
  letter-spacing:0; opacity:.85; font-weight:400;
}
@media (max-width:768px){
  #wt-promo .vplayer__play{ width:62px; height:62px; }
  #wt-promo .vplayer__play svg{ width:21px; height:24px; }
  #wt-promo .vplayer__label{ left:14px; bottom:14px; }
  #wt-promo .vplayer.is-paused .vplayer__label{ bottom:48px; }
  #wt-promo .vplayer__label b{ font-size:13px; }
  #wt-promo .vplayer__label span{ font-size:11px; }
  #wt-promo .vplayer__bar{ padding:22px 11px 9px; gap:9px; }
  #wt-promo .vplayer__time{ font-size:10.5px; }
}

/* ============================ PROOF ==================================== */
#wt-promo .proof{ padding:100px 0 130px; }
#wt-promo .proof__fig{ max-width:760px; margin:37px auto 0; }   /* 제목 아래로 이동 */
#wt-promo .proof__fig img{ width:100%; aspect-ratio:1518/1132; border-radius:var(--r-photo); }
#wt-promo .proof .body{ margin-top:37px; }

/* ============================ CLOSING (추가 블록) ======================= */
#wt-promo .closing{
  background:var(--dark); color:#fff;
  padding:104px 0 112px; text-align:center;
}
#wt-promo .closing__title{
  font-family:var(--f-display); font-weight:400;
  font-size:calc(var(--fs-title) * .62); line-height:1.2; letter-spacing:-0.02em;
}
#wt-promo .closing__tags{ justify-content:center; margin:34px 0 0; }
#wt-promo .closing__tags li{
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22))
             0 88%/100% 42% no-repeat;
}
#wt-promo .closing .btn{ margin-top:40px; background:#fff; color:var(--cta); }
#wt-promo .closing .btn:hover{ background:#f2efe9; box-shadow:0 10px 26px rgba(0,0,0,.3); }

/* 모바일 고정 버튼 (기본 숨김) */

/* =======================================================================
   RESPONSIVE
   ======================================================================= */

/* --- 태블릿 --------------------------------------------------------- */
@media (max-width:1080px){
  #wt-promo{
    --fs-hero:52px; --fs-hero-sub:21px; --fs-btn:20px;
    --fs-title:56px; --fs-eyebrow:23px; --fs-body:17px;
    --fs-pt-name:36px; --fs-pt-eyebrow:15px; --fs-price:25px;
  }
  #wt-promo .btn{ width:310px; height:70px; --r-btn:32px; }
  #wt-promo .intro__title{ font-size:56px; }
  #wt-promo .pt{ grid-template-columns:42% 1fr; gap:32px; }
  #wt-promo .science__fig{ max-width:88%; }
  #wt-promo .grid8__ico img{ height:96px; }
  #wt-promo .grid8 li:nth-child(7) .grid8__ico img{ height:78px; }
}

/* --- 모바일 --------------------------------------------------------- */
@media (max-width:768px){
  #wt-promo{
    /* 히어로 제목 : 2줄을 유지하면서 긴 줄의 글자 폭이 화면 가로폭의 90% 가 되도록.
       실측 - 긴 줄('두피도 PT받자') 폭 / 글자크기 = 5.676
       → 0.72 x 100vw / 5.676 = 12.63vw (기존 0.9 에서 20% 축소)  (390px 화면에서 약 49px)
       태블릿(768px)에서 과도하게 커지지 않도록 상한 56px. */
    --fs-hero:min(12.63vw, 56px);
    --fs-hero-sub:15px; --fs-tag:10.5px; --fs-en:9.5px;
    --fs-btn:16px; --fs-eyebrow:15px; --fs-title:33px; --fs-body:14px;
    --fs-note:11px; --fs-pt-eyebrow:13px; --fs-pt-name:25px;
    --fs-pt-desc:13.5px; --fs-price:22px; --fs-rec:11.5px;
    --fs-card-t:14.5px; --fs-card-d:11.5px;
    --r-photo:12px; --r-card:14px;
  }
  #wt-promo .wrap{ padding-inline:20px; }

  /* HERO : 세로형으로 재구성 */
  #wt-promo .hero{
    height:auto; min-height:auto;
    padding:0 0 44px; background-position:center top;
  }
  /* 모바일은 가로형 컷을 쓰므로 화면 폭을 꽉 채운다 (좌우 여백만큼 빼내어 풀블리드) */
  #wt-promo .hero__visual{
    position:relative; left:auto; top:auto;
    width:calc(100% + 40px); max-width:none; height:auto;
    margin:0 -20px 6px;
  }
  /* PC용 시안 캔버스 비율/최소높이를 모바일에서는 해제한다 (아래 빈 여백 방지) */
  #wt-promo .hero__inner{
    position:static; padding-inline:20px;
    aspect-ratio:auto; min-height:0; max-width:none;
  }
  #wt-promo .hero__copy{
    position:static; width:100%; text-align:center; transform:none;
  }
  #wt-promo .hero__title{
    line-height:1.06; letter-spacing:-0.035em;
    white-space:nowrap;       /* <br> 로만 줄을 나눈다 (2줄 고정) */
    margin-inline:-20px;      /* 좌우 여백까지 써서 90% 폭을 확보 */
  }
  #wt-promo .hero__sub{ margin-top:16px; }
  #wt-promo .hero__tags{
    justify-content:center; gap:6px 14px; margin-top:22px;
  }
  #wt-promo .hero__en{ margin-top:10px; }
  #wt-promo .hero .btn{ margin-top:24px; }
  #wt-promo .btn{ width:100%; max-width:290px; height:56px; --r-btn:28px; }

  /* INTRO */
  #wt-promo .intro{ padding:72px 0 60px; }
  /* 필기체 제목 : 글자 폭이 화면 가로폭의 90% 가 되도록 (34px 일 때 폭 257.5px → 배율 7.574) */
  #wt-promo .intro__title{
    font-size:11.85vw;
    margin-inline:-20px;      /* 좌우 여백까지 써서 90% 를 확보 */
  }
  #wt-promo .intro .body{ margin-top:28px; }
  #wt-promo .intro .body + .body{ margin-top:22px; }
  #wt-promo .note{ margin-top:32px; }
  /* 모바일에서는 PSD의 강제 줄바꿈을 해제해 자연스럽게 흐르게 함 */
  #wt-promo .intro .body br{ display:none; }

  /* MENU : 1단 */
  #wt-promo .menu{ padding-bottom:64px; }
  #wt-promo .pt{ grid-template-columns:1fr; gap:18px; }
  /* PC용 카드별 간격(시안 실측값)을 모바일에서는 균일하게 되돌린다 */
  #wt-promo .pt, #wt-promo .pt:nth-of-type(1), #wt-promo .pt:nth-of-type(2), #wt-promo .pt:nth-of-type(3){ margin-bottom:72px; }
  #wt-promo .pt__name{ margin-top:8px; }
  #wt-promo .pt__desc{ margin-top:12px; line-height:1.55; }
  #wt-promo .pt__desc br{ display:none; }
  #wt-promo .pt__price, #wt-promo .pt--free .pt__price{ margin-top:20px; }
  #wt-promo .pt__rec{ margin-top:12px; line-height:1.62; }
  #wt-promo .pt__rec br{ display:none; }
  #wt-promo .pt__rec-indent{ padding-left:0; }

  /* CHECK : 2열 */
  #wt-promo .check{ padding:62px 0 66px; }
  #wt-promo .grid8{ grid-template-columns:repeat(2,1fr); gap:10px; margin-top:26px; }
  #wt-promo .grid8 li{ aspect-ratio:auto; padding:24px 10px 20px; }
  #wt-promo .grid8__ico{ flex:none; height:auto; margin-bottom:14px; }
  #wt-promo .grid8__ico img{ height:86px; }
  #wt-promo .grid8 li:nth-child(7) .grid8__ico img{ height:70px; }
  #wt-promo .check .body br{ display:none; }

  /* PROCESS : 1단 */
  #wt-promo .process{ padding:62px 0 72px; }
  /* STEP 3개 : 가로 스와이프 캐러셀 (스크롤 스냅) */
  #wt-promo .steps{
    display:flex; grid-template-columns:none;
    gap:12px; margin-top:30px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-inline:20px; margin-inline:-20px;
    scrollbar-width:none;
    /* 좌우로만 움직이게 한다.
       overflow-x 만 지정하면 세로도 auto 가 되어, 등장 모션의 translateY(32px)
       만큼 세로 스크롤이 생겨 이미지가 위아래로 끌렸다.
       세로를 막되, 모션이 잘리지 않도록 그만큼 아래 여백을 주고 음수 margin 으로 상쇄한다. */
    overflow-y:hidden;
    touch-action:pan-x;
    padding-bottom:32px; margin-bottom:-32px;
  }
  #wt-promo .steps::-webkit-scrollbar{ display:none; }
  #wt-promo .steps li{ flex:0 0 82%; scroll-snap-align:center; }
  #wt-promo .steps img{ margin-bottom:12px; }
  /* 인디케이터 (JS 가 생성) */
  #wt-promo .steps__dots{
    display:flex; justify-content:center; gap:7px; margin-top:18px;
  }
  #wt-promo .steps__dots button{
    width:7px; height:7px; border-radius:50%; border:0; padding:0;
    background:rgba(0,0,0,.18); cursor:pointer;
    transition:background .2s, width .2s;
  }
  #wt-promo .steps__dots button.is-on{ width:20px; border-radius:4px; background:var(--cta); }
  #wt-promo .steps img{ margin-bottom:14px; }
  #wt-promo .process .body br{ display:none; }
  #wt-promo .steps em br{ display:none; }

  /* SCIENCE */
  #wt-promo .science{ padding:64px 0 68px; }
  #wt-promo .science__fig{ max-width:100%; margin:30px auto 26px; }
  #wt-promo .science .body br{ display:none; }

  /* PROOF */
  #wt-promo .proof{ padding:64px 0 72px; }
  #wt-promo .proof__fig{ margin-bottom:28px; }
  #wt-promo .proof .body br{ display:none; }

  /* CLOSING */
  #wt-promo .closing{ padding:60px 0 100px; }
  #wt-promo .closing__title{ font-size:24px; }
  #wt-promo .closing__tags{ margin-top:22px; }
  #wt-promo .closing .btn{ margin-top:26px; font-size:20px; }
  /* 버튼 폭은 290px 고정. 20px 에서 글자 폭 약 192px 이라 어떤 폰에서도 한 줄이다. */

}

@media (max-width:380px){
  /* --fs-hero 는 vw 기반이라 화면이 줄면 자동으로 작아진다(90% 비율 유지).
     여기서 고정값으로 덮어쓰면 비율이 깨지므로 건드리지 않는다. */
  #wt-promo{ --fs-title:27px; }
  #wt-promo .hero__tags{ gap:5px 10px; }
}

/* --- 접근성 / 인쇄 --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #wt-promo *{ transition:none !important; animation:none !important; }
}
@media print{
  #wt-promo .fbtn{ display:none !important; }
  #wt-promo{ background:#fff; }
}


/* =======================================================================
   본사 사이트(portfolio/promotion_bk)에서 이어붙인 하단 브랜드 섹션
   원본은 폭 1440 / 별도 서체·간격이지만, 이 페이지의 토큰(wrap 1100,
   Paperlogy + Noto Sans KR, #E9E6E1 / #EEEDEB / #083D35)에 맞춰 재구성.
   ======================================================================= */

/* 이어붙인 섹션 공통 : 위쪽 큰 타이틀보다 한 단계 작은 제목 */
#wt-promo .title--sub{ font-size:46px; line-height:1.2; }
/* 이어붙인 섹션에서는 제목이 46px 이라 아이브로우도 한 단계 낮춘다 */
#wt-promo .sect .eyebrow{ font-size:18px; font-weight:500; letter-spacing:-0.01em; opacity:.6; }
#wt-promo .sect .title--sub{ margin-top:8px; }
#wt-promo .sect{ padding:104px 0; text-align:center; }
#wt-promo .sect + .sect{ padding-top:0; }
#wt-promo .sect .body{ margin-top:22px; }
#wt-promo .sect__cap{
  margin-top:12px; font-size:11px; font-weight:300;
  letter-spacing:-0.04em; opacity:.6;
  text-align:right;                 /* 이미지 우측 하단에 붙인다 */
  position:relative;
  top:-20px;   /* 사진 우측 하단에 더 붙인다 */
}

/* ---- 성공스토리 ---- */
#wt-promo .story__head{
  display:flex; align-items:center; gap:12px;
  margin:36px 0 16px; text-align:left;
}
#wt-promo .story__head b{ font-size:15px; font-weight:700; letter-spacing:-0.03em; }
/* 자식 div 안의 설명 span 만 대상 (.story__ico 까지 잡히지 않도록 범위를 좁힘) */
#wt-promo .story__head > div > span{ display:block; font-size:12.5px; font-weight:300; opacity:.6; margin-top:2px; }
#wt-promo .story__ico{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:-0.03em;
  line-height:1;
}
#wt-promo .story__grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
#wt-promo .story__grid a{ display:block; border-radius:var(--r-photo); overflow:hidden; background:var(--card); }
#wt-promo .story__grid img{ width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .4s ease; }
#wt-promo .story__grid a:hover img{ transform:scale(1.06); }
/* 팔로우 버튼은 본문 CTA 가 아니므로 기본 .btn 의 70% 크기 */
#wt-promo .story .btn{
  margin-top:34px;
  width:158px; height:35px; --r-btn:17.5px; font-size:11.5px; gap:5px;
}
#wt-promo .story .btn svg{ width:13px; height:13px; fill:currentColor; flex:none; }

/* ---- 내부전경 ---- */
#wt-promo .interior__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin-top:34px;
}
#wt-promo .interior__grid img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-photo);
  margin-bottom:0; display:block;   /* 테마의 img margin-bottom:15px 제거 — 상하 간격이 좌우보다 넓어진다 */
  cursor:zoom-in; transition:transform .4s ease, filter .3s ease;
}
#wt-promo .interior__grid img:hover{ transform:scale(1.03); filter:brightness(1.05); }

/* ---- 이미지 확대 라이트박스 ---- */
#wt-promo .lbox{
  position:fixed; inset:0; z-index:10050;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,25,22,.92);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
#wt-promo .lbox.is-open{ opacity:1; visibility:visible; }
#wt-promo .lbox__img{
  max-width:min(1180px, 90vw); max-height:86vh; width:auto; height:auto;
  border-radius:var(--r-photo); box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:scale(.94); transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
#wt-promo .lbox.is-open .lbox__img{ transform:scale(1); }
#wt-promo .lbox__x{
  position:absolute; top:22px; right:26px; width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  font-size:26px; line-height:1; cursor:pointer; transition:background .2s;
}
#wt-promo .lbox__x:hover{ background:rgba(255,255,255,.24); }
#wt-promo .lbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
#wt-promo .lbox__nav:hover{ background:rgba(255,255,255,.24); }
#wt-promo .lbox__nav svg{ width:22px; height:22px; fill:currentColor; }
#wt-promo .lbox__nav--prev{ left:26px; }
#wt-promo .lbox__nav--next{ right:26px; }
#wt-promo .lbox__count{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:13px; letter-spacing:.02em;
}
@media (max-width:768px){
  #wt-promo .lbox__nav{ width:40px; height:40px; }
  #wt-promo .lbox__nav--prev{ left:8px; } #wt-promo .lbox__nav--next{ right:8px; }
  #wt-promo .lbox__x{ top:12px; right:12px; width:38px; height:38px; font-size:22px; }
}

/* ---- 지점 & ISO ---- */
#wt-promo .iso{
  display:grid; grid-template-columns:1.97fr 1fr; gap:22px;
  margin-top:34px; align-items:end;
}
#wt-promo .iso figure{ margin:0; }
#wt-promo .iso img{ width:100%; border-radius:var(--r-photo); display:block; }
#wt-promo .iso figcaption{
  margin-top:11px; font-size:13px; font-weight:300;
  letter-spacing:-0.04em; opacity:.6;
}

/* ---- 이벤트 이용안내 ---- */
/* .sect + .sect 의 padding-top:0 을 되돌린다 (배경색이 바뀌는 섹션이라 여백 필요) */
#wt-promo .notice{ background:var(--card); }
#wt-promo .sect.notice{ padding-top:96px; }   /* .sect + .sect 의 padding-top:0 보다 명시도 우선 */
#wt-promo .notice__lead{ margin-top:20px; font-size:17px; line-height:1.6; letter-spacing:-0.04em; }
#wt-promo .notice__lead b{ font-weight:700; }
#wt-promo .notice__lead span{ display:block; font-size:14.5px; opacity:.6; margin-top:3px; }
#wt-promo .notice__cards{ max-width:620px; margin:28px auto 0; }
#wt-promo .notice__cards img{ width:100%; }   /* 카드사 로고는 투명 PNG (자체 라운드 박스) */
#wt-promo .notice__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 40px; max-width:700px; margin:30px auto 0; text-align:left;
}
#wt-promo .notice__list li{
  position:relative; padding-left:12px;
  font-size:13.5px; line-height:1.7; font-weight:300; letter-spacing:-0.04em; opacity:.78;
}
#wt-promo .notice__list li::before{
  content:'·'; position:absolute; left:2px; top:-1px; font-weight:700; opacity:.9;
}
#wt-promo .notice .btn{ margin-top:38px; flex-direction:column; gap:1px; height:88px; }
#wt-promo .notice .btn small{ font-size:13px; font-weight:400; opacity:.72; letter-spacing:-0.03em; }
#wt-promo .notice .btn strong{ font-size:23px; font-weight:700; }

/* ---- 이어붙인 섹션 반응형 ---- */
@media (max-width:1080px){
  #wt-promo .title--sub{ font-size:36px; }
}
@media (max-width:768px){
  #wt-promo .title--sub{ font-size:26px; }
  #wt-promo .sect{ padding:62px 0; }
  #wt-promo .sect .body br{ display:none; }
  #wt-promo .story__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  #wt-promo .story__head{ margin:26px 0 14px; }
  #wt-promo .interior__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:24px; }
  /* ISO 수여식 사진 + 인증서 : 좌우로 나란히 두되 세로 높이를 맞춘다.
     가로 비율은 원본대로 두므로 50:50 이 아니라 60:40 처럼 나온다. */
  #wt-promo .iso{
    display:flex; grid-template-columns:none;
    gap:10px; margin-top:24px; align-items:flex-start; justify-content:center;
  }
  #wt-promo .iso figure{ flex:0 0 auto; text-align:center; }
  #wt-promo .iso img{ height:170px; width:auto; max-width:none; }
  #wt-promo .iso figcaption{ font-size:10.5px; margin-top:7px; }
  #wt-promo .sect.notice{ padding-top:56px; }
  #wt-promo .story .btn{ width:150px; height:34px; font-size:11px; --r-btn:17px; }
  #wt-promo .notice__list{ grid-template-columns:1fr; gap:4px; margin-top:22px; }

  /* 라이트박스 닫기/이전·다음 : 손가락 터치 영역 확보 (44px 이상) */
  #wt-promo .lbox__x{ width:44px; height:44px; }
  #wt-promo .lbox__nav{ width:44px; height:44px; }


  /* 한국어 단어 중간에서 줄이 끊기지 않게 (모바일 좁은 폭 대응) */
  #wt-promo .notice__lead, #wt-promo .notice__lead b, #wt-promo .notice__list li, #wt-promo .intro .body, #wt-promo .check .body, #wt-promo .process .body, #wt-promo .science .body, #wt-promo .proof .body, #wt-promo .interior .body, #wt-promo .story__head, #wt-promo .pt__desc, #wt-promo .pt__rec, #wt-promo .steps em, #wt-promo .grid8__cap{ word-break:keep-all; }

  #wt-promo .notice__lead{ font-size:15px; }
  #wt-promo .notice__lead br{ display:none; }
  #wt-promo .notice .btn{ height:74px; }
  #wt-promo .notice .btn strong{ font-size:18px; }
  #wt-promo .notice .btn small{ font-size:11.5px; }
}

/* =======================================================================
   예약 유도 플로팅 버튼 (말풍선형 확정)
   스크롤이 히어로의 75% 를 지나면 우하단에 나타난다.
   ======================================================================= */
#wt-promo .fbtn{
  position:fixed; right:26px; bottom:30px; z-index:10000;
  width:66px; height:66px; border-radius:50%; background:var(--cta);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(8,61,53,.4);
  font-family:var(--f-display); letter-spacing:-0.03em; color:#fff;
  opacity:0; visibility:hidden;
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1), visibility .75s;
}
#wt-promo .fbtn.is-on{ opacity:1; visibility:visible; }
#wt-promo .fbtn__ico{ flex:none; display:flex; align-items:center; justify-content:center; }
#wt-promo .fbtn__ico svg{ width:24px; height:24px; fill:currentColor; }
#wt-promo .fbtn__txt{ display:none; }
#wt-promo .fbtn__bubble{
  position:absolute; right:0; bottom:calc(100% + 14px);
  white-space:nowrap; background:#fff; color:var(--cta);
  font-size:13px; font-weight:700; padding:9px 15px; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
#wt-promo .fbtn__bubble::after{
  content:''; position:absolute; right:24px; top:100%;
  border:7px solid transparent; border-top-color:#fff;
}

/* ---- 모션 : 페이지 접속 시 부드럽게 등장 + 말풍선이 버튼을 축으로 좌우 스윙 ----
   회전 중심을 원형 버튼의 한가운데(말풍선 기준 오른쪽 33px, 아래 47px)에 두어
   부채꼴을 그리듯 좌우로 살짝 흔들리게 한다. */
@keyframes fbBubble{
  0%,100%{ transform:rotate(-3.2deg); }
  50%    { transform:rotate(3.2deg); }
}

#wt-promo .fbtn{ transform:translateY(16px) scale(.96); }
#wt-promo .fbtn.is-on{ transform:none; }
#wt-promo .fbtn__bubble{ transform-origin:calc(100% - 33px) calc(100% + 47px); }
#wt-promo .fbtn.is-on .fbtn__bubble{ animation:fbBubble 1.6s ease-in-out .9s infinite; }

@media (prefers-reduced-motion:reduce){
  #wt-promo .fbtn, #wt-promo .fbtn.is-on{ transform:none; }
  #wt-promo .fbtn.is-on .fbtn__bubble{ animation:none; }
}
/* 모바일에서도 노출한다 (테마 기본 플로팅 메뉴는 숨김 처리하므로 이것만 남는다) */
@media (max-width:768px){
  #wt-promo .fbtn{ right:8px; bottom:20px; width:46px; height:46px; }
  #wt-promo .fbtn__ico svg{ width:18px; height:18px; }
  #wt-promo .fbtn__bubble{ font-size:9.2px; padding:5.6px 9.6px; border-radius:7.2px; }
  #wt-promo .fbtn__bubble::after{ right:18.2px; border-width:4.8px; }
  #wt-promo .fbtn__bubble{ transform-origin:calc(100% - 23px) calc(100% + 35px); }
}

/* =======================================================================
   요소 등장 모션 (스크롤 리빌) — 페이드업
   index.html 하단 스크립트가 제목·본문·이미지·카드에 .rv 를 자동으로 붙이고,
   IntersectionObserver 로 화면에 들어오면 .is-in 을 추가한다.
   같은 그룹의 형제 요소에는 --rvi 인덱스가 들어가 70ms 씩 순차 지연된다.
   ======================================================================= */
#wt-promo .rv{
  opacity:0; transform:translateY(32px);
  transition-property:opacity, transform;
  transition-duration:.72s;
  transition-timing-function:cubic-bezier(.2,.7,.25,1);
  transition-delay:calc(var(--rvi, 0) * 70ms);
  will-change:opacity, transform;
}
#wt-promo .rv.is-in{ opacity:1; transform:none; }

/* 모션 최소화를 선호하는 사용자에게는 전부 끔 */
@media (prefers-reduced-motion:reduce){
  #wt-promo .rv{ transition:none !important; opacity:1 !important; transform:none !important; }
}


/* =======================================================================
   가격 모션 — 원가에 취소선이 그어지며 흐려지고,
   할인가는 아래에서 튀어오르며 원가 → 할인가로 카운팅된다.
   ======================================================================= */
#wt-promo .pt__price del{ position:relative; text-decoration:none !important; }
#wt-promo .pt__price del::after{
  content:''; position:absolute; left:-1px; right:-1px; top:53%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:left center;
}
#wt-promo .pt__price strong{ display:inline-block; font-variant-numeric:tabular-nums; }

/* JS 가 동작할 때만 애니메이션. 미실행 시에는 위 기본값(그어진 상태)이 그대로 보인다. */
#wt-promo .js-price .pt__price del{
  transition:opacity .4s ease .5s;
}
#wt-promo .js-price .pt__price del::after{
  transform:scaleX(0);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
#wt-promo .js-price .pt__price strong{
  opacity:0; transform:translateY(10px) scale(.94);
  transition:transform .5s cubic-bezier(.3,1.3,.5,1) .35s, opacity .4s ease .35s;
}
#wt-promo .js-price .pt__price.is-priced del{ opacity:.42; }
#wt-promo .js-price .pt__price.is-priced del::after{ transform:scaleX(1); }
#wt-promo .js-price .pt__price.is-priced strong{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  #wt-promo .js-price .pt__price del, #wt-promo .js-price .pt__price del::after, #wt-promo .js-price .pt__price strong{ transition:none !important; }
  #wt-promo .js-price .pt__price del::after{ transform:scaleX(1) !important; }
  #wt-promo .js-price .pt__price strong{ opacity:1 !important; transform:none !important; }
}


/* =======================================================================
   프로모션 전용 풋터
   워드프레스에서는 사이트 기본 풋터(Nectar 글로벌 섹션)를 숨기고 이것만 남긴다.
   문구는 index.html / template.php 의 .pfoot 두 줄만 고치면 된다.
   ======================================================================= */
#wt-promo .pfoot{ background:var(--dark); color:#fff; padding:26px 24px 30px; text-align:center; }
#wt-promo .pfoot p{
  font-family:var(--f-text); font-size:9px; line-height:1.85;
  letter-spacing:0; color:rgba(255,255,255,.82); word-break:keep-all;
}
#wt-promo .pfoot__copy{ color:rgba(255,255,255,.55); margin-top:2px; }
@media (max-width:768px){
  #wt-promo .pfoot{ padding:22px 18px 26px; }
  #wt-promo .pfoot p{ line-height:2; }
}

/* =======================================================================
   큰 볼드 타이틀 임팩트 모션 — 글자 순차 등장
   대상 : .hero__title / .title / .pt__name  (JS 가 .tmo 를 붙이고 글자를 .ch 로 분해)
   ======================================================================= */
#wt-promo .tmo{ opacity:1; transform:none; }
/* 글자 span 을 띄어쓰기 단위로 묶어 단어 중간에서 줄이 끊기지 않게 한다 */
#wt-promo .tmo .wd{ display:inline-block; white-space:nowrap; }
#wt-promo .tmo .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em) rotateX(-52deg);
  transform-origin:50% 100%;
  transition:opacity .46s ease, transform .56s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--ci, 0) * 26ms);
}
#wt-promo .tmo.is-in .ch{ opacity:1; transform:none; }

/* 모션 최소화를 켠 사용자에게는 즉시 노출 */
@media (prefers-reduced-motion:reduce){
  #wt-promo .tmo, #wt-promo .tmo .ch{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}


/* =======================================================================
   [2] 전체 폭 확장 — 반드시 파일 맨 끝에 유지할 것
   Salient 본문 영역 폭 제한을 벗어나 화면 끝까지 채운다.
   ======================================================================= */
#wt-promo{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative !important; left:auto !important; right:auto !important;
  overflow-x:hidden;
}
#wt-promo img{ display:block; height:auto; max-width:100%; }
#wt-promo a, #wt-promo a:hover{ text-decoration:none; box-shadow:none; }

/* =======================================================================
   상품별 바로 예약 버튼
   눌리면 예약 팝업이 열리면서 해당 상품이 미리 선택된다.
   링크값은 관리자 → 폼 관리 → 이벤트 목록의 '버튼 링크' 열에서 확인/복사.
   슬러그가 아직 없으면 그냥 빈 폼으로 열린다(버튼이 죽지 않는다).
   ======================================================================= */
#wt-promo .pt .pt__cta{
  margin-top:24px;
  width:auto; max-width:100%;
  min-width:151px; height:38px;   /* 원래(210/54)의 72% */
  padding:0 22px;
  font-size:12.2px;               /* 17 의 72% */
  --r-btn:19px;
  white-space:nowrap;             /* 작아져도 두 줄로 꺾이지 않게 */
}
/* '이 상품으로' 는 얇게, '예약하기' 를 굵게 — 기본 .btn 과 반대라 여기서 뒤집는다.
   이 버튼에만 적용되므로 히어로·하단 CTA 는 그대로다. */
#wt-promo .pt .pt__cta b{ font-weight:400; }
#wt-promo .pt .pt__cta span{ font-weight:700; }
@media (max-width:1080px){
  #wt-promo .pt .pt__cta{ min-width:137px; height:36px; font-size:11.5px; --r-btn:18px; padding:0 17px; }
}
@media (max-width:768px){
  #wt-promo .pt .pt__cta{
    margin-top:20px;
    width:100%; max-width:232px;               /* 290 의 80% */
    height:38px; font-size:12px; --r-btn:19px; padding:0 16px;
  }
}

/* =======================================================================
   본문 강조 (.hl)
   기준 굵기 400 에서 두 단계 위인 700. Noto Sans KR 로 실제 로드된 굵기는
   300 / 350 / 400 / 500 / 700 / 900 이라 400 → 500 → 700 이 두 단계다.
   과학 섹션 본문만 기준이 350 이지만, 강조 표시는 페이지 전체에서
   같은 굵기로 보이는 편이 읽기 좋아 700 으로 통일한다.
   ======================================================================= */
#wt-promo .body .hl,
#wt-promo .pt__desc .hl{
  font-weight:700;
}

/* 형광펜 밑줄 — 스크롤로 화면에 들어오면 좌→우로 그어진다.
   줄바꿈되는 구절도 각 줄에 나눠 그어지도록 box-decoration-break 사용. */
#wt-promo .hl,
#wt-promo .hl .hl-w{
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  background-image:linear-gradient(rgba(240,170,40,.25), rgba(240,170,40,.25));
  background-repeat:no-repeat;
  background-position:0 86%;
  background-size:0% 42%;
}
/* 한 줄짜리 구절 — 구절 전체가 한 번에 그어진다.
   처음에는 느리게 출발해 중간부터 속도가 붙는다.
   이전 곡선(.22,.9,.3,1)은 시작이 너무 빨라 눈에 남지 않았다. */
#wt-promo .hl{ transition:background-size 1.3s cubic-bezier(.45,.02,.25,1); }

/* 두 줄 이상인 구절 — 어절 단위로 시간차를 줘 윗줄부터 차례로 그어진다.
   구간을 이어붙이는 방식이라 어절마다는 등속(linear)이고,
   전체 진행이 위 곡선을 따르도록 시간은 promo.js 에서 계산해 넣는다. */
#wt-promo .hl.is-split{ background-image:none; }
#wt-promo .hl .hl-w{ transition:background-size 0s linear; }

#wt-promo .hl.is-lit,
#wt-promo .hl.is-lit .hl-w{ background-size:100% 42%; }

@media (prefers-reduced-motion:reduce){
  #wt-promo .hl,
  #wt-promo .hl .hl-w{ transition:none !important; }
}