/* 헤드카피를 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 그대로 둔다 */
/* 본문 폰트 (2026-09-01 Gmarket Sans 에서 Pretendard 로 교체).
   폰트 선언은 css/pretendard.css 에 모아뒀다. 각 페이지가 그 파일을 먼저 읽는다.
   예전에는 Gmarket 이 Light 300, Medium 500, Bold 700 세 벌뿐이라
   600 은 브라우저가 Bold 로 올려 그렸다. Pretendard 는 아홉 벌이 다 있어서
   600 을 그대로 두면 SemiBold 가 잡혀 지금보다 얇아진다. 그래서 700 으로 적어둔다.
   눈으로 보고 조정할 때 이 값들을 만지면 된다 */
@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}
.ago{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;padding:0}
.ago .arw{transition:transform .18s ease}
.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 .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 .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);
  /* 아래 @media(min-width:1025px) 에서 다시 잡는다. 901에서 1024px 구간에서도
     영상 크기 계산이 되도록 여기서 기본값을 미리 둔다 */
  --hero-h:calc(100dvh - 128px);
  --fh:min(56.25vw,calc((var(--hero-h) - 382px) / 0.66));
  --fw:calc(var(--fh) * 1.7778);
  padding:clamp(48px,calc(50dvh - 277px),160px) 0 84px}
/* 메인 히어로 배경영상.
   영상 위에 청록 오버레이를 왼쪽에서 오른쪽으로 걷어내서, 왼쪽 카피 자리는 단색 그대로 두고
   오른쪽에서만 장면이 배어나오게 한다. 사각형 경계가 생기지 않도록 그라데이션으로만 처리한다. */
.hero--main::before{content:none}
.hero--main .main-hero-video{position:absolute;left:0;right:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none;
  /* 처음부터 포스터를 옅게 깔아두고 서서히 진하게 올린다 (2026-09-01 사용자 확정).
     아예 안 보이게 뒀더니 배경이 텅 비어 허전했다. 15%면 그림이 있다는 건 알겠고
     카피를 읽는 데는 방해가 안 되는 정도다.
     1.2초 동안은 그대로 있다가, 4.1초에 걸쳐 100%까지 올라온다.
     처음에 카피와 같은 이징(.22,1,.36,1)을 1.4초로 썼더니 갑자기 환해진다는 지적을 받았다.
     그 곡선은 앞이 가팔라서 0.4초 안에 거의 다 밝아진다. 카피는 그래야 시원한데
     배경은 그러면 눈에 띈다.
     34%에서 3.2초로 한 번 더 늦춰봤지만, 큰제목이 올라오는 동안 배경도 같이 밝아져서
     본문 두 문단의 페이드가 배경 변화에 묻혔다. 그래서 시작값을 눌렀고 앞에 쉼을 넣었다.
     18%에 0.7초로 갔다가 사용자 지시로 15%에 1.2초, 속도도 20% 더 늦춘 값이 지금이다.
     큰제목과 본문 두 문단이 다 올라올 때까지 배경은 가만히 있는다 */
  opacity:.15;transition:opacity 4.1s cubic-bezier(.4,0,.6,1) 1.2s;
  /* 2026-09-01 B안 3차. 좌우 마스킹을 없애고 화면 가로를 꽉 채운다.
     좌우를 녹이니 거슬린다는 지적. 윗변 하나만 남긴다.

     보여주는 구간은 프레임의 7%에서 96%다.
     위 7%는 천장과 배경, 아래 4%는 박힌 자막(87에서 90%) 밑의 여백이라 잘라도 잃는 게 없다.
     2차에서는 13에서 93%였는데, 윗변 페이드를 길게 늘리려면 시작점이 위로 올라가야 해서
     위쪽을 6% 더 남겼다. 그만큼 페이드가 21.5% 구간에 걸쳐 완만하게 내려온다.
     아래는 3% 더 잘라서 영상이 살짝 내려앉는다 */
  height:calc(var(--fh) * 0.89)}
.hero--main .main-hero-video.is-lit{opacity:1}
@media(prefers-reduced-motion:reduce){.hero--main .main-hero-video{transition:none}}
.hero--main .main-hero-video video{position:absolute;left:0;bottom:calc(var(--fh) * -0.04);
  width:100%;height:var(--fh);object-fit:cover;object-position:center 50%;display:block;
  /* 가로는 100%로 꽉 채우고, 세로만 --fh 로 잡는다.
     --fh 는 화면 폭에서 나오는 실제 프레임 세로보다 조금 작다(1900x1200에서 2%).
     그 차이만큼 위아래가 아주 조금 잘리는 대신, 좌우에 청록이 남지 않는다.
     좌우를 녹이지 않아도 되니 마스크는 윗변 하나만 남는다 */
  /* 윗변만 녹인다. 7%(잘리는 자리)에서 시작해 28.5%에서 끝난다.
     인물 눈이 프레임 29% 자리라 페이드가 끝나자마자 얼굴이 살아난다.
     2차에서는 13에서 28%로 15% 구간이었는데 21.5% 구간으로 늘렸다.
     2%마다 끊어서 계단이 안 보이게 했다 */
  -webkit-mask-image:linear-gradient(180deg,transparent 0 7%,rgba(0,0,0,.02) 9%,rgba(0,0,0,.05) 11%,rgba(0,0,0,.10) 13%,rgba(0,0,0,.17) 15%,rgba(0,0,0,.26) 17%,rgba(0,0,0,.36) 19%,rgba(0,0,0,.47) 20.5%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.69) 23.5%,rgba(0,0,0,.79) 25%,rgba(0,0,0,.87) 26%,rgba(0,0,0,.93) 27%,rgba(0,0,0,.97) 27.8%,#000 28.5%);
  mask-image:linear-gradient(180deg,transparent 0 7%,rgba(0,0,0,.02) 9%,rgba(0,0,0,.05) 11%,rgba(0,0,0,.10) 13%,rgba(0,0,0,.17) 15%,rgba(0,0,0,.26) 17%,rgba(0,0,0,.36) 19%,rgba(0,0,0,.47) 20.5%,rgba(0,0,0,.58) 22%,rgba(0,0,0,.69) 23.5%,rgba(0,0,0,.79) 25%,rgba(0,0,0,.87) 26%,rgba(0,0,0,.93) 27%,rgba(0,0,0,.97) 27.8%,#000 28.5%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}

/* 장면별 보정은 없앴다 (2026-09-01 B안).
   A안은 프레임 세로를 잘라 보여줬기 때문에 장면마다 어디를 볼지 정해야 했다.
   B안은 프레임이 통째로 나오므로 정할 게 없다. index.html 의 장면 감지 스크립트도 같이 걷어냈다 */

/* .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 영상에 박힌 자막을 고객사가 다 보여달라고 해서, 프레임 가로 전체가
     나오도록 되돌렸다. 예전에는 132%로 키우고 좌우를 16%씩 잘랐는데 그러면 자막 양끝이 잘린다.
     100%로 두면 390px 폰에서 세로가 219px 나온다. 인물이 작아지지만 자막이 다 들어온다.
     그 위 남는 자리는 배경 청록이고, 윗변 페이드가 이어줘서 경계가 안 보인다.
     PC와 같이 바닥에 붙인다. 띄우면 아랫변이 선처럼 보인다 */
  .hero--main .main-hero-video video{position:absolute;left:0;bottom:0;transform:none;width:100%;height:auto;
    /* 윗변만 녹인다. 좌우와 아래는 화면 끝까지 간다 */
    -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%}
  /* 글이 놓이는 위쪽은 단색으로 지키고, 아래 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%)}
}

/* 2026-09-01 왼쪽 청록 덮개는 걷어냈다.
   오른쪽 아래 상자였을 때 왼쪽 카피 자리를 지키려고 덮어놨던 것인데,
   지금은 영상이 카피 아래에 밴드로 깔려서 겹치는 자리가 없다 */

/* 컬러 버전 레이아웃 고정 (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{
    /* 2026-09-01 밴드가 커지면서 카피와 겹쳐서 히어로를 200px 늘렸다.
       다만 이 계산식은 화면 폭에서 높이를 뽑기 때문에, 폭이 넓고 세로가 짧은 창
       (1900x1100 같은)에서는 200px 늘린 값이 화면 높이를 넘어가 밴드 아랫부분과
       박힌 자막이 첫 화면 밖으로 밀렸다. 그래서 화면 높이로 한 번 잠근다.
       잠기는 쪽으로 걸리면 카피가 페이드 구간 안으로 더 들어오는데,
       윗변 페이드가 밴드의 32%(620px 기준 198px)라 글자 뒤는 계속 옅게 유지된다 */
    --hero-h:min(calc(min(74vw,1180px) * 0.7256 + 260px),calc(100dvh - 128px));
    /* 프레임 세로. 화면 폭에서 나오는 값과, 카피를 덮으면서 눈은 살리는 조건 중 작은 쪽 */
    --fh:min(56.25vw,calc((var(--hero-h) - 382px) / 0.66));
    --fw:calc(var(--fh) * 1.7778);
    min-height:var(--hero-h);
    /* 2026-09-01 0.115에서 0.075로 줄였다. 영상이 밴드로 바뀌면서 위로 올라와
       CTA 버튼이 박힌 자막과 같은 높이에서 겹쳤다. 카피를 43px 올려 떼어놨다 */
    padding:calc(min(74vw,1180px) * 0.075) 0 0;
    /* 화면이 길면 남는 공간이 푸터 아래에 청록으로 남는다.
       히어로가 그만큼 늘어나면서 영상이 따라 내려가고 푸터는 항상 맨 아래에 붙는다 */
    flex:1 1 auto}
}


/* 모바일에는 장면별 보정을 두지 않는다 (2026-09-01).
   PC는 밴드가 프레임 세로의 55%만 보여주니까 장면마다 어디를 볼지 정해야 하지만,
   모바일은 프레임을 세로까지 통째로 깔기 때문에 잘리는 데가 없다.
   PC 쪽 sc-* 규칙은 min-width:901px 안에 있어서 여기까지 안 내려온다 */