/* 헤드카피를 900 에서 800 으로 내림 (2026-09-01).
   예전 Gmarket Bold 와 잉크량을 맞추려고 900 까지 올렸더니 62px 에서
   ㅇ ㅎ ㅁ 의 속공간이 막혀 글자가 뭉치고 인상이 딱딱해졌다.
   Gmarket 은 둥근 기하학 서체라 굵어도 친근하게 읽혔지만 Pretendard 는 중립적이라
   같은 밀도로 맞추면 소리지르는 것처럼 보인다. 숫자는 맞고 인상이 틀렸다.
   800 / 700 / 600 / 500 으로 층을 다시 나눈다 */
/* 카피와 제목 굵기 (2026-09-01 실측 후 결정).
   40px 로 같은 문장을 그려 폭 1px 당 잉크를 재보니
     Gmarket  Medium 12.63  Bold 18.94
     Pretendard  500 11.5  600 13.11  700 14.71  800 16.32  900 17.93
   숫자를 그대로 두면 제목이 예전 Gmarket Bold 보다 22% 얇아진다.
   본문은 읽는 자리라 500 그대로 두고, 힘이 실려야 하는 카피와 제목만 올린다.
     메인 헤드카피와 챕터 제목  900  예전 대비 -5%, 가장 가깝다
     리드, 메뉴, 섹션 제목, 버튼  800  예전 대비 -14%
     메인 눈썹줄  600  예전 Medium 대비 +4%
   메뉴의 영문 CHAPTER 줄은 얇아야 읽혀서 500 그대로 둔다 */
@charset "utf-8";

:root{
  --teal-deep:#24505f; --teal:#2f7c98; --teal-lite:#3a93b5; --teal-mist:#f0f7f9; --teal-line:#d6e6ea;
  --orange:#cb5226; --orange-lite:#e8774d; --orange-hi:#e99229;
  --hero-hi:#ffb133;  /* 히어로 헤드카피 강조 (2026-08-21 사용자 지정) */
/* 본문색을 한 단계 진하게 (2026-09-01).
   #516a74 는 흰 배경에서 대비 5.73:1 이라 AA(4.5:1)는 넘지만 AAA(7:1)에 못 미친다.
   본문이 약해 보인다는 이야기가 나왔는데, 굵기를 600 으로 올리면 제목(800~900)과의
   위계가 무너지고 국문 18px 에서 속공간이 좁아져 장문이 답답해진다.
   굵기 대신 색으로 푼다. #445b65 는 7.17:1 로 AAA 를 넘긴다.
   획을 두껍게 하지 않고 또렷해지므로 2만 자를 읽는 화면에 맞다 */
  --ink:#22383f; --ink-soft:#445b65; --page:#eaf1f3;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --shadow-card:0 18px 40px -16px rgba(36,80,95,.34), 0 4px 12px -6px rgba(36,80,95,.18);
  --measure:940px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* text-size-adjust: 아이폰 사파리가 세로 화면에서 본문 글자를 임의로 키우는 것을 막는다.
   키워지면 줄이 일찍 끊겨서 오른쪽에 빈 자리가 크게 남는다. 원본 reset.css에 있던 것을 이식 */
/* 배경색을 body에 깔아둔다. 없으면 아이폰 사파리가 주소창 뒤와 스크롤 여유 구간을
   흰색으로 칠한다. 스크롤 방향에 따라 흰 띠가 나타났다 사라지던 원인이다.
   원본 reset.css에도 body 배경색이 있다 */
/* 위쪽 오버스크롤은 청록, 푸터 아래 하단은 푸터 색으로. 하이브리드는 body를 푸터 색으로 깔아
   푸터 아래(세이프에어리어 포함)가 밝은 청록으로 비치지 않게 한다. */
html{background:#368ea5}
body{background:#368ea5}
body.dir-hybrid{background:#335261}
/* 본문 굵기를 500 으로 두는 이유 (2026-09-01 실측으로 결정).
   같은 문장을 18px 로 그려 폭 1px 당 잉크량을 재보니
     G마켓 Medium 5.53 / 프리텐다드 Medium 5.12 / 프리텐다드 Regular 4.39
   였다. Regular 로 내리면 예전보다 21% 흐려진다.
   본문 글자색이 #516a74 로 이미 눌러놓은 색이고 환자가 읽는 화면이라
   글자가 흐려지는 쪽은 가독성에 불리하다. Medium 이면 예전과 7% 차이라 사실상 같다.
   폰트를 바꾼 이득은 굵기를 낮추는 데 있는 게 아니라, 브랜드용 서체를
   본문용으로 만든 서체로 바꾼 데 있다 */
body{font-weight:500}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
sup{font-size:.62em;font-weight:500;vertical-align:super;opacity:.85}
/* 줄바꿈으로 쪼개지면 안 되는 덩어리에 쓴다.
   낱말 사이는   로 묶으면 되지만, Treatment-Free 처럼 낱말 안에 하이픈이 있으면
   그 하이픈에서 줄이 넘어간다. 그럴 때 이 클래스로 감싼다 */
.nb{white-space:nowrap}
.inner{width:100%;max-width:1240px;margin:0 auto;padding:0 56px}

/* ---------- header ---------- */
.site-hd{height:128px;display:flex;align-items:center;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.09);position:sticky;top:0;z-index:20}
.site-hd .inner{display:flex;align-items:center;justify-content:space-between}
.site-hd .logo{height:96px}
/* 모바일에서만 살아나는 줄바꿈 */
.br-mo{display:none}
.nav-toggle{display:none}
.gnb{display:flex;gap:12px;margin-top:20px}  /* 중심을 10px 아래로: 로고 잉크 무게중심이 박스 중심보다 아래(실측 +17/238px) */
/* 챕터 이름이 본체, 번호는 위에 작게 (2026-08-28 사용자 확정 1안).
   버튼 폭 156 / 간격 12는 로고와의 간격 99px 실측 정렬을 유지하려고 그대로 둔다 */
.gnb a{display:flex;flex-direction:column;justify-content:center;text-align:center;width:156px;padding:11px 12px;border-radius:var(--r-sm);
  color:#fff;background:linear-gradient(var(--orange-lite),var(--orange));text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.gnb .kick{font-size:10px;font-weight:500;letter-spacing:1.4px;opacity:.82}
.gnb .name{font-size:15px;font-weight:700;line-height:1.24;letter-spacing:-.4px;margin-top:4px}
/* 이름이 두 줄로 넘어갈 때 (CML) (FAQ) 괄호 안이 쪼개지지 않게, 끊길 자리는 마크업의 <wbr>로만 정한다 */
.gnb a:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(203,82,38,.6)}
.gnb a.on{background:linear-gradient(var(--orange-hi),#cf7714);box-shadow:0 8px 18px -8px rgba(203,82,38,.6)}

/* ---------- page frame ---------- */
.page{min-height:100dvh;display:flex;flex-direction:column;background:var(--page);position:relative}
/* hero (both directions share teal hero) */
.hero{background:transparent;color:#fff;padding:66px 0 62px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%)}
.hero .inner{position:relative;z-index:1}
.hero .eyebrow{font-size:15px;font-weight:500;letter-spacing:.5px;opacity:.9}
.hero .chapter-title{font-size:44px;font-weight:800;letter-spacing:-1.2px;margin-top:10px;line-height:1.2}
.hero .lead{font-size:23px;font-weight:700;line-height:1.55;margin-top:22px;max-width:840px;letter-spacing:-.6px}
/* <b> 는 브라우저 기본이 bolder 라 부모(.lead 700)에서 900 까지 올라간다.
   예전 Gmarket 은 Bold 700 이 제일 굵어서 900 도 Bold 로 그려졌다.
   Pretendard 는 900 짜리 Black 이 있어서 그대로 두면 이 글자만 더 굵어진다. 700 으로 못박는다 */
/* 강조는 색으로만 준다. 굵기는 부모를 따라간다.
   브라우저 기본이 bolder 라 그냥 두면 부모보다 한 단계 올라가므로 inherit 로 못박는다.
   숫자를 박아두면 리드 굵기를 바꿀 때 강조만 남아 어긋난다 */
.hero .lead b{color:var(--hero-hi);font-weight:inherit}
/* 히어로 도입 문단(틸 위 흰 글씨) — 흰 카드는 첫 Q&A부터 시작 */
/* 히어로 리드 블록 — 원본 style.css `.chapter-lead .-txt ~ .-txt{margin-top:12px}` 이식.
   리드와 도입 문단이 한 덩어리로 붙어 읽히게 한다(문단 간격 ≠ 블록 간격) */
.hero-p{font-size:18px;font-weight:500;line-height:1.82;color:#fff;opacity:.94;max-width:860px;margin-top:12px;text-wrap:pretty}
.hero-p+.hero-p{margin-top:12px}
.hero-p sup{opacity:.8}
/* 챕터4 둘째 문단만 폭을 넓힌다.
   한 줄에 909px이 필요한데 860px이라 49px이 모자라서 "될 수 있습니다."만 둘째 줄에 남았다.
   920px이면 한 줄에 들어간다. 창이 980px보다 좁아지면 어차피 두 줄이 되는데,
   그때는 balance 로 두 줄을 반반으로 나눠서 꼬리가 짧게 남지 않게 한다.
   .hero-p 를 통째로 넓히면 챕터2의 긴 문단 줄바꿈이 다시 흐트러져서 이 문단에만 건다 */
.hero-p--wide{max-width:920px;text-wrap:balance}

/* reading area */
.reading{flex:1;padding:0 0 45px}
/* 카드 배경만 바깥으로 40px 넓히고(네거티브 마진), 본문 텍스트는 히어로 텍스트와 같은 정렬선(spine)에 유지 */
.sheet{margin:0 -40px}
/* 모든 블록을 가로선으로 구분하고, 선 위아래 여백을 동일하게 준다 */
.qa{padding:42px 0}
/* 카드 첫 블록은 위 여백을 줄인다. .sheet 상단 패딩과 .qa 42px가 겹쳐 지나치게 벌어졌다. 반 정도로. */
.sheet>.qa:first-child{padding-top:8px}
.qa>*:last-child{margin-bottom:0}
.qa+.qa{border-top:1px solid var(--divider)}
.q{font-size:25px;font-weight:700;letter-spacing:-.6px;display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.q .bar{align-self:flex-start;margin-top:.2em;flex:none;width:5px;height:22px;border-radius:4px;background:var(--orange)}
.p{font-size:18px;line-height:1.9;font-weight:500;max-width:var(--measure);margin-bottom:14px}
.p.hl{font-weight:700}

/* term card */
.term{margin:22px 0 6px;border-radius:var(--r-md);padding:22px 24px}
.term .thead{display:flex;align-items:center;gap:14px}
.term .ico{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center}
.term .ico svg{width:25px;height:25px}
.term .tname{font-size:19px;font-weight:700;letter-spacing:-.3px}
.term .ttag{margin-left:auto;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.3px}
.term .tdesc{font-size:16px;line-height:1.7;font-weight:500;margin-top:16px;padding-top:16px}

/* term group (EMR/MMR/DMR) */
.term-group{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 6px}
.tcard{position:relative;border-radius:var(--r-md);padding:22px 20px}
/* .term 과 동일한 "용어" 뱃지를 카드 우상단에 (아이콘 줄 오른쪽 끝) */
.tcard .ttag{position:absolute;top:22px;right:20px;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.3px}
.tcard .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px}
.tcard .ico svg{width:22px;height:22px}
.tcard .abbr{font-size:13px;font-weight:700;letter-spacing:.5px;opacity:.85}
.tcard .tcname{font-size:17px;font-weight:700;letter-spacing:-.3px;margin-top:2px}
.tcard .tcdesc{font-size:13.5px;line-height:1.66;font-weight:500;margin-top:12px;padding-top:12px}

/* 진료실 질문 리스트 (챕터 마무리 콜아웃) */
.ask-list{list-style:none;border-radius:var(--r-md);padding:22px 28px;margin:16px 0 20px;display:flex;flex-direction:column;gap:13px}
.ask-list li{position:relative;padding-left:22px;font-size:16.5px;font-weight:700;line-height:1.55}
.ask-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.dir-hybrid .ask-list{background:var(--teal-mist);border:1px solid var(--teal-line)}
.dir-hybrid .ask-list li{color:var(--teal-deep)}
.dir-immersive .ask-list{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.dir-immersive .ask-list li{color:#fff}

/* cta */
.cta-row{margin-top:46px}
.cta{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.4px;text-decoration:none;
  background:linear-gradient(var(--orange-lite),var(--orange));padding:19px 40px;border-radius:14px;
  box-shadow:0 12px 26px -8px rgba(203,82,38,.5);transition:transform .18s ease, box-shadow .18s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(203,82,38,.6)}
.cta .chev{transition:transform .18s ease}
.cta:hover .chev{transform:translateX(4px)}

/* footer — 원본 common.css 스펙 이식(배경/밝기 리듬/한 줄 회사정보/우측 리뷰코드) */
.site-ft{flex:none;background:#335261;color:#fff;padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.4}
.site-ft .inner{position:relative}
.site-ft .ft-note{color:#95cfff;font-weight:400}
.site-ft .ref{list-style:none;font-weight:400;opacity:.62}
.site-ft .ref li{margin-top:18px;word-break:break-all}
.site-ft .ft-code{position:absolute;right:1px;bottom:0;font-weight:400;opacity:.8}
.site-ft .ft-contact{margin-top:40px}
.site-ft .ft-ctit{margin-bottom:8px;font-size:14px;opacity:.7}
.site-ft .ft-company{opacity:.62}
.site-ft .ft-company br{display:none}
.site-ft address{display:inline-block;font-style:normal;font-weight:400}
.site-ft .bar{position:relative}
.site-ft .bar::before{content:"";display:inline-block;width:1px;height:12px;margin:-1px 8px 0 5px;background-color:#fff;vertical-align:middle}
.site-ft .tel{color:#fff;text-decoration:none}
.site-ft .tel:hover{text-decoration:underline}
@media(max-width:900px){
  .site-ft .ref li{margin-top:10px}
  .site-ft .ft-code{position:static;margin-top:25px}
  .site-ft .ft-company br{display:block}
  .site-ft .ft-contact{margin-top:25px}
  .site-ft .ft-ctit{margin-bottom:5px}
}

/* =========================================================
   DIRECTION ① — HYBRID (teal hero, light reading, white sheet)
   ========================================================= */
.dir-hybrid{--divider:#e4edf0}
/* 기존 사이트 틸(#368ea5) 균일 유지, 그 위에 흰 카드가 뜬다 */
/* 배경은 단색 #368ea5 하나로 간다 (2026-08-28 사용자 확정).
   원본은 body #47a9ce 위에 .wrap 그라데이션을 덮어 아래로 갈수록 밝아지는 구조인데,
   그대로 옮겨보니 더 밝은 아래쪽 때문에 위쪽 청록이 상대적으로 탁해 보였다.
   흰 카드가 주인공인 이 디자인에서는 여백 색이 위아래로 변하지 않는 편이 낫다.
   히어로도 자체 그라데이션 없이 같은 단색을 쓴다. */
.dir-hybrid .page{background:#368ea5}
.dir-hybrid .hero{background:transparent}
.dir-hybrid .reading{background:transparent;margin-top:-34px}
.dir-hybrid .sheet{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:30px 40px 46px;position:relative}
.dir-hybrid .q{color:var(--teal-deep)}
.dir-hybrid .p{color:var(--ink-soft)}
.dir-hybrid .p.hl{color:var(--teal-deep)}
.dir-hybrid .term{background:var(--teal-mist);border:1px solid var(--teal-line)}
.dir-hybrid .term .ico{background:linear-gradient(140deg,#2f7c98,#24505f);color:#fff;box-shadow:0 7px 16px -5px rgba(36,80,95,.5)}
.dir-hybrid .term .tname{color:var(--teal-deep)}
.dir-hybrid .term .ttag{background:#fff;color:var(--teal);border:1px solid var(--teal-line)}
.dir-hybrid .term .tdesc{color:var(--ink-soft);border-top:1px dashed var(--teal-line)}
.dir-hybrid .tcard{background:var(--teal-mist);border:1px solid var(--teal-line)}
.dir-hybrid .tcard .ico{background:linear-gradient(140deg,#2f7c98,#24505f);color:#fff}
.dir-hybrid .tcard .abbr{color:var(--teal)}
.dir-hybrid .tcard .tcname{color:var(--teal-deep)}
.dir-hybrid .tcard .ttag{background:#fff;color:var(--teal);border:1px solid var(--teal-line)}
.dir-hybrid .tcard .tcdesc{color:var(--ink-soft);border-top:1px dashed var(--teal-line)}

/* =========================================================
   DIRECTION ③ — IMMERSIVE (full teal, glass sheet, white text)
   ========================================================= */
.dir-immersive{--divider:rgba(255,255,255,.20)}
/* 히어로 틸(#368ea5)을 균일하게 바닥까지 — 그라데이션 없이 위 색 그대로 */
.dir-immersive .page{background:#368ea5}
.dir-immersive .hero{background:transparent}
.dir-immersive .reading{background:transparent;margin-top:-30px}
/* 콘텐츠 = 은은한 반투명(프로스트) 카드 — 틸이 비쳐 보이되 카드로 정의됨 */
.dir-immersive .sheet{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-lg);padding:30px 40px 46px;backdrop-filter:blur(3px)}
.dir-immersive .q{color:#fff}
.dir-immersive .p{color:rgba(255,255,255,.85)}
.dir-immersive .p.hl{color:#ffe6c9}
.dir-immersive .term{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.dir-immersive .term .ico{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22)}
.dir-immersive .term .tname{color:#fff}
.dir-immersive .term .ttag{background:rgba(255,255,255,.14);color:#fff}
.dir-immersive .term .tdesc{color:rgba(255,255,255,.82);border-top:1px dashed rgba(255,255,255,.22)}
.dir-immersive .tcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.dir-immersive .tcard .ico{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22)}
.dir-immersive .tcard .abbr{color:#bfe0ec}
.dir-immersive .tcard .tcname{color:#fff}
.dir-immersive .tcard .ttag{background:rgba(255,255,255,.14);color:#fff}
.dir-immersive .tcard .tcdesc{color:rgba(255,255,255,.8);border-top:1px dashed rgba(255,255,255,.22)}
.dir-immersive .site-ft{background:#18363f}

@media(max-width:1100px){.term-group{grid-template-columns:1fr}.hero .chapter-title{font-size:34px}.hero .lead{font-size:20px}}

/* =========================================================
   Ch3 / Ch4 / Ch5 COMPONENTS (2026-08-21)
   - 모든 모듈은 .p와 동일한 max-width(var(--measure))로 우측 라인 통일
   - 좌측은 항상 spine(=.inner 정렬선). 모듈 내부 들여쓰기 금지
   ========================================================= */

/* 히어로 보조 캡션(출처 안내 등) */
.hero-note{font-size:15px;font-weight:500;line-height:1.7;color:#fff;opacity:.8;margin-top:18px;max-width:900px}

/* 시트 내 모듈 제목 (Q&A가 아닌 챕터: ch3/ch4) */
.mod-hd{font-size:25px;font-weight:700;letter-spacing:-.6px;display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.mod-hd .bar{align-self:flex-start;margin-top:.2em;flex:none;width:5px;height:22px;border-radius:4px;background:var(--orange)}
.mod-sub{font-size:16px;font-weight:500;line-height:1.7;margin-bottom:22px;max-width:var(--measure)}

/* ---------- ch3 : 영상 2블록 ---------- */
.media-grid{display:grid;grid-template-columns:1fr;gap:44px;margin:2px 0 4px}
.mcard{display:flex;flex-direction:column}
.mcard .mlabel{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:-.4px;margin-bottom:12px}
.mcard .mtag{font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px}
.frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#0e2a33;
  box-shadow:0 16px 34px -14px rgba(36,80,95,.5)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 스크립트 디스클로저 (ch3 영상 스크립트 / ch4 진료상담 가이드) */
.disc{margin-top:18px;border-radius:14px;transition:box-shadow .2s ease, border-color .2s ease}
.disc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 18px 17px 22px;
  font-size:15.5px;font-weight:700;letter-spacing:-.3px;border-radius:14px;transition:background .18s ease}
.disc>summary::-webkit-details-marker{display:none}
.disc .chv{margin-left:auto;flex:none;width:34px;height:34px;padding:9px;border-radius:50%;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background .18s ease}
.disc[open] .chv{transform:rotate(180deg)}
.disc[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.disc-body{padding:2px 22px 22px}
.disc-body .script{font-size:15px;line-height:1.95;font-weight:500;letter-spacing:-.2px;max-width:var(--measure)}
.disc[open] .disc-body{animation:faqIn .24s cubic-bezier(.22,.61,.36,1)}
/* 클릭 재생 커버 — Kollus 포스터가 120x67px이라 확대 시 뭉개짐. 클릭 시 autoplay로 교체 */
.vplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:grid;place-items:center;align-content:center;
  background:radial-gradient(130% 110% at 50% 8%,#4aa6c4 0%,#2f7c98 46%,#1f4655 100%);transition:filter .25s ease}
.vplay .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vplay::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,32,40,.25),rgba(11,32,40,.5))}
.vplay .pico{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.12);
  transition:transform .24s cubic-bezier(.22,.61,.36,1), background .24s ease}
.vplay .pico svg{width:26px;height:26px;margin-left:4px;color:#fff}
.vplay .plabel{position:relative;z-index:2;margin-top:18px;font-size:14px;font-weight:700;letter-spacing:-.2px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.vplay:hover{filter:brightness(1.05)}
.vplay:hover .pico{transform:scale(1.07);background:rgba(255,255,255,.18)}
.vplay:active .pico{transform:scale(1.01)}


/* ---------- ch4 : 액션 카드 2개 ---------- */
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:2px 0 4px}
.act{display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:var(--r-md);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.act .ico{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px}
.act .ico svg{width:25px;height:25px}
.act .akind{font-size:11.5px;font-weight:700;letter-spacing:.5px;margin-top:18px}
.act .atitle{font-size:20px;font-weight:700;letter-spacing:-.5px;margin-top:0;line-height:1.3}
.act .adesc{font-size:14.5px;line-height:1.75;font-weight:500;margin-top:11px;margin-bottom:18px}
.act-row{margin-top:auto;padding-top:17px;display:flex;align-items:center;flex-wrap:wrap;row-gap:8px}
.act .ago{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;padding:0}
.act .ago .arw{transition:transform .18s ease}
.act .ago:hover .arw{transform:translateX(4px)}

/* ---------- ch5 : 탭 + FAQ 아코디언 ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 6px}
.tab{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border:1px solid transparent;border-radius:12px;
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.3px;cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease}
.tab .n{font-size:12px;font-weight:700;line-height:1;padding:4px 8px;border-radius:20px}
.tab:hover{transform:translateY(-1px)}

.faq{margin-top:26px}
.faq details{border-top:1px solid var(--divider)}
.faq details:last-child{border-bottom:1px solid var(--divider)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:21px 0;
  font-size:18.5px;font-weight:700;letter-spacing:-.5px;line-height:1.45;transition:color .18s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chv{margin-left:auto;flex:none;width:17px;height:17px;margin-top:5px;transition:transform .22s ease}
.faq details[open] summary .chv{transform:rotate(180deg)}
.faq .abody{padding:2px 0 26px}
.faq .abody .p{font-size:16.5px;line-height:1.85;margin-bottom:12px;max-width:var(--measure)}
.faq .abody .p:last-child{margin-bottom:0}
.faq .abody .ask-list{margin:14px 0 4px}
.faq .abody .cta-row{margin-top:22px}
.faq details[open] .abody{animation:faqIn .24s cubic-bezier(.22,.61,.36,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* 자료 링크(PDF/외부) 행 */
.res{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-md);text-decoration:none;
  margin:16px 0 4px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.res .ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.res .ico svg{width:19px;height:19px}
.res .rkind{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:3px}
.res .rtxt{font-size:15px;font-weight:700;letter-spacing:-.3px;line-height:1.45}
.res .arw{margin-left:auto;padding-left:16px;flex:none;transition:transform .18s ease}
.res:hover{transform:translateY(-2px)}
.res:hover .arw{transform:translateX(4px)}
.abody .dl{margin:12px 0 0 18px}
.dl{position:relative;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:-.3px;transition:opacity .18s ease}
.act-row .dl{margin-left:auto}
.dl svg{width:15px;height:15px}
.dl:hover{opacity:.68}
.dir-hybrid .dl{color:var(--ink-soft)}
.dir-hybrid .dl:hover{color:var(--teal)}
.dir-immersive .dl{color:#bfe0ec}

/* 보조 CTA (챕터 내 연결) */
.cta.ghost{background:none;box-shadow:none;font-size:16px;padding:14px 26px;border:1.5px solid}

/* ---------- ① HYBRID 스킨 ---------- */
.dir-hybrid .mod-hd{color:var(--teal-deep)}
.dir-hybrid .mod-sub{color:var(--ink-soft)}
.dir-hybrid .mcard .mlabel{color:var(--teal-deep)}
.dir-hybrid .disc{background:#fff;border:1.5px solid var(--teal-line);box-shadow:0 2px 0 rgba(36,80,95,.04)}
.dir-hybrid .disc:hover{border-color:#a9cdd6;box-shadow:0 8px 20px -12px rgba(36,80,95,.45)}
.dir-hybrid .disc>summary{color:var(--teal-deep)}
.dir-hybrid .disc>summary:hover{background:var(--teal-mist)}
.dir-hybrid .disc .chv{color:var(--teal);background:var(--teal-mist)}
.dir-hybrid .disc>summary:hover .chv{background:var(--orange);color:#fff}
.dir-hybrid .disc[open] .chv{background:var(--orange);color:#fff}
.dir-hybrid .disc-body .script{color:var(--ink-soft)}
.dir-hybrid .mcard .mtag{background:var(--teal-mist);color:var(--teal);border:1px solid var(--teal-line)}
.dir-hybrid .act{background:var(--teal-mist);border:1px solid var(--teal-line)}
.dir-hybrid .act .ico{background:linear-gradient(140deg,#2f7c98,#24505f);color:#fff;box-shadow:0 7px 16px -5px rgba(36,80,95,.5)}
.dir-hybrid .act .akind{color:var(--teal)}
.dir-hybrid .act .atitle{color:var(--teal-deep)}
.dir-hybrid .act .adesc{color:var(--ink-soft)}
.dir-hybrid .act-row{border-top:1px solid #dde9ed}
.dir-hybrid .act .ago{color:var(--orange)}

.dir-hybrid .tab{background:var(--teal-mist);border-color:var(--teal-line);color:var(--teal)}
.dir-hybrid .tab .n{background:#fff;color:var(--teal);border:1px solid var(--teal-line)}
.dir-hybrid .tab.on{background:linear-gradient(160deg,#2f7c98,#24505f);border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -10px rgba(36,80,95,.65)}
.dir-hybrid .tab.on .n{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
.dir-hybrid .faq summary{color:var(--teal-deep)}
.dir-hybrid .faq summary:hover{color:var(--teal)}
.dir-hybrid .faq summary .chv{color:var(--orange)}
.dir-hybrid .faq .abody .p{color:var(--ink-soft)}
.dir-hybrid .res{background:var(--teal-mist);border:1px solid var(--teal-line)}
.dir-hybrid .res .ico{background:linear-gradient(140deg,#2f7c98,#24505f);color:#fff}
.dir-hybrid .res .rkind{color:var(--teal)}
.dir-hybrid .res .rtxt{color:var(--teal-deep)}
.dir-hybrid .res .arw{color:var(--orange)}
.dir-hybrid .res:hover{border-color:#b9d7de;box-shadow:0 14px 28px -16px rgba(36,80,95,.45)}
.dir-hybrid .cta.ghost{color:var(--teal-deep);border-color:var(--teal-line);background:var(--teal-mist)}
.dir-hybrid .cta.ghost:hover{border-color:#b9d7de;box-shadow:0 12px 24px -14px rgba(36,80,95,.5)}

/* ---------- ③ IMMERSIVE 스킨 (참고 보존 방향과 동일 규칙 유지) ---------- */
.dir-immersive .mod-hd,.dir-immersive .mcard .mlabel{color:#fff}
.dir-immersive .mcard .mtag{background:rgba(255,255,255,.14);color:#fff}
.dir-immersive .disc{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.dir-immersive .disc>summary{color:#fff}
.dir-immersive .disc .chv{color:#ffd8a4}
.dir-immersive .disc-body .script{color:rgba(255,255,255,.85)}
.dir-immersive .mod-sub{color:rgba(255,255,255,.85)}
.dir-immersive .act{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.dir-immersive .act .ico{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22)}
.dir-immersive .act .akind{color:#bfe0ec}
.dir-immersive .act .atitle{color:#fff}
.dir-immersive .act .adesc{color:rgba(255,255,255,.8)}
.dir-immersive .act-row{border-top:1px solid rgba(255,255,255,.18)}
.dir-immersive .act .ago{color:#ffd8a4}
.dir-immersive .tab{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.dir-immersive .tab .n{background:rgba(255,255,255,.14);color:#fff}
.dir-immersive .tab.on{background:#fff;border-color:transparent;color:var(--teal-deep)}
.dir-immersive .tab.on .n{background:var(--teal-mist);color:var(--teal)}
.dir-immersive .faq summary{color:#fff}
.dir-immersive .faq summary .chv{color:#ffd8a4}
.dir-immersive .faq .abody .p{color:rgba(255,255,255,.85)}
.dir-immersive .res{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.dir-immersive .res .ico{background:rgba(255,255,255,.15);color:#fff}
.dir-immersive .res .rkind{color:#bfe0ec}
.dir-immersive .res .rtxt{color:#fff}
.dir-immersive .res .arw{color:#ffd8a4}
.dir-immersive .cta.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}

@media(max-width:1100px){
  .media-grid,.act-grid{grid-template-columns:1fr}
  .faq summary{font-size:17px}
}

/* ---------- 상태: 눌림 / 키보드 포커스 ---------- */
.cta:active,.act:active,.res:active{transform:translateY(0) scale(.994)}
.tab:active{transform:translateY(0)}
.gnb a:active{transform:translateY(0)}
.faq summary:active .qt{opacity:.75}
:where(.gnb a,.nav-toggle,.cta,.act,.res,.tab,.faq summary):focus-visible{outline:2.5px solid var(--orange-hi);outline-offset:3px;border-radius:var(--r-sm)}
.dir-immersive :where(.gnb a,.nav-toggle,.cta,.act,.res,.tab,.faq summary):focus-visible{outline-color:#ffd8a4}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- 진입 모션(스태거) ---------- */
/* 진입: 투명하게 아래에서 위로 천천히. easeOutQuint로 길게 감속해 고급스럽게 흐른다. 블러 없음. */
.has-reveal .reveal{opacity:0;transform:translateY(22px)}
.has-reveal .reveal.is-in{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1)}
/* 히어로 큰 제목은 renewal.js가 단어(.word)로 쪼갠다. 각 단어가 따로 올라와 모션그래픽처럼 흐른다. */
.display .word{display:inline-block;will-change:transform}
/* 깜빡임 방지: JS가 .reveal 을 붙이기 전 첫 페인트에서 잠깐 보였다 사라지던 것을 막는다.
   .has-reveal 는 각 페이지 head 인라인 스크립트가 페인트 전에 붙인다. .reveal 이 붙으면 다시 보인다.
   (.display 자체는 .reveal 을 안 받고 그 안 .word 만 받으므로, .word 가 부모의 숨김을 이긴다) */
.has-reveal .hero .inner > *:not(.reveal),
.has-reveal .hero--main .display:not(.reveal),
.has-reveal .sheet > .qa > *:not(.reveal),
.has-reveal .sheet > .cta-row > *:not(.reveal){visibility:hidden}
.has-reveal .reveal{visibility:visible}
/* 모바일은 올라오는 폭만 줄인다. */
@media(max-width:1024px){
  .has-reveal .reveal{transform:translateY(14px)}
}

/* =========================================================
   MAIN (index) — 히어로 단독 페이지
   콘텐츠가 짧아 화면이 비므로: ①풀높이 히어로 ②디스플레이 타이포 대비
   ③로고의 일출 모티프를 대형 인라인 SVG로 확장(신규 이미지 파일 없음)
   ========================================================= */
/* 히어로 높이는 원래대로 화면 한 장(푸터는 스크롤해야 보인다).
   카피는 가운데 정렬을 버리고 위에서 띄운다.
   헤더 아래에서 카피 첫 줄 글자 윗변까지 최대 180px. 글자 윗변이 여백 끝보다 20px 아래라 여백은 160px.
   화면이 낮으면 calc(50dvh - 277px)이 작아지면서 지금까지의 가운데 정렬과 같은 자리를 잡고,
   화면이 높아지면 160px에서 멈춘다. 아무리 큰 모니터에서도 카피가 아래로 내려가지 않는다 */
.hero--main{display:flex;align-items:flex-start;min-height:calc(100dvh - 128px);
  padding:clamp(48px,calc(50dvh - 277px),160px) 0 84px}
/* 메인 히어로 배경영상.
   영상 위에 청록 오버레이를 왼쪽에서 오른쪽으로 걷어내서, 왼쪽 카피 자리는 단색 그대로 두고
   오른쪽에서만 장면이 배어나오게 한다. 사각형 경계가 생기지 않도록 그라데이션으로만 처리한다. */
.hero--main::before{content:none}
.hero--main .main-hero-video{position:absolute;right:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none;
  /* 히어로를 다 채우면 왼쪽이 잘려나간다. 화면의 절반 남짓으로 줄여 오른쪽 아래에 앉히고
     영상 비율(16:9) 그대로 두어 잘리는 곳이 없게 한다.
     2026-08-30 74%에서 66%로 줄임. 74%일 때 1440x900에서 남자 머리 끝이 213이라
     큰제목 띠(아랫변 245) 안으로 들어와 초점이 둘로 갈렸다. 66%면 274로 내려가 29px 뜬다.
     본문에서 가장 긴 줄이 x=904에서 끝나는데 영상이 보이기 시작하는 자리가 857에서 920으로
     밀려나서, 카피 전체가 단색 위에만 놓인다.
     아래 히어로 높이 계산식에 있는 74vw는 이제 영상 폭이 아니라 그냥 레이아웃 상수다.
     거기까지 66으로 바꾸면 카피가 13px 올라가고 히어로가 짧아진다. 건드리지 말 것 */
  width:min(66%,1050px);aspect-ratio:16/9;
  /* 왼쪽변과 윗변을 따로 녹인다. 윗변은 세로 그라데이션, 왼쪽은 타원 하나를 겹쳐서 쓴다.
     처음에는 오른쪽 아래 모서리에서 퍼지는 원 하나로 다 처리했는데, 그러면 위로 갈수록
     지워지는 양이 한꺼번에 커진다. 그래서 윗변과 왼쪽을 갈라놨다.
     2026-09-01 경계가 급하다는 지적을 받고 양쪽 다 훨씬 길고 완만하게 다시 잡았다.
     예전에는 타원이 71%까지 완전히 불투명하다가 남은 29% 안에서 한꺼번에 사라졌다.
     지금은 54%부터 풀어서 46% 구간에 걸쳐 내려간다. 구간을 두 배 가까이 늘린 셈이다.
     윗변도 24%에서 끝나던 것을 40%까지 늘렸다. 예전 곡선은 처음 9%만에 42%까지 올라가
     화면 맨 위에서 영상이 툭 나타났는데, 지금은 앞이 완만해서 배경에서 배어나오듯 보인다.
     두 그라데이션 모두 3에서 5% 간격으로 촘촘히 끊어 계단이 안 보이게 했다.
     새 클립(챕터3 캠페인 6분 51초부터)은 예전 파일과 달리 왼쪽에 청록 여백이 없다.
     그래서 사라지는 자리를 29.5%에 억지로 맞출 이유가 없어졌고, 그만큼 길게 늘릴 수 있었다 */
  -webkit-mask-image:radial-gradient(74% 178% at 100% 100%,#000 0 54%,rgba(0,0,0,.985) 61%,rgba(0,0,0,.955) 66%,rgba(0,0,0,.905) 71%,rgba(0,0,0,.835) 75%,rgba(0,0,0,.745) 79%,rgba(0,0,0,.635) 83%,rgba(0,0,0,.510) 87%,rgba(0,0,0,.380) 90%,rgba(0,0,0,.250) 93%,rgba(0,0,0,.140) 96%,rgba(0,0,0,.055) 98%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.06) 7%,rgba(0,0,0,.13) 10%,rgba(0,0,0,.22) 13%,rgba(0,0,0,.33) 16%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.89) 31%,rgba(0,0,0,.95) 34%,rgba(0,0,0,.98) 37%,#000 40%);
  mask-image:radial-gradient(74% 178% at 100% 100%,#000 0 54%,rgba(0,0,0,.985) 61%,rgba(0,0,0,.955) 66%,rgba(0,0,0,.905) 71%,rgba(0,0,0,.835) 75%,rgba(0,0,0,.745) 79%,rgba(0,0,0,.635) 83%,rgba(0,0,0,.510) 87%,rgba(0,0,0,.380) 90%,rgba(0,0,0,.250) 93%,rgba(0,0,0,.140) 96%,rgba(0,0,0,.055) 98%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.06) 7%,rgba(0,0,0,.13) 10%,rgba(0,0,0,.22) 13%,rgba(0,0,0,.33) 16%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.89) 31%,rgba(0,0,0,.95) 34%,rgba(0,0,0,.98) 37%,#000 40%);
  /* 두 장을 겹쳐서 둘 다 살아 있는 곳만 보이게 한다. 옛 사파리는 source-in 으로 같은 뜻이다 */
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}

/* sc-hide (6번 마지막 장면). 왼쪽에 박힌 「그리고 아주 보통의 하루가 시작된다」와 로고가
   지금 마스크로는 흐리게 비친다. 가로 방향 그라데이션을 한 겹 더 겹쳐 왼쪽을 더 지운다.
   영상을 밀지 않은 상태에서 글자 오른쪽 끝은 상자의 46.9%, 인물 머리 왼쪽 끝은 49.4%,
   얼굴 살이 시작되는 곳은 59% 자리다. 그래서 47%까지 완전히 지우고 62%에서 다 살아나게 잡았다.
   지워지는 구간에 걸리는 것은 머리카락 바깥쪽뿐이고 얼굴 살은 온전히 남는다 */
@media(min-width:901px){
.hero--main .main-hero-video.sc-hide{
  -webkit-mask-image:radial-gradient(74% 178% at 100% 100%,#000 0 54%,rgba(0,0,0,.985) 61%,rgba(0,0,0,.955) 66%,rgba(0,0,0,.905) 71%,rgba(0,0,0,.835) 75%,rgba(0,0,0,.745) 79%,rgba(0,0,0,.635) 83%,rgba(0,0,0,.510) 87%,rgba(0,0,0,.380) 90%,rgba(0,0,0,.250) 93%,rgba(0,0,0,.140) 96%,rgba(0,0,0,.055) 98%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.06) 7%,rgba(0,0,0,.13) 10%,rgba(0,0,0,.22) 13%,rgba(0,0,0,.33) 16%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.89) 31%,rgba(0,0,0,.95) 34%,rgba(0,0,0,.98) 37%,#000 40%),
    linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.10) 49.5%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.52) 54.5%,rgba(0,0,0,.74) 57%,rgba(0,0,0,.90) 59%,#000 62%);
  mask-image:radial-gradient(74% 178% at 100% 100%,#000 0 54%,rgba(0,0,0,.985) 61%,rgba(0,0,0,.955) 66%,rgba(0,0,0,.905) 71%,rgba(0,0,0,.835) 75%,rgba(0,0,0,.745) 79%,rgba(0,0,0,.635) 83%,rgba(0,0,0,.510) 87%,rgba(0,0,0,.380) 90%,rgba(0,0,0,.250) 93%,rgba(0,0,0,.140) 96%,rgba(0,0,0,.055) 98%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.06) 7%,rgba(0,0,0,.13) 10%,rgba(0,0,0,.22) 13%,rgba(0,0,0,.33) 16%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.89) 31%,rgba(0,0,0,.95) 34%,rgba(0,0,0,.98) 37%,#000 40%),
    linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.10) 49.5%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.52) 54.5%,rgba(0,0,0,.74) 57%,rgba(0,0,0,.90) 59%,#000 62%)}
.hero--main .main-hero-video.sc-hide video{
  /* 2026-09-01 얼굴 오른쪽이 잘려서 밀던 것을 완전히 되돌렸다.
     머리 오른쪽 끝이 프레임의 95.6% 자리라, 조금만 밀어도 상자 밖으로 나간다.
     밀지도 키우지도 않는다. 얼굴 전체가 상자의 49%에서 96% 사이에 들어온다 */
  transform:none}
}
.hero--main .main-hero-video video{width:100%;height:100%;display:block;object-fit:cover;object-position:center 50%}
/* 장면별 보정 (2026-09-01 사용자 요청).
   영상에 자막이 박혀 있는데 장면마다 자리가 달라서 한 가지 설정으로는 안 맞는다.
   재생 시각을 보고 .main-hero-video 에 클래스를 갈아끼운다. 컷이 바뀌는 순간에만
   값이 바뀌므로 화면에서는 움직임이 안 보인다. 컷 시각 실측: 2.2 / 4.3 / 6.5 / 10.0 / 17.7초

   sc-push (3,4,5번 장면). 자막이 화면 가운데 있어서 왼쪽 절반이 마스크에 잘렸다.
   왼쪽을 기준으로 13% 키우고 오른쪽으로 13% 밀어 자막을 마스크 바깥으로 빼낸다.
   프레임 오른쪽 23%가 상자 밖으로 나가지만 그 구간은 배경뿐이라 잃는 게 없다 */
@media(min-width:901px){
.hero--main .main-hero-video.sc-push video{
  transform:translateX(13%) scale(1.13);transform-origin:left center}
}

/* sc-first (1번 장면, 0에서 2.2초). 상자 왼쪽이 마스크로 지워져서 화면에는 의사 오른쪽과
   iMac만 남았다. 컴퓨터는 빼고 왼쪽 여자와 의사가 같이 나오게 옮긴다.
   프레임에서 여자 뒷모습은 3에서 27%, 의사는 31에서 67.5%, iMac 왼쪽 끝은 69% 자리다.
   1.31배 키우고 오른쪽으로 12% 밀면 이렇게 앉는다.
     여자 뒷모습  상자의 15.5에서 47%   (마스크가 26%부터 걷히니 오른쪽 절반이 보인다)
     의사        상자의 52에서 100%    (통째로 들어온다)
     iMac        상자의 102%부터       (화면 밖)
   여자 머리 오른쪽 끝을 47%에 맞춘 이유가 있다. 카피에서 가장 긴 줄이 상자의 43.6%에서
   끝나는데, 그보다 왼쪽에 인물을 두면 글자 뒤에 검은 머리가 깔려 읽기가 나빠진다.
   1.46배로 키워만 봤더니 iMac은 사라졌지만 여자가 39%에 머물러 마스크에 다 잠겼다.
   왼쪽 12% 구간에는 영상이 없는데, 마스크가 26%까지 완전히 지우고 있어서 안 보인다.
   세로는 가운데 기준이라 위아래 11.8%씩 잘리는데, 의사 머리 끝이 24.8% 자리라 안 잘린다 */
@media(min-width:901px){
.hero--main .main-hero-video.sc-first video{
  transform:translateX(12%) scale(1.31);transform-origin:left center}
}

/* .hero::after(오른쪽 위 원형 하이라이트)를 메인에서는 이 오버레이가 대신한다.
   width/height/border-radius를 되돌려놔야 원형이 남지 않는다 */
.hero--main::after{content:"";position:absolute;inset:0;z-index:1;width:auto;height:auto;border-radius:0;pointer-events:none;
  background:linear-gradient(90deg,
    #368ea5 0%,
    #368ea5 42%,
    rgba(54,142,165,.96) 54%,
    rgba(54,142,165,.78) 72%,
    rgba(54,142,165,.66) 100%)}
.hero--main .inner{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .hero--main .main-hero-video{display:none}
  .hero--main::after{background:#368ea5}
}
.hero--main .inner{width:100%}
.hero--main .headline{display:block}
.hero--main .kicker{display:block;font-size:25px;font-weight:600;letter-spacing:-.8px;line-height:1.45;opacity:.92;max-width:760px}
.hero--main .display{display:block;font-size:62px;font-weight:800;letter-spacing:-2.2px;line-height:1.16;margin-top:14px;max-width:900px}
/* 강조 <b> 는 부모 굵기를 그대로 따른다.
   브라우저 기본이 bolder 라 그냥 두면 부모보다 한 단계 올라간다.
   700 으로 못박아뒀더니 헤드카피를 900 으로 올린 뒤 주황 글자만 700 에 남아
   흰 글자보다 얇아 보였다. inherit 로 두면 부모가 바뀌어도 항상 같이 간다 */
.hero--main .display b{color:var(--hero-hi);font-weight:inherit}
.hero--main .main-p{font-size:18px;font-weight:500;line-height:1.85;opacity:.93;margin-top:30px;max-width:780px;text-wrap:pretty}
/* 720px에서는 '치료의 발전으로...되었습니다.' 한 문장이 748px이라 두 줄로 접혔다.
   네 문장 실측 748 / 701 / 495 / 513 이라 780px이면 전부 한 줄에 들어간다 */
.hero--main .main-p+.main-p{margin-top:16px}
.hero--main .cta-row{margin-top:46px}


@media(max-width:1180px){
  .hero--main .display{font-size:48px;letter-spacing:-1.4px}
  .hero--main .kicker{font-size:21px}
}
@media(max-width:760px){
  .hero--main .display{font-size:36px;letter-spacing:-1px}
}


/* =========================================================
   MOBILE (2026-08-28)
   브레이크포인트는 원본 common.css를 그대로 따른다.
   1024 이하에서 헤더 90 / 로고 64 / 햄버거, 540 이하에서 헤더 64 / 로고 44.
   나중에 실제 페이지로 옮길 때 어긋나지 않게 하려는 것이다.
   ========================================================= */

@media(max-width:1024px){
  .hero--main{--hd:90px}
  .site-hd{height:90px}
  .site-hd .logo{height:64px}
  .inner{padding:0 30px}
  /* 카드가 화면 밖으로 삐져나가지 않게 네거티브 마진을 줄인다 */
  .sheet{margin:0 -16px}
  .dir-hybrid .sheet,.dir-immersive .sheet{padding:26px 16px 34px}

  /* ---- 햄버거 버튼 ---- */
  .nav-toggle{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-right:-9px;border:0;padding:0;background:none;cursor:pointer;
    border-radius:12px;transition:background .18s ease}
  .nav-toggle:hover{background:var(--teal-mist)}
  .nav-toggle:active{transform:scale(.94)}
  .nav-toggle .bars{position:relative;display:block;width:26px;height:18px}
  .nav-toggle .bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--teal-deep);
    transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .16s ease, background .2s ease}
  .nav-toggle .bars i:nth-child(1){top:0}
  .nav-toggle .bars i:nth-child(2){top:8px}
  .nav-toggle .bars i:nth-child(3){top:16px}
  /* 열리면 가운데 줄이 접히면서 X가 된다 */
  .nav-open .nav-toggle .bars i:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--orange)}
  .nav-open .nav-toggle .bars i:nth-child(2){opacity:0;transform:scaleX(.3)}
  .nav-open .nav-toggle .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--orange)}

  /* ---- 챕터 목록 패널 ---- */
  .gnb{position:fixed;left:0;right:0;top:90px;bottom:0;z-index:19;
    display:block;gap:0;margin:0;padding:20px 30px 40px;overflow-y:auto;
    background:linear-gradient(158deg,#2f7c98 0%,#24505f 100%);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .26s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s}
  .nav-open .gnb{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

  .gnb a{position:relative;width:auto;padding:19px 6px;border-radius:0;background:none;text-align:left;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    border-bottom:1px solid rgba(255,255,255,.13);
    opacity:0;transform:translateY(12px)}
  /* 패널은 포커스를 받아도 테두리를 그리지 않는다 */
  .gnb:focus,.gnb:focus-visible{outline:none}
  .gnb a:last-child{border-bottom:0}
  .gnb a:hover{background:rgba(255,255,255,.06)}
  .gnb a:active{background:rgba(255,255,255,.11)}
  .gnb .kick{font-size:11px;letter-spacing:1.6px;opacity:.62}
  .gnb .name{font-size:21px;line-height:1.3;letter-spacing:-.6px;margin-top:5px;word-break:keep-all}
  /* 지금 보고 있는 챕터 */
  .gnb a.on{background:none;box-shadow:none;padding-left:19px}
  .gnb a.on::before{content:"";position:absolute;left:0;top:19px;bottom:19px;width:4px;border-radius:2px;background:var(--orange-hi)}
  .gnb a.on .kick{color:var(--orange-hi);opacity:1}

  /* 패널이 열릴 때 한 줄씩 차례로 올라온다 */
  .nav-open .gnb a{opacity:1;transform:none;
    transition:opacity .3s ease, transform .36s cubic-bezier(.22,.61,.36,1), background .18s ease}
  .nav-open .gnb a:nth-child(1){transition-delay:.05s}
  .nav-open .gnb a:nth-child(2){transition-delay:.10s}
  .nav-open .gnb a:nth-child(3){transition-delay:.15s}
  .nav-open .gnb a:nth-child(4){transition-delay:.20s}
  .nav-open .gnb a:nth-child(5){transition-delay:.25s}

  /* 히어로 높이도 줄어든 헤더에 맞춘다.
     헤더 높이를 빼지 않고 화면 높이를 통째로 준다. 그래야 주소창이 떠 있든 걷혀 있든
     영상이 항상 화면 맨 아래까지 내려간다. lvh는 주소창이 걷힌 상태 기준 */
  .hero--main{min-height:100dvh;min-height:100lvh}
}

@media(max-width:900px){
  /* 세로 화면에서는 영상을 아래로 눕힌다.
     가로로 밀어내던 오버레이도 위아래 방향으로 바꾼다.
     글은 위쪽, 영상은 아래쪽. 겹치는 구간은 위쪽 페이드로 녹인다 */
  /* 헤더 아래에서 카피 첫 줄까지의 여백. 데스크톱과 달리 모바일은 화면이 좁아
     글이 길어지므로 위 여백을 짧게 가져간다 (2026-08-28 두 차례에 걸쳐 기존값에서 36% 축소) */
  /* .hero 규칙보다 뒤에 오지 않아도 이기도록 클래스를 겹쳐 우선순위를 올린다 */
  .hero.hero--main{--hero-pt:clamp(8px,4.35dvh,39px);padding:var(--hero-pt) 0 0}
  /* 버튼은 마지막 문단 바로 아래에. 문단 사이 여백(16px)과 같은 값 */
  .hero--main .cta-row{margin:16px 0 0}
  /* 챕터 히어로 상단 여백을 랜딩(.hero--main)과 동일하게 맞춘다. 첫 줄(CHAPTER n)이 랜딩 첫 줄과
     같은 높이에서 시작하도록. 하단은 그대로. */
  .hero{padding:clamp(8px,4.35dvh,39px) 0 50px}
  /* 영상 높이를 화면의 몇 퍼센트로 잡으면 기기마다 카피 높이가 달라져 버튼과 겹친다.
     세로로 쌓아서 카피 다음에 영상이 오게 한다. 어떤 기기에서도 절대 안 겹친다 */
  .hero.hero--main{flex-direction:column;align-items:stretch}
  .hero--main .inner{order:1;flex:0 0 auto}
  /* 버튼을 흐름에서 빼서 영상 위에 띄운다. 그래야 영상이 본문 끝에서부터 시작한다 */
  .hero--main .cta-row{position:absolute;left:30px;top:100%;margin:16px 0 0}
  /* 영상은 본문 끝에서 시작해 버튼을 지나 아래로 서서히 드러난다.
     위 3분의 1은 10% 미만이라 시작점이 안 보인다 */
  /* 영상은 본문 끝에서 시작해 버튼을 지나 아래로 서서히 드러난다 */
  .hero--main .main-hero-video{position:relative;order:2;flex:1 1 auto;inset:auto;
    margin-top:0;min-height:150px;width:100%;height:auto;aspect-ratio:auto;
    /* 마스크와 오버레이가 겹치면 얼굴 부분이 두 번 지워진다. 마스크는 쓰지 않고
       아래 오버레이 하나로만 녹인다 */
    -webkit-mask-image:none;mask-image:none}
  /* 2026-09-01 영상을 챕터3 캠페인 6분 51초부터 7분 16초까지 25초 그대로 잘라 쓰는 걸로 바꿨다.
     예전 파일은 장면마다 왼쪽에 청록 여백이 붙어 있어서 영상을 156%까지 넓히고 왼쪽으로
     56% 밀어 그 여백을 화면 밖으로 빼냈었다. 새 클립은 여백 없는 원본이라 그 보정이
     이제는 그냥 왼쪽을 잘라먹기만 한다. 그래서 가운데 기준으로 되돌린다.
     대신 폭을 그대로 100%로 두면 세로가 좁은 폰에서 220px밖에 안 나와 히어로 아래가 빈다.
     132%로 살짝 키우고 좌우를 똑같이 16%씩 잘라 가운데를 지킨다. 한쪽으로 안 치우친다.
     아래로 24px 내리는 것은 마지막 로고 컷에서 인물 얼굴이 버튼 뒤에 걸리는 것을 피하려는 것이다 */
  .hero--main .main-hero-video video{position:absolute;top:auto;bottom:-24px;left:-16%;width:132%;height:auto;
    /* 윗변이 배경과 이어지도록 녹인다.
       2026-09-01 25%에서 곧장 올라가던 직선 하나였는데 시작하는 자리가 눈에 띄었다.
       44%까지 늘리고 4% 간격으로 끊어 완만하게 바꿨다 */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.07) 8%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.26) 16%,rgba(0,0,0,.39) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.67) 28%,rgba(0,0,0,.79) 32%,rgba(0,0,0,.89) 36%,rgba(0,0,0,.96) 40%,#000 44%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.07) 8%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.26) 16%,rgba(0,0,0,.39) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.67) 28%,rgba(0,0,0,.79) 32%,rgba(0,0,0,.89) 36%,rgba(0,0,0,.96) 40%,#000 44%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    object-position:center center}
  /* 글이 놓이는 위쪽은 단색으로 지키고, 아래 3분의 1에서만 장면이 올라온다 */
  .hero--main::after{background:linear-gradient(180deg,
    #368ea5 0%,
    #368ea5 54%,
    rgba(54,142,165,.80) 68%,
    rgba(54,142,165,.62) 100%)}
  /* 데스크톱 줄바꿈용으로 넣어둔 <br>이 좁은 화면에서는 줄을 잘게 쪼갠다. 지운다 */
  .br-mo{display:inline}
  .hero--main .main-p{max-width:none}
  .hero--main .main-p br{display:none}
  /* 예전에는 여기서 히어로 문단만 word-break:normal 로 풀었다. 오른쪽 끝은 가지런해지는데
     375px에서 재보니 일곱 줄 중 여섯 줄에서 낱말이 잘렸다. "되었습니 / 다.", "처음 치료 / 를"
     처럼 마침표나 조사만 넘어가는 줄까지 나왔다. 한국어는 어절 단위로 읽어서 이게 더 걸린다.
     그래서 사이트 기본값인 keep-all 로 되돌렸다. 되돌린 뒤 재보니 오른쪽에 남는 여백이
     대부분 문단 폭의 9% 안쪽이고 가장 심한 줄이 23%였다. 왼쪽 정렬 글에서 그 정도 들쭉날쭉함은
     정상 범위다. 낱말이 잘리는 쪽이 더 나쁘다고 봤다.
     낱말 하나가 줄보다 길면 body 에 걸어둔 overflow-wrap:break-word 가 받아준다 */
}

@media(max-width:540px){
  .hero--main{--hd:64px}
  .hero--main .cta-row{left:20px}
  .site-hd{height:64px}
  .site-hd .logo{height:44px}
  .inner{padding:0 20px}
  .sheet{margin:0 -8px}
  .dir-hybrid .sheet,.dir-immersive .sheet{padding:22px 12px 28px}
  .nav-toggle{margin-right:-7px}
  .gnb{top:64px;padding:14px 20px 34px}
  .gnb a{padding:16px 4px}
  .gnb .name{font-size:19px}
  .gnb a.on::before{top:16px;bottom:16px}
  .hero--main{min-height:100dvh;min-height:100lvh}
  .hero--main .main-p{font-size:16px;line-height:1.8}
  /* 좁은 화면에서 버튼 글자가 두 줄로 접히면서 화살표가 옆에 떠 있었다.
     한 줄을 보장하고 폭을 줄인다 */
  .cta{font-size:17px;padding:17px 28px;gap:8px;white-space:nowrap}
  .hero .chapter-title{font-size:28px}
  .hero .lead{font-size:18px}
  /* pretty 로 두면 마지막 줄에 한 어절만 덩그러니 남는 걸 브라우저가 줄여준다.
     375px 랜딩에서 마지막 줄이 "있습니다."에서 "수 있습니다."로 한 어절 늘었다 */
  .hero-p{font-size:16px;line-height:1.75;text-wrap:pretty;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .gnb,.gnb a,.nav-toggle .bars i{transition-duration:.01ms !important;transition-delay:0s !important}
}


/* =========================================================
   영상 원색 비교용 (index-hybrid-color.html 전용)
   청록 오버레이와 색보정을 끄고 영상 원래 색으로 본다.
   녹아드는 그라데이션(마스크)은 그대로 둔다.
   ========================================================= */
/* 2026-09-01 사용자 확정. 영상은 처음부터 원본 색 그대로 간다.
   전에는 청록에 잠긴 채로 시작해서 중간부터 색이 서서히 올라왔는데, 영상이
   챕터3 캠페인 6분 51초부터 7분 16초까지를 그대로 쓰는 것으로 바뀌면서 그 연출을 걷어냈다.
   색을 누르지 않으므로 filter 도 transition 도 걸지 않는다.
   왼쪽 카피 자리는 아래 마스크가 영상 자체를 지워서 청록 단색이 그대로 남는다.
   되살릴 일이 생기면 saturate(.30) contrast(.88) brightness(.78) 에서 1로 7.7초 전환이었다 */
.raw-video .main-hero-video video{filter:none}

/* 청록 오버레이는 처음부터 걷혀 있다. 배경 색과 마스크만으로 카피 자리를 지킨다.
   background 를 남겨두는 것은 다시 켤 때 색을 다시 찾지 않게 하려는 것이다 */
.raw-video .hero--main::after{
  background:linear-gradient(90deg,
    #368ea5 0%,
    #368ea5 42%,
    rgba(54,142,165,.96) 54%,
    rgba(54,142,165,.78) 72%,
    rgba(54,142,165,.66) 100%);
  opacity:0}

/* 모바일은 세로 방향 오버레이를 쓴다. 위 데스크톱용 가로 방향이 덮어쓰면
   왼쪽만 가려지고 오른쪽만 보인다 */
@media(max-width:900px){
  .raw-video .hero--main::after{background:linear-gradient(180deg,
    #368ea5 0%,
    #368ea5 54%,
    rgba(54,142,165,.80) 68%,
    rgba(54,142,165,.62) 100%)}
}

/* 영상 왼쪽을 청록으로 덮어 배경에 녹인다.
   원래는 예전 영상 파일에 붙어 있던 청록 여백을 가리려고 넣은 것인데, 새 클립에는 여백이 없다.
   지금은 PC에서 왼쪽 마스킹을 한 겹 더 해주는 역할을 한다. 카피 뒤가 깨끗해진다.
   모바일은 이미 위쪽 페이드로 처리하므로 데스크톱에만 건다 */
@media(min-width:1025px){
  .raw-video .main-hero-video::after{content:"";position:absolute;inset:0;pointer-events:none;
    /* 여백이 끝나는 26% 지점까지는 완전히 덮고, 그 뒤로 길게 흘려보낸다.
       급하게 끊으면 여백과 장면 사이에 계단이 생긴다.
       남자 얼굴(42~50%)에는 옅게만 걸린다 */
    /* 2026-09-01 26%까지 꽉 채우고 62%에서 뚝 끊던 것을 길게 눕혔다.
       18%까지만 채우고 80%까지 흘려보낸다. 왼쪽에서 오른쪽으로 넘어가는 자리에
       띠처럼 보이던 경계가 사라진다 */
    background:linear-gradient(90deg,
      #368ea5 0%,
      #368ea5 18%,
      rgba(54,142,165,.94) 25%,
      rgba(54,142,165,.84) 32%,
      rgba(54,142,165,.70) 39%,
      rgba(54,142,165,.55) 46%,
      rgba(54,142,165,.40) 53%,
      rgba(54,142,165,.27) 60%,
      rgba(54,142,165,.16) 67%,
      rgba(54,142,165,.08) 74%,
      rgba(54,142,165,0) 80%)}
}

/* 컬러 버전 레이아웃 고정 (2026-08-28 사용자 확정 기준값)
   1440x900 실측: 히어로 772 / 영상박스 1066x599(폭 74%, 히어로의 77.6%) / 카피 윗여백 174.
   높이를 화면 높이가 아니라 화면 폭에서 뽑는다. 그래야 브라우저 세로 크기가 달라도
   카피와 영상의 겹침 비율이 그대로 유지되고, 히어로 바로 아래에 푸터가 온다.
     히어로 높이 = 영상폭 x 0.7256   (772 / 1065.6)
     카피 윗여백 = 영상폭 x 0.115    (2026-08-28 0.163에서 줄임. 1440에서 193 -> 142) */
@media(min-width:1025px){
  .raw-video .hero--main{
    min-height:calc(min(74vw,1180px) * 0.7256);
    padding:calc(min(74vw,1180px) * 0.115) 0 0;
    /* 화면이 길면 남는 공간이 푸터 아래에 청록으로 남는다.
       히어로가 그만큼 늘어나면서 영상이 따라 내려가고 푸터는 항상 맨 아래에 붙는다 */
    flex:1 1 auto}
}


/* 장면별 보정의 모바일 쪽 (2026-09-01).
   세로 화면은 영상이 가운데에 눕고 왼쪽 마스크가 없어서 PC 값을 그대로 쓰면
   인물이 오른쪽 끝으로 밀려 잘린다. PC 보정은 되돌리고 여기서 따로 잡는다.
   3,4,5번 장면은 자막이 화면 가운데라 모바일에서는 이미 다 보인다. 손대지 않는다.
   마지막 장면만 왼쪽에 박힌 자막이 남는데, 위쪽 페이드에 가로 방향을 한 겹 더 겹쳐 지운다.
   자막은 화면 왼쪽 19%까지고 인물은 22%부터라 얼굴에는 거의 안 걸린다 */
@media(max-width:900px){
  .hero--main .main-hero-video.sc-hide{-webkit-mask-image:none;mask-image:none}
  .hero--main .main-hero-video.sc-first video,
  .hero--main .main-hero-video.sc-push video,
  .hero--main .main-hero-video.sc-hide video{transform:none}
  .hero--main .main-hero-video.sc-hide video{
    /* 보이는 구간을 프레임의 30%부터로 옮겨 자막과 얼굴 사이를 벌린다.
       아래 가로 그라데이션의 % 는 화면이 아니라 영상 요소(프레임 전체) 기준이다.
       프레임에서 자막은 왼쪽 6.9%에서 46.9%, 인물 머리 왼쪽 끝은 49.4%에 있다.
       그래서 47%까지 완전히 지우고 75%에서 다 살아나게 잡았다.
       머리 왼쪽 가장자리가 옅게 물드는데, 어차피 배경이 밝아서 비네트처럼 보인다 */
    left:-43%;width:143%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.07) 8%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.26) 16%,rgba(0,0,0,.39) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.67) 28%,rgba(0,0,0,.79) 32%,rgba(0,0,0,.89) 36%,rgba(0,0,0,.96) 40%,#000 44%),
      linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.16) 53%,rgba(0,0,0,.34) 56%,rgba(0,0,0,.56) 59%,rgba(0,0,0,.76) 62%,rgba(0,0,0,.90) 66%,rgba(0,0,0,.97) 70%,#000 75%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.02) 4%,rgba(0,0,0,.07) 8%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.26) 16%,rgba(0,0,0,.39) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.67) 28%,rgba(0,0,0,.79) 32%,rgba(0,0,0,.89) 36%,rgba(0,0,0,.96) 40%,#000 44%),
      linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.16) 53%,rgba(0,0,0,.34) 56%,rgba(0,0,0,.56) 59%,rgba(0,0,0,.76) 62%,rgba(0,0,0,.90) 66%,rgba(0,0,0,.97) 70%,#000 75%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
}