/* ── 폰트 2단 구성 ──────────────────────────────────────────────────────
   SUIT Variable 원본은 610KB 다. 첫 화면에서 그걸 다 받을 이유가 없다.
   지금 사이트에 쓰인 830자만 뽑은 190KB 서브셋을 먼저 쓰고, 거기 없는 글자가
   나올 때만 원본을 받는다(69% 절감).

   ⚠ **원본을 CSS 에서 참조하지 않는다.** 처음엔 같은 family 로 unicode-range 를
     갈라 선언했고, 그다음엔 'SUIT Fallback' 이라는 별도 family 로 스택 두 번째에
     뒀다. **둘 다 크롬이 원본 610KB 를 같이 받아 갔다**(실측: 렌더된 글자 386자가
     전부 서브셋 안이고 document.fonts.check 도 전부 통과했는데 받아 갔다.
     font-display:swap 대기 중 스택의 다음 웹폰트를 미리 받는 동작으로 보인다).
     그래서 CSS 는 서브셋만 참조한다. 서브셋에 없는 글자는 Pretendard / 시스템
     글꼴로 떨어진다 — 화면이 깨지지는 않지만 그 글자만 서체가 달라 보인다.
     **글을 추가했으면 tools/subset-font.js 를 다시 돌린다.**
     assets/fonts/SUIT-Variable.woff2(원본)는 서브셋을 다시 만들 재료로 남겨 둔다.

   ⚠ 글이 늘어 새 글자가 생기면 서브셋을 다시 만든다 —
     node tools/subset-font.js  →  woff2 와 아래 unicode-range 를 함께 갱신.
     안 만들어도 화면은 깨지지 않는다(원본으로 넘어갈 뿐이고 그 페이지만 느려진다). */
@font-face{
  font-family:'SUIT Variable';
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/SUIT-Variable-subset-v2.woff2') format('woff2-variations');
  unicode-range:U+20-7E,U+A9,U+B0-B1,U+B7,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2190-2193,U+2219,U+2460-2464,U+25CB,U+25CE,U+260E,U+26A0,U+2713,U+3008-3009,U+300C-300F,U+AC00-AC01,U+AC04,U+AC08,U+AC10-AC12,U+AC14-AC16,U+AC19,U+AC1C,U+AC31,U+AC70,U+AC74,U+AC77-AC78,U+AC80-AC81,U+AC83,U+AC89,U+AC8C,U+ACA0,U+ACA8-ACA9,U+ACAC,U+ACB0,U+ACB9,U+ACBC-ACBD,U+ACC4,U+ACE0-ACE1,U+ACE7-ACE8,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD04,U+AD11,U+AD1C,U+AD34,U+AD50,U+AD6C-AD6D,U+AD73-AD75,U+AD81,U+AD8C,U+ADC0,U+ADDC,U+ADE0,U+ADF8-ADF9,U+ADFC,U+AE00,U+AE08-AE09,U+AE0B,U+AE30,U+AE34,U+AE38,U+AE40-AE41,U+AE4A,U+AE4C,U+AE50,U+AE5C-AE5D,U+AE68,U+AEBC,U+AED1,U+AED8,U+AEF4,U+AF08,U+AF2D,U+AF34,U+AF3C,U+AFB8-AFB9,U+AFBC,U+AFC0,U+AFC8-AFC9,U+AFD4,U+B00C,U+B010,U+B01D,U+B044,U+B048,U+B04A,U+B04C,U+B05D,U+B07C,U+B084,U+B08C-B08D,U+B098,U+B09C,U+B0A0,U+B0A8-B0A9,U+B0AB-B0AC,U+B0AE,U+B0B4,U+B0B8,U+B0C5,U+B0C8,U+B0E5,U+B108-B109,U+B110,U+B113,U+B118,U+B123-B124,U+B137,U+B144,U+B178-B179,U+B17C,U+B192-B194,U+B1CC,U+B1E8,U+B204,U+B208,U+B20C,U+B215,U+B220,U+B258,U+B269,U+B274,U+B290,U+B294,U+B298,U+B2A5-B2A6,U+B2AC,U+B2C8,U+B2CC,U+B2D8-B2D9,U+B2E4-B2E5,U+B2E8,U+B2EB-B2EC,U+B2EE,U+B2F4-B2F5,U+B2F9,U+B2FF-B300,U+B354,U+B358,U+B35C,U+B367,U+B369,U+B36E,U+B370,U+B3C4-B3C5,U+B3C8,U+B3CB-B3CC,U+B3D5,U+B3D9,U+B3FC,U+B410,U+B418,U+B41C,U+B420,U+B428-B429,U+B450,U+B454,U+B458,U+B461,U+B4A4,U+B4DC-B4DD,U+B4E0,U+B4E3-B4E4,U+B4ED,U+B4EF,U+B4F1,U+B514,U+B529,U+B530-B531,U+B534,U+B545,U+B54C,U+B5A0,U+B5A4,U+B5A8,U+B5BB,U+B5C0,U+B610-B611,U+B69C,U+B6F0,U+B728,U+B72C,U+B739,U+B73B,U+B744,U+B760,U+B77C-B77D,U+B780,U+B78C-B78D,U+B798-B799,U+B79C,U+B7A8,U+B7AB,U+B7C9,U+B7EC,U+B7F0,U+B7F4,U+B7FC-B7FD,U+B807-B808,U+B80C,U+B824-B825,U+B828,U+B835,U+B837-B839,U+B840,U+B85C-B85D,U+B860,U+B864,U+B86D,U+B8B0,U+B8CC,U+B8E8,U+B8EC,U+B8F0,U+B904,U+B918,U+B958,U+B960,U+B974,U+B978,U+B97C,U+B984-B985,U+B989,U+B9AC-B9AD,U+B9B0,U+B9B4,U+B9BC-B9BD,U+B9BF,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9CE,U+B9D0-B9D1,U+B9DB,U+B9DD-B9DE,U+B9E1,U+B9E4,U+B9E8,U+B9F5,U+B9F9-B9FA,U+BA38-BA39,U+BA3C,U+BA40,U+BA48,U+BA54,U+BA70,U+BA74,U+BA85,U+BA87,U+BAA8-BAA9,U+BAB0,U+BAB8-BAB9,U+BABB,U+BB34,U+BB38,U+BB3B-BB3D,U+BB54,U+BBC0,U+BBF8,U+BBFC,U+BC00,U+BC0B,U+BC0F,U+BC14-BC16,U+BC18,U+BC1B-BC1D,U+BC24,U+BC29,U+BC30-BC31,U+BC34,U+BC84,U+BC88,U+BC94-BC95,U+BC97,U+BCA4,U+BCBC-BCBD,U+BCC0,U+BCC4,U+BCCD,U+BCD1,U+BCF4-BCF5,U+BCF8,U+BCFC,U+BD04-BD05,U+BD10,U+BD24,U+BD80,U+BD84,U+BD88,U+BD93,U+BD99,U+BDF0,U+BE0C,U+BE14,U+BE44,U+BE48,U+BE4C,U+BE5B,U+BE60-BE61,U+BE68,U+BED1,U+BF08,U+BFCC,U+BFD0,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0BC,U+C0C1,U+C0C8-C0C9,U+C0D8,U+C0DD,U+C11C-C11D,U+C120,U+C124,U+C12C-C12D,U+C131,U+C138-C139,U+C13C,U+C140,U+C14B,U+C154,U+C158,U+C168,U+C18C-C18D,U+C190,U+C194,U+C1A1,U+C1C4,U+C218-C219,U+C21C,U+C220,U+C228,U+C22B,U+C26C,U+C270,U+C27D,U+C2A4,U+C2A8,U+C2AC,U+C2B5,U+C2B7,U+C2DC-C2DD,U+C2E0,U+C2E4,U+C2EB-C2ED,U+C2F6,U+C2F8,U+C2FC,U+C313,U+C368,U+C37C,U+C384,U+C4F0,U+C4F4,U+C4F8,U+C500-C501,U+C528-C529,U+C52C,U+C544,U+C548-C54A,U+C54C,U+C554-C555,U+C558-C559,U+C55E,U+C560-C561,U+C571,U+C575,U+C57C-C57D,U+C587,U+C591,U+C5B4-C5B5,U+C5B8-C5B9,U+C5BB-C5BC,U+C5C5-C5C8,U+C5D0,U+C5D4,U+C5EC-C5ED,U+C5F0,U+C5F4,U+C5FC,U+C600-C601,U+C606-C608,U+C624-C625,U+C628,U+C62C,U+C62E,U+C635,U+C640,U+C644,U+C648,U+C654,U+C65C,U+C678,U+C67C,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6B8,U+C6C0-C6C1,U+C6C3,U+C6CC,U+C6D0,U+C6D4,U+C6E0,U+C6F9,U+C704,U+C720-C721,U+C724,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774-C775,U+C778,U+C77C-C77D,U+C783-C785,U+C788,U+C790-C791,U+C798,U+C7A0-C7A1,U+C7A5-C7A6,U+C7AC,U+C7B0,U+C7C1,U+C800-C801,U+C804,U+C808,U+C810-C811,U+C815,U+C81C,U+C824,U+C838,U+C84C,U+C870-C871,U+C874,U+C878,U+C880-C881,U+C885,U+C88B-C88C,U+C8E0,U+C8FC-C8FD,U+C900,U+C904,U+C90D,U+C911,U+C988-C989,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9D0-C9D1,U+C9D5,U+C9DC-C9DD,U+C9E7,U+C9F8,U+CA4D,U+CABC-CABD,U+CBE4,U+CC0D,U+CC22,U+CC28-CC29,U+CC2E,U+CC30,U+CC38,U+CC3D-CC3E,U+CC44-CC45,U+CC55,U+CC59,U+CC98,U+CC9C,U+CCA0,U+CCA8,U+CCAB,U+CCAD,U+CCB4,U+CCD0,U+CCE4,U+CD08-CD09,U+CD0C,U+CD1D,U+CD2C,U+CD5C,U+CD94-CD95,U+CD98,U+CD9C,U+CDA4-CDA5,U+CDA9,U+CDB0,U+CDC4,U+CDCC,U+CDE8,U+CE20-CE21,U+CE35,U+CE58-CE59,U+CE5C,U+CE60,U+CE68-CE69,U+CE74-CE75,U+CE78,U+CE90,U+CEE4,U+CEE8,U+CEF5,U+CF00,U+CF1C,U+CF30,U+CF54,U+CF58,U+D06C,U+D070,U+D07C-D07D,U+D0A4,U+D0AC,U+D0B5,U+D0C0-D0C1,U+D0C4,U+D0D3,U+D0D5,U+D0DC-D0DD,U+D0ED,U+D0F1,U+D130,U+D134,U+D14C,U+D150,U+D15C-D15D,U+D1A0-D1A1,U+D1B1,U+D1B5,U+D22C-D22D,U+D230,U+D284,U+D29C,U+D2B8-D2B9,U+D2BC,U+D2C0,U+D2C8,U+D2F0,U+D30C,U+D30E,U+D310,U+D314,U+D31D,U+D328,U+D37C,U+D398,U+D3B4,U+D3B8,U+D3BC,U+D3C9,U+D3D0,U+D3EC,U+D3F0,U+D3F4,U+D3FC,U+D45C,U+D478,U+D47C,U+D480,U+D488,U+D504,U+D508,U+D50C,U+D53C-D53D,U+D544,U+D558-D559,U+D55C,U+D560,U+D568-D569,U+D56D,U+D574-D575,U+D588-D589,U+D5A5,U+D5C8,U+D5CC,U+D5D8,U+D5E4,U+D5F7,U+D600,U+D604,U+D608,U+D611,U+D615,U+D638-D639,U+D63C,U+D648,U+D654-D655,U+D658,U+D65C,U+D669,U+D68C-D68D,U+D69F,U+D6A8,U+D6C4,U+D6C8,U+D6E8,U+D718,U+D720,U+D734,U+D750,U+D754,U+D758,U+D761,U+D769,U+D76C,U+D770,U+D788,U+D78C,U+D798-D799,U+FFFF;
}


/* =========================================================================
   강남연세안과 — v41  (2026-09-20)

   레퍼런스: www.bnviit.com 을 apify 로 긁고 **실제 화면을 직접 보고** 맞췄다.
   구조뿐 아니라 질감까지 가져온다. 1차 시안이 "AI 스럽다"는 지적을 받은
   이유가 전부 여기 정리돼 있다 — 아래 7개를 어기면 그 시안으로 되돌아간다.

     1. 카드를 쓰지 않는다. 흰 바탕 위에 글자만 놓고 여백으로 나눈다.
        테두리·그림자·hover 리프트로 구역을 만들지 않는다.
     2. 버튼은 사각(4px)에 1px 외곽선이다. 필(999px) 채움 버튼을 쓰지 않는다.
     3. 대문자 영문 키커(RETINA FIRST)를 쓰지 않는다. 소제목은 그냥 한글이고
        작고 검다. 액센트 색을 입히지 않는다.
     4. 이미지는 radius 0, 그라데이션 오버레이 없음. 풀블리드로 흘린다.
     5. 섹션 상하 여백은 130~180px 이다. 96px 는 답답하다.
     6. 시그니처 레이아웃은 「좌: 짧은 굵은 제목 / 우: 본문」 2단이다.
     7. 액센트(--accent)는 활성 내비 밑줄, 우측 독, 본문 링크에만 쓴다.
        면을 칠하지 않는다.

   ── 레이아웃 규칙 ──
   섹션은 `.gy-sec` 하나가 상하+좌우 패딩을 다 갖고, 폭 제한은 안쪽 `.gy-in` 이
   한다. 폭 클래스를 섹션에 겹쳐 쓰지 않으므로 v38 의 좌우 여백 버그가 생길 수 없다.

   ── 셰이프 락 ──  버튼·칩 4px · 입력 2px · 이미지 0 · 독 28px
   ── 테마 락 ──  라이트 전용.
   ── 대비 실측 (흰 바탕 / --band 바탕) ──
      ink 17.82/16.89 · copy 8.56/8.11 · mute 4.96/4.70 · accent 5.99/5.68
      흰 글자 on dark 16.31 · accent-lt on dark 8.03
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#14181D;
  --copy:#454D57;
  --mute:#68717B;      /* 흰 4.96 · 밴드 4.50 */
  --faint:#68717B;     /* 라벨·날짜도 읽는 글자다. 값은 --mute 와 같게 둔다 */
  --deco:#C6CDD4;      /* 불릿·헤어라인 전용. 글자에 쓰지 않는다 */

  --brand:#12306B;
  --accent:#0B5CD5;
  --accent-dk:#0A4CAE;
  --accent-lt:#8FB8F5;

  --band:#F2F4F6;
  --band-2:#F8F9FA;
  --dark:#0E2135;
  --dark-2:#16304A;

  --on-dark:#FFFFFF;
  --on-dark-2:#D8E2EE;
  --on-dark-3:#9BAABD;

  --line:#E3E7EB;
  --line-2:#D3D9E0;

  --r:4px;
  --r-input:2px;
  --r-dock:28px;

  --e-out:cubic-bezier(.23,1,.32,1);

  --sans:'SUIT Variable','Pretendard','Apple SD Gothic Neo',system-ui,-apple-system,sans-serif;

  --max:1240px;
  --pad:24px;

  --head-h:66px;
  --util-h:38px;
  --head-total:66px;   /* 1080px 이상에서 유틸바 높이를 더한다 */

  /* 섹션 리듬. 비앤빛은 여기서 승부를 본다. */
  --gap-sec:84px;
  --gap-sec-lg:104px;
}
@media (min-width:760px){ :root{ --pad:32px; --head-h:74px; --head-total:74px; --gap-sec:120px; --gap-sec-lg:150px } }
@media (min-width:1080px){ :root{ --pad:40px; --head-total:112px; --gap-sec:140px; --gap-sec-lg:180px } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-total) + 62px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.9;
  font-weight:400;letter-spacing:-.012em;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none;transition:color .16s var(--e-out)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.3}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:700;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--ink);color:#fff}

.gy-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gy-skip{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--ink);color:#fff;font-weight:700}
.gy-skip:focus{left:0;top:0}

/* ---------- 3. Layout ---------- */
.gy-sec{padding:var(--gap-sec) 0}
.gy-sec-lg{padding:var(--gap-sec-lg) 0}
.gy-sec-sm{padding:calc(var(--gap-sec) * .6) 0}
.gy-in{max-width:var(--max);margin:0 auto;width:100%;padding:0 var(--pad)}
/* 읽는 폭이 좁아야 하는 자리도 컨테이너는 1240 을 쓰고, 안쪽 요소만 좁힌다.
   1000px 컨테이너를 쓰면 좌측 기준선이 페이지마다 튄다. */
.gy-in-mid{max-width:var(--max);margin:0 auto;width:100%;padding:0 var(--pad)}
.gy-in-mid > *{max-width:880px}
.gy-band{background:var(--band)}
.gy-dark{background:var(--dark);color:var(--on-dark)}
.gy-dark h1,.gy-dark h2,.gy-dark h3{color:#fff}
.gy-dark strong{color:#fff}

/* ---------- 4. Typography ---------- */
/* 디스플레이는 크고 자간을 조인다. 본문은 작고 행간을 벌린다. 그 대비가 감도다. */
.gy-h1{font-size:clamp(32px,6.6vw,62px);line-height:1.17;letter-spacing:-.04em;font-weight:800}
.gy-h2{font-size:clamp(28px,5vw,48px);line-height:1.24;letter-spacing:-.038em;font-weight:800}
.gy-h3{font-size:clamp(19px,2.2vw,24px);line-height:1.4;letter-spacing:-.032em;font-weight:700}

.gy-lead{font-size:clamp(16px,1.6vw,18px);line-height:1.9;color:var(--copy);font-weight:400}
.gy-body{font-size:17px;line-height:1.95;color:var(--copy)}
.gy-note{font-size:14.5px;line-height:1.85;color:var(--mute)}
.gy-dark .gy-lead,.gy-dark .gy-body{color:var(--on-dark-2)}
.gy-dark .gy-note{color:var(--on-dark-3)}

/* 소제목. 대문자 영문 키커가 아니라 그냥 한글이고 작고 검다. */
.gy-label{display:block;font-size:15px;font-weight:400;color:var(--copy);letter-spacing:-.02em;margin-bottom:14px}

/* 가운데 정렬 섹션 머리. 위아래로 크게 비운다. */
.gy-ct{text-align:center;margin-bottom:64px}
.gy-ct .gy-label{margin-bottom:12px}
.gy-ct .gy-h2{margin-bottom:20px}
.gy-ct .gy-lead{max-width:56ch;margin:0 auto}
@media (min-width:760px){ .gy-ct{margin-bottom:80px} }

/* 시그니처 2단: 좌 짧은 굵은 제목 / 우 본문 */
.gy-2col{display:grid;gap:20px}
@media (min-width:860px){ .gy-2col{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start} }
@media (min-width:1080px){ .gy-2col{grid-template-columns:340px minmax(0,1fr);gap:72px} }
.gy-2col > h2,.gy-2col > h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.035em;line-height:1.38}
.gy-2col-b > * + *{margin-top:1.6em}

/* ---------- 5. Buttons ---------- */
/* 사각 4px, 1px 외곽선. 채운 필 버튼은 쓰지 않는다. */
.gy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 30px;height:52px;border-radius:var(--r);
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color .2s var(--e-out),color .2s var(--e-out),border-color .2s var(--e-out),transform .13s var(--e-out);
}
.gy-btn:active{transform:scale(.985)}
.gy-btn:hover{background:var(--ink);color:#fff}
/* 어두운 면 위 */
.gy-btn-on-dark{border-color:rgba(255,255,255,.62);color:#fff}
.gy-btn-on-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
/* 단 하나의 채운 버튼. 페이지당 주 행동 1개에만 쓴다. */
.gy-btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.gy-btn-solid:hover{background:var(--dark-2);border-color:var(--dark-2);color:#fff}
.gy-btn-lg{height:58px;padding:0 36px;font-size:16.5px}
.gy-btn-sm{height:42px;padding:0 20px;font-size:14px}
.gy-btn-block{width:100%}

/* 텍스트 링크. 밑줄이 전부다. */
.gy-tl{display:inline-block;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  padding-bottom:3px;border-bottom:1px solid var(--ink)}
.gy-tl:hover{color:var(--accent);border-color:var(--accent)}
.gy-dark .gy-tl{color:#fff;border-color:rgba(255,255,255,.6)}
.gy-dark .gy-tl:hover{border-color:#fff}

/* 사각 칩. 숫자만 굵게. 점이나 필 모양을 붙이지 않는다. */
.gy-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);font-size:13.5px;font-weight:400;color:var(--copy);letter-spacing:-.015em}
.gy-chip b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.gy-dark .gy-chip,.gy-hero .gy-chip{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);color:var(--on-dark-2)}
.gy-dark .gy-chip b,.gy-hero .gy-chip b{color:#fff}

/* 본문 안 링크만 액센트를 쓴다. */
.gy-body a,.gy-2col-b a,.gy-prose a{color:var(--accent);border-bottom:1px solid currentColor}
.gy-body a:hover,.gy-2col-b a:hover,.gy-prose a:hover{color:var(--accent-dk)}

/* ---------- 6. Header ---------- */
.gh{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.gh-util{display:none}
@media (min-width:1080px){
  .gh-util{display:flex;align-items:center;justify-content:space-between;gap:20px;
    height:var(--util-h);padding:0 var(--pad);max-width:var(--max);margin:0 auto;
    font-size:12.5px;color:var(--mute)}
  .gh-util b{font-weight:700;color:var(--copy)}
  .gh-util-r{display:flex;align-items:center;gap:20px}
  .gh-util-r a:hover{color:var(--accent)}
  .gh-util-r .tel{font-weight:800;color:var(--ink)}
}
.gh-in{display:flex;align-items:center;gap:22px;height:var(--head-h);padding:0 var(--pad);max-width:var(--max);margin:0 auto;
  border-top:1px solid var(--line)}
@media (max-width:1079px){ .gh-in{border-top:0} }

/* 락업 = 방패 마크 + 「한글 워드마크 / 헤어라인 / 영문 서브라인」.
   원형 각인이 든 인장(logo-symbol.svg)은 64px 이상에서만 쓴다 — 그보다 작으면
   둘레 글자가 뭉개진다. 헤더는 방패만 쓰는 logo-mark.svg 다. */
.gh-logo{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;color:var(--brand,#12306B);line-height:1}
.gh-logo .mk{width:auto;height:32px;flex:0 0 auto}
.gh-logo .tx{display:flex;flex-direction:column;line-height:1}
.gh-logo .k{font-size:20px;font-weight:800;letter-spacing:-.055em;color:var(--dark)}
.gh-logo .e{font-size:7.5px;font-weight:600;letter-spacing:.115em;color:var(--mute);
  margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2)}
.gh-logo:hover .e{border-color:var(--mute)}
@media (min-width:760px){ .gh-logo .mk{height:36px} .gh-logo .k{font-size:22px} .gh-logo .e{font-size:8px} }

/* 내비는 작고 평범하다. 굵게 키우지 않는다. */
.gh-nav{display:none}
@media (min-width:1080px){
  .gh-nav{display:flex;align-items:center;gap:30px;margin-left:26px;flex:1 1 auto}
  .gh-nav > a{position:relative;height:var(--head-h);display:inline-flex;align-items:center;
    font-size:15.5px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
  .gh-nav > a::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:1.5px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .22s var(--e-out)}
  .gh-nav > a:hover,.gh-nav > a[aria-current="page"]{color:var(--accent)}
  .gh-nav > a:hover::after,.gh-nav > a[aria-current="page"]::after{transform:scaleX(1)}
}
.gh-act{display:none}
@media (min-width:1080px){ .gh-act{display:flex;align-items:center;gap:12px;margin-left:auto} }

.gh-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;margin-left:auto;
  width:44px;height:44px;padding:0 8px;background:none;border:0;cursor:pointer}
.gh-burger i{display:block;height:1.5px;background:var(--ink);transition:transform .24s var(--e-out),opacity .14s linear}
.gh-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.gh-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.gh-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (min-width:1080px){ .gh-burger{margin-left:18px} }

/* 메가메뉴 — 흰 바탕, 테두리 없는 링크 목록. */
.gh-mega{display:none}
@media (min-width:1080px){
  .gh-mega{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transition:opacity .2s var(--e-out),visibility 0s .2s}
  .gh.is-mega .gh-mega{opacity:1;visibility:visible;transition-delay:0s}
  .gh-mega-in{display:grid;grid-template-columns:320px 1fr;gap:64px;
    max-width:var(--max);margin:0 auto;padding:46px var(--pad) 54px}
  .gh-mega-l .t{display:block;font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1.3;margin-bottom:14px;white-space:pre-line}
  .gh-mega-l .d{display:block;font-size:14px;line-height:1.85;color:var(--mute)}
  .gh-mega-r{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 36px}
  .gh-mega-r a{display:block}
  .gh-mega-r .t{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.03em;margin-bottom:5px;
    padding-bottom:2px;border-bottom:1px solid transparent}
  .gh-mega-r a:hover .t{color:var(--accent);border-color:var(--accent)}
  .gh-mega-r .d{display:block;font-size:13px;color:var(--mute);line-height:1.65}
}

/* 드로어 */
.gh-scrim{position:fixed;inset:0;z-index:88;background:rgba(14,33,53,.45);opacity:0;visibility:hidden;
  transition:opacity .24s var(--e-out),visibility 0s .24s}
.gh-scrim.on{opacity:1;visibility:visible;transition-delay:0s}
.gh-drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(380px,90vw);background:#fff;
  transform:translateX(100%);transition:transform .36s var(--e-out);overflow-y:auto;overscroll-behavior:contain}
.gh-drawer.on{transform:none}
.gh-drawer-in{padding:16px 26px 48px;display:flex;flex-direction:column}
.gh-drawer-x{align-self:flex-end;width:44px;height:44px;background:none;border:0;cursor:pointer;font-size:19px;color:var(--mute)}
.gh-drawer-in > a{display:block;padding:17px 0;font-size:18px;font-weight:700;letter-spacing:-.035em;
  color:var(--ink);border-bottom:1px solid var(--line)}
.gh-drawer-in > a:hover{color:var(--accent)}
.gh-drawer-in > a.gy-btn{display:inline-flex;margin-top:28px;border:1px solid var(--ink);padding:0 30px;font-size:15.5px}
.gh-drawer-in > a.gy-btn:hover{background:var(--ink);color:#fff}
.gh-drawer-in > a.gh-drawer-tel{border-bottom:0;margin-top:22px;padding:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.gh-drawer-hours{margin-top:12px;font-size:13.5px;line-height:1.85;color:var(--mute)}

/* ---------- 7. Sub-nav ---------- */
/* 좌: 현재 항목 / 우: 같은 층 링크. 활성만 액센트 밑줄. 알약 없음. */
.gy-subnav{position:sticky;top:var(--head-total);z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.gy-subnav-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:28px;height:58px;overflow-x:auto;scrollbar-width:none}
.gy-subnav-in::-webkit-scrollbar{display:none}
.gy-subnav .cur{flex:0 0 auto;font-size:15.5px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.gy-subnav .ls{display:flex;align-items:center;gap:26px;margin-left:auto}
.gy-subnav .ls a{flex:0 0 auto;font-size:14.5px;font-weight:400;letter-spacing:-.025em;color:var(--mute);
  white-space:nowrap;padding-bottom:3px;border-bottom:1.5px solid transparent}
.gy-subnav .ls a:hover{color:var(--ink)}
.gy-subnav .ls a.on{color:var(--accent);font-weight:700;border-color:var(--accent)}

/* ---------- 8. Hero ---------- */
/* 인물/장면 컷은 오른쪽, 글자는 왼쪽. 스크림은 왼쪽에서만 걷힌다. */
.gy-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.gy-hero-bg{position:absolute;inset:0;z-index:-2}
.gy-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
@media (max-width:759px){ .gy-hero-bg img{object-position:var(--opm,var(--op,50% 50%))} }
.gy-hero-ov{position:absolute;inset:0;z-index:-1;background:rgba(14,33,53,.62)}
@media (max-width:859px){ .gy-hero-ov{background:rgba(14,33,53,.68)} }
.gy-hero-in{position:relative;max-width:var(--max);margin:0 auto;padding:72px var(--pad) 68px;
  min-height:min(72dvh,600px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
@media (min-width:760px){ .gy-hero-in{padding:104px var(--pad) 96px;min-height:min(80dvh,720px)} }
.gy-hero .gy-chip{margin-bottom:26px}
.gy-hero h1{font-size:clamp(33px,6.8vw,62px);line-height:1.17;letter-spacing:-.045em;color:#fff;margin-bottom:22px}
.gy-hero p{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.85;color:var(--on-dark-2);max-width:38ch;margin-bottom:38px}
.gy-hero-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- 9. Trust row ---------- */
.gy-trust{border-bottom:1px solid var(--line)}
.gy-trust-in{max-width:var(--max);margin:0 auto;padding:44px var(--pad);display:grid;gap:28px;align-items:center}
@media (min-width:960px){ .gy-trust-in{grid-template-columns:minmax(0,600px) 1fr;gap:72px;padding:64px var(--pad)} }
.gy-trust-fig img{width:100%}
.gy-trust-t{font-size:17.5px;line-height:1.9;color:var(--copy);letter-spacing:-.02em}
.gy-trust-t b{color:var(--ink)}
.gy-trust-n{display:flex;flex-wrap:wrap;gap:36px;margin-top:26px}
.gy-trust-n div{min-width:120px}
.gy-trust-n .n{display:block;font-size:34px;font-weight:800;letter-spacing:-.045em;color:var(--ink);line-height:1.1}
.gy-trust-n .l{display:block;margin-top:8px;font-size:15px;color:var(--copy)}

/* ---------- 10. Routing (증상으로 찾기) ---------- */
/* 카드가 아니다. 사진 + 그 아래 글. 테두리도 그림자도 없다. */
.gy-route{display:grid;gap:52px}
@media (min-width:640px){ .gy-route{grid-template-columns:repeat(2,1fr);gap:44px 40px} }
@media (min-width:1080px){ .gy-route{grid-template-columns:repeat(3,1fr);gap:40px} }
.gy-rt{display:block}
.gy-rt-fig{overflow:hidden;background:var(--band);margin-bottom:22px}
.gy-rt-fig img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .7s var(--e-out)}
.gy-rt:hover .gy-rt-fig img{transform:scale(1.04)}
.gy-rt .k{display:block;font-size:13.5px;color:var(--accent);font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.gy-rt h3{font-size:clamp(20px,2.3vw,25px);line-height:1.38;letter-spacing:-.038em;margin-bottom:16px}
.gy-rt ul{display:grid;gap:7px;margin-bottom:22px}
.gy-rt li{font-size:17px;line-height:1.8;color:var(--copy);padding-left:14px;position:relative}
.gy-rt li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--deco)}
.gy-rt p{font-size:16.5px;line-height:1.85;color:var(--copy);margin-bottom:22px}
.gy-rt .gy-tl{font-size:14.5px}

/* ---------- 11. Principles ---------- */
/* 번호는 아주 옅게. 파란 배지로 만들지 않는다. */
.gy-prin{display:grid;gap:44px}
@media (min-width:760px){ .gy-prin{grid-template-columns:repeat(2,1fr);gap:52px 48px} }
@media (min-width:1080px){ .gy-prin{grid-template-columns:repeat(4,1fr);gap:48px 40px} }
.gy-prin-i .n{display:block;font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--mute);margin-bottom:16px}
.gy-prin-i{border-top:1px solid var(--line);padding-top:26px}
.gy-prin-i h3{font-size:19.5px;letter-spacing:-.035em;margin-bottom:12px}
.gy-prin-i p{font-size:16.5px;line-height:1.9;color:var(--copy)}

/* 풀블리드 밴드 + 사진. 사진은 아래로 흘린다. */
.gy-bleed{background:var(--band);overflow:hidden}
.gy-bleed-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;gap:0}
@media (min-width:900px){ .gy-bleed-in{grid-template-columns:1.05fr 1fr;gap:72px;align-items:stretch} }
.gy-bleed-fig{order:2;align-self:end;margin:0}
.gy-bleed-fig img{width:100%;display:block;max-height:min(66vh,560px);object-fit:cover;object-position:50% 22%}
@media (min-width:900px){
  .gy-bleed-fig{order:1;align-self:stretch;display:flex;align-items:flex-end;min-height:520px}
  .gy-bleed-fig img{height:100%;max-height:none}
}
.gy-bleed-b{order:1;padding:calc(var(--gap-sec) * .8) 0 44px}
@media (min-width:900px){ .gy-bleed-b{order:2;padding:var(--gap-sec) 0;align-self:center} }
/* 밴드 안의 스펙 표는 폭이 절반이라 키 칸을 좁힌다. 210px 이면 값이 두 줄로 꺾인다. */
@media (min-width:640px){ .gy-bleed-b .gy-spec-row{grid-template-columns:150px 1fr;gap:20px} }

/* ---------- 12. Credential ---------- */
.gy-cred{display:grid;gap:44px;align-items:start}
@media (min-width:900px){ .gy-cred{grid-template-columns:minmax(0,430px) 1fr;gap:72px} }
.gy-cred-fig{margin:0}
.gy-cred-fig img{width:100%}
.gy-cred-cap{margin-top:14px;font-size:13px;line-height:1.75;color:var(--mute)}
.gy-quote{margin:0 0 32px;font-size:clamp(20px,2.4vw,26px);line-height:1.55;letter-spacing:-.04em;font-weight:800;color:var(--ink)}
.gy-spec{display:grid;margin:0 0 38px;border-top:1px solid var(--line)}
.gy-spec-row{display:grid;gap:5px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){ .gy-spec-row{grid-template-columns:210px 1fr;gap:24px;align-items:baseline} }
.gy-spec-row .k{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.gy-spec-row .v{font-size:16px;line-height:1.85;color:var(--copy)}

/* ---------- 13. Page head (서브 공통) ---------- */
/* 다크 히어로를 쓰지 않는다. 흰 바탕, 가운데, 위아래로 크게 비운다. */
.gy-pagehead{text-align:center;padding:calc(var(--gap-sec) * .78) 0 calc(var(--gap-sec) * .62)}
.gy-pagehead h1{font-size:clamp(30px,5vw,48px);line-height:1.24;letter-spacing:-.042em;margin-bottom:22px}
.gy-pagehead p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.9;color:var(--copy);max-width:56ch;margin:0 auto}

/* ---------- 14. Prose / content ---------- */
.gy-prose > * + *{margin-top:1.5em}
.gy-prose p{font-size:16.5px;line-height:1.95;color:var(--copy)}
.gy-prose h3{font-size:21px;letter-spacing:-.035em;margin-top:2.4em;color:var(--ink)}
.gy-prose ul{display:grid;gap:9px}
.gy-prose li{position:relative;padding-left:15px;font-size:16px;line-height:1.9;color:var(--copy)}
.gy-prose li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:1px;background:var(--deco)}

/* 3열 설명 (백내장의 종류 자리) */
.gy-cols{display:grid;gap:40px}
@media (min-width:760px){ .gy-cols{grid-template-columns:repeat(2,1fr);gap:48px 44px} }
@media (min-width:1080px){ .gy-cols.is-3{grid-template-columns:repeat(3,1fr)} .gy-cols.is-4{grid-template-columns:repeat(4,1fr)} }
.gy-col .n{display:block;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--mute);margin-bottom:12px}
.gy-col h3{font-size:19.5px;letter-spacing:-.035em;margin-bottom:12px}
.gy-col p{font-size:16.5px;line-height:1.9;color:var(--copy)}

/* 주의 문구. 배경을 칠하지 않고 왼쪽 선 하나로 끝낸다. */
.gy-warn{border-left:2px solid var(--ink);padding:4px 0 4px 20px;font-size:15px;line-height:1.85;color:var(--copy)}

/* ---------- 15. FAQ ---------- */
.gy-faq{border-top:1px solid var(--line)}
.gy-faq details{border-bottom:1px solid var(--line)}
.gy-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:26px 0;font-size:17px;font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1.5}
.gy-faq summary::-webkit-details-marker{display:none}
.gy-faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:11px;height:11px;margin-top:7px;
  border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
  transform:rotate(45deg);transition:transform .22s var(--e-out)}
.gy-faq details[open] summary::after{transform:rotate(-135deg)}
.gy-faq summary:hover{color:var(--accent)}
.gy-faq .a{padding:0 0 30px;font-size:16px;line-height:1.95;color:var(--copy);max-width:74ch}

/* ---------- 16. Journal ---------- */
.gy-jt{display:grid;gap:40px}
@media (min-width:860px){ .gy-jt{grid-template-columns:repeat(3,1fr);gap:44px} }
.gy-jt a{display:flex;flex-direction:column}
.gy-jt .m{display:block;font-size:12.5px;color:var(--faint);letter-spacing:-.01em;margin-bottom:14px}
.gy-jt h3{font-size:20px;line-height:1.45;letter-spacing:-.038em;margin-bottom:14px;
  padding-bottom:2px;border-bottom:1px solid transparent}
.gy-jt a:hover h3{border-color:currentColor}
.gy-jt p{font-size:16.5px;line-height:1.85;color:var(--copy)}
.gy-dark .gy-jt p{color:var(--on-dark-2)}
.gy-dark .gy-jt .m{color:var(--on-dark-3)}

/* ---------- 17. Reservation ---------- */
.gy-rez{display:grid;gap:56px}
@media (min-width:1000px){ .gy-rez{grid-template-columns:1fr 1fr;gap:64px;align-items:start} }
.gy-rez-box h3{font-size:21px;letter-spacing:-.035em;margin-bottom:10px}
.gy-rez-box .sub{font-size:14.5px;line-height:1.8;color:var(--mute);margin-bottom:30px}

.gy-f2{display:grid;gap:18px;margin-bottom:18px}
@media (min-width:560px){ .gy-f2{grid-template-columns:1fr 1fr} }
.gy-fl{display:grid;gap:8px}
.gy-fl > span{font-size:13.5px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.gy-fl > span i{font-style:normal;color:var(--accent)}
.gy-fl input,.gy-fl select,.gy-fl textarea{
  width:100%;padding:13px 2px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  background:transparent;font-size:16px;line-height:1.5;color:var(--ink);
  transition:border-color .16s var(--e-out)}
.gy-fl select{padding-left:0}
.gy-fl textarea{resize:vertical;min-height:80px}
.gy-fl input::placeholder,.gy-fl textarea::placeholder{color:var(--mute)}
.gy-fl input:focus,.gy-fl select:focus,.gy-fl textarea:focus{outline:0;border-bottom-color:var(--ink);border-bottom-width:1.5px}
.gy-fl .err{font-size:13px;color:#B3261E;font-weight:700}
.gy-fl input[aria-invalid="true"],.gy-fl textarea[aria-invalid="true"]{border-bottom-color:#B3261E}
.gy-consent{display:flex;align-items:flex-start;gap:11px;margin:10px 0 28px;font-size:14px;line-height:1.7;color:var(--copy);cursor:pointer}
.gy-consent input{flex:0 0 auto;width:17px;height:17px;margin-top:3px;accent-color:var(--ink)}
.gy-rez-alt{margin-top:16px;text-align:center;font-size:14px;color:var(--mute)}
.gy-rez-alt a{font-weight:800;color:var(--ink);border-bottom:1px solid var(--ink)}

.gy-rez-done{display:none;padding:10px 0}
.gy-rez-box.is-done form{display:none}
.gy-rez-box.is-done .gy-rez-done{display:block}
.gy-rez-done h3{margin-bottom:14px}
.gy-rez-done p{font-size:15.5px;line-height:1.9;color:var(--copy);margin-bottom:26px}

.gy-map{display:grid;gap:26px}
.gy-map-frame{aspect-ratio:16/10;background:var(--band)}
.gy-map-frame iframe{width:100%;height:100%;border:0;display:block}
.gy-map-box .hl{font-size:17px;font-weight:700;letter-spacing:-.035em;margin-bottom:20px;color:var(--ink)}
.gy-map-tbl{display:grid;gap:14px;margin-bottom:24px;border-top:1px solid var(--line)}
.gy-map-tbl > span{padding-top:14px}
@media (min-width:560px){ .gy-map-tbl{grid-template-columns:64px 1fr;gap:0 20px} .gy-map-tbl > span{padding:14px 0;border-bottom:1px solid var(--line)} }
.gy-map-tbl .k{font-size:13.5px;font-weight:700;color:var(--mute)}
.gy-map-tbl .v{font-size:15px;line-height:1.8;color:var(--copy)}
.gy-map-links{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 18. Dock ---------- */
.gy-dock{position:fixed;z-index:75}
@media (max-width:1499px){
  .gy-dock{left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .gy-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:10px 4px 9px;font-size:11px;font-weight:700;color:var(--copy)}
  .gy-dock a svg{width:19px;height:19px}
  .gy-dock a.on{color:var(--accent)}
  body{padding-bottom:64px}
}
@media (min-width:1500px){
  .gy-dock{right:20px;top:50%;transform:translateY(-50%);width:74px;
    background:var(--ink);border-radius:var(--r-dock);overflow:hidden}
  .gy-dock a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 6px;
    font-size:11px;font-weight:600;color:#fff;letter-spacing:-.02em}
  .gy-dock a + a{border-top:1px solid rgba(255,255,255,.16)}
  .gy-dock a svg{width:19px;height:19px}
  .gy-dock a:hover{background:var(--dark-2)}
  .gy-dock a.on{background:var(--accent)}
  .gy-dock a.on:hover{background:var(--accent-dk)}
}

/* ---------- 19. Footer ---------- */
.gf{background:var(--dark);color:var(--on-dark-2)}
.gf-top{max-width:var(--max);margin:0 auto;padding:66px var(--pad) 52px;display:grid;gap:44px}
@media (min-width:900px){ .gf-top{grid-template-columns:1.2fr 1fr 1.3fr;gap:56px;padding:80px var(--pad) 60px} }
.gf-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;color:#fff;line-height:1}
.gf-brand .mk{width:auto;height:40px;flex:0 0 auto}
.gf-brand .tx{display:flex;flex-direction:column;line-height:1}
.gf-brand .k{font-size:21px;font-weight:800;letter-spacing:-.055em;color:#fff}
.gf-brand .e{font-size:8px;font-weight:600;letter-spacing:.115em;color:var(--on-dark-3);
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.22)}
.gf-desc{font-size:15.5px;line-height:1.9;color:var(--on-dark-2);margin-bottom:26px;max-width:34ch}
.gf-lb{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--on-dark-3);margin-bottom:20px}
.gf-menu{display:grid;gap:13px}
.gf-menu a{font-size:14.5px;color:var(--on-dark-2)}
.gf-menu a:hover{color:#fff}
.gf-tel{display:inline-block;font-size:27px;font-weight:800;letter-spacing:-.04em;color:#fff;margin-bottom:16px}
.gf-tel:hover{color:var(--accent-lt)}
.gf-addr{font-size:15.5px;line-height:1.9;color:var(--on-dark-2);margin-bottom:20px}
.gf-addr b{color:#fff}
.gf-hours{display:grid;gap:7px;font-size:13.5px;color:var(--on-dark-3)}
.gf-hours b{color:#fff;font-weight:700}
.gf-hours i{font-style:normal;color:var(--accent-lt);font-weight:700}
.gf-bot{border-top:1px solid rgba(255,255,255,.12)}
.gf-bot-in{max-width:var(--max);margin:0 auto;padding:26px var(--pad) 34px;display:grid;gap:16px}
@media (min-width:900px){ .gf-bot-in{grid-template-columns:1fr auto;gap:36px;align-items:center} }
.gf-legal{font-size:12.5px;line-height:1.85;color:var(--on-dark-3);max-width:90ch}
.gf-cr{font-size:11.5px;letter-spacing:.06em;color:var(--on-dark-3);white-space:nowrap}
@media (max-width:1499px){ .gf{padding-bottom:64px} }

/* ---------- 20. Motion ---------- */
/* 계층을 만드는 데만 쓴다. 16px 위로 올리고 끝. */
/* v41.1 — 숨김은 JS가 "화면 아래에 있다"고 확인한 요소에만 건다(.rv-wait).
   CSS만으로 opacity:0 을 걸면 감지가 늦거나 안 도는 환경(전체 캡처·백그라운드 탭·인쇄)에서
   사진과 글이 통째로 빈칸이 된다. 사진이 든 블록은 아예 숨기지 않는다. */
.gy-rv{transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.gy-rv.rv-wait:not(:has(img)){opacity:0;transform:translateY(16px)}
.gy-rv-s > *{transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.gy-rv-s.rv-wait > *:not(img):not(:has(img)){opacity:0;transform:translateY(14px)}
.gy-rv-s.in > *:nth-child(2){transition-delay:70ms}
.gy-rv-s.in > *:nth-child(3){transition-delay:140ms}
.gy-rv-s.in > *:nth-child(4){transition-delay:210ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .gy-rv.rv-wait,.gy-rv-s.rv-wait > *{opacity:1;transform:none}
}
@media (hover:none){ .gy-rt:hover .gy-rt-fig img{transform:none} }

/* ---------- 21. Utilities ---------- */
.gy-center{text-align:center}
.gy-mb-s{margin-bottom:18px}
.gy-mb-m{margin-bottom:32px}
.gy-mb-l{margin-bottom:52px}
.gy-mt-l{margin-top:52px}

@media (max-width:360px){
  body{font-size:16px}
  .gy-hero h1{font-size:30px}
  .gy-h2{font-size:25px}
}

/* ---------- 23. 영어판 보정 ---------- */
/* 워드마크는 한글 6자 기준으로 잡아 둔 값이다. 영문은 자간과 크기를 다시 준다. */
[lang="en"] .gh-logo .k,[lang="en"] .gf-brand .k{font-size:15.5px;letter-spacing:.015em;font-weight:800}
[lang="en"] .gh-logo .e,[lang="en"] .gf-brand .e{font-size:7.5px;letter-spacing:.1em}
@media (min-width:760px){ [lang="en"] .gh-logo .k{font-size:17px} }
/* 영문은 단어 단위로 끊긴다. keep-all 은 한글용이므로 해제한다. */
[lang="en"] body,[lang="en"] h1,[lang="en"] h2,[lang="en"] h3,[lang="en"] p,[lang="en"] li{word-break:normal;text-wrap:pretty}
[lang="en"] .gh-nav{gap:24px}
[lang="en"] .gh-nav > a{font-size:15px}
[lang="en"] .gy-h1,[lang="en"] .gy-hero h1{letter-spacing:-.03em}
[lang="en"] .gy-h2{letter-spacing:-.028em}

/* =========================================================================
   24. 페르소나 E2E(56세 노안 환자) 리포트 반영  — 2026-09-20
   ========================================================================= */

/* ① 진료시간 띠가 12.5px 회색이라 고령 환자가 못 읽는다는 지적. 한 단 키우고 짙게. */
@media (min-width:1080px){
  .gh-util{font-size:13.5px;color:var(--copy)}
  .gh-util-r a{color:var(--copy)}
}

/* ② 서브내비가 360px 에서 뒤쪽 항목이 잘리는데 더 있다는 표시가 없었다.
      오른쪽에 페이드를 깔아 가로 스크롤이 남아 있음을 알린다. */
.gy-subnav{position:sticky;top:var(--head-total);z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.gy-subnav{position:relative;position:sticky}
.gy-subnav::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.97) 70%)}
@media (min-width:1080px){ .gy-subnav::after{display:none} }

/* ③ 노안 vs 백내장 비교표.
      기존 2단 카드는 모바일에서 위아래로 쪼개져 "비교"가 되지 않았다.
      질문 하나 아래 두 답을 붙여, 어느 폭에서도 두 줄 안에서 대조되게 한다. */
.gy-vs{border-top:1px solid var(--line)}
.gy-vs-item{padding:24px 0;border-bottom:1px solid var(--line);display:grid;gap:14px}
@media (min-width:760px){
  .gy-vs-item{grid-template-columns:200px 1fr 1fr;gap:28px;align-items:baseline;padding:26px 0}
}
@media (min-width:1080px){ .gy-vs-item{grid-template-columns:240px 1fr 1fr;gap:36px} }
.gy-vs-q{font-size:16px;font-weight:700;letter-spacing:-.032em;color:var(--ink);line-height:1.5}
.gy-vs-a{display:grid;gap:6px}
.gy-vs-a .k{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--faint)}
.gy-vs-a p{font-size:16.5px;line-height:1.75;color:var(--copy)}
.gy-vs-a.is-b .k{color:var(--accent)}
/* 760px 미만에서는 라벨을 왼쪽에 붙여 두 답이 바로 위아래로 오게 한다. */
@media (max-width:759px){
  .gy-vs-a{grid-template-columns:52px 1fr;gap:10px;align-items:baseline}
  .gy-vs-a .k{padding-top:2px}
}
/* 760px 이상에서 머리글 한 줄 */
.gy-vs-head{display:none}
@media (min-width:760px){
  .gy-vs-head{display:grid;grid-template-columns:200px 1fr 1fr;gap:28px;padding:0 0 12px;
    font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--faint)}
  .gy-vs-head .b{color:var(--accent)}
  @media (min-width:1080px){ .gy-vs-head{grid-template-columns:240px 1fr 1fr;gap:36px} }
  .gy-vs-item .gy-vs-a .k{display:none}
}

/* ④ 예약 폼 — 동의 에러가 회색 14px 로 같은 줄에 붙어 안 보였다.
      빨간색 블록으로 줄을 바꾸고, 체크박스도 17→22px 로 키운다. */
.gy-consent{position:relative;flex-wrap:wrap}
.gy-consent input{width:22px;height:22px;margin-top:1px}
.gy-consent .err,.gy-fl .err{display:block;width:100%;flex:1 0 100%;margin-top:8px;
  padding-left:2px;font-size:14px;font-weight:700;color:#B3261E;line-height:1.6}
.gy-consent .err::before,.gy-fl .err::before{content:"! ";font-weight:800}

/* ⑤ 예약 완료 화면에 입력 내용 요약을 보여 준다. */
.gy-rez-sum{display:grid;gap:0;margin:22px 0 26px;border-top:1px solid var(--line);text-align:left}
.gy-rez-sum div{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.gy-rez-sum .k{font-size:13.5px;font-weight:700;color:var(--mute)}
.gy-rez-sum .v{font-size:15px;color:var(--ink);font-weight:700}

/* ⑥ 푸터 고지문이 남색 위 연회색이라 거의 안 읽혔다. 한 단 밝게·크게.
      푸터 링크 터치 높이도 28 → 40px. */
.gf-legal{font-size:13px;color:var(--on-dark-2)}
.gf-menu{gap:4px}
.gf-menu a{display:inline-flex;align-items:center;min-height:40px;font-size:15px}
.gf-hours{font-size:15px;color:var(--on-dark-2)}

/* ⑦ 예약 섹션은 등장 효과를 주지 않는다 — 입력 중 레이아웃이 흔들린다는 지적. */
#reserve .gy-rv,#reserve .gy-rv-s > *{opacity:1;transform:none;transition:none}

/* =========================================================================
   25. 디자인 감사 + 사용자 지적 반영 (2차)  — 2026-09-20
   ========================================================================= */

/* ① 주의 문구·각주 끝의 링크가 본문 문장에 붙어 그냥 문장처럼 읽혔다.
      줄을 바꿔 행동으로 보이게 한다(모바일에서 특히). */
.gy-warn a,.gy-note a{display:block;width:fit-content;margin-top:12px;
  font-weight:700;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px}
.gy-warn a:hover,.gy-note a:hover{color:var(--accent-dk)}
.gy-warn{font-size:16px;line-height:1.85}

/* ② 데스크톱에서 GNB 6개가 다 보이는데 햄버거까지 떠 있었다(기능 중복). */
@media (min-width:1080px){ .gh-burger{display:none} }

/* ③ 768~1079 구간에서 유틸바와 예약 버튼이 동시에 사라져 CTA 가 없었다. */
@media (min-width:760px){ .gh-act{display:flex;align-items:center;gap:12px;margin-left:auto} }
@media (min-width:760px) and (max-width:1079px){
  .gh-act .gy-btn{height:40px;padding:0 18px;font-size:14px}
}

/* ④ 협력병원 줄이 히어로 바로 밑인데 상하 80px 뿐이라 숨이 막혔다. */
@media (min-width:960px){ .gy-trust-in{padding:104px var(--pad) 120px} }

/* ⑤ 360px 에서 협력병원 현판 사진이 283×110 으로 줄어 판독이 불가능했다.
      사진 대신 병원명을 글자로 읽힌다. */
.gy-trust-alt{display:none}
@media (max-width:599px){
  .gy-trust-fig{display:none}
  .gy-trust-alt{display:grid;gap:10px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .gy-trust-alt span{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
  .gy-trust-alt i{font-style:normal;font-weight:400;color:var(--mute);font-size:14.5px}
}

/* ⑥ 360px 히어로에서 --opm 이 80% 48% 라 환자가 통째로 잘리고 장비만 남았다(R3). */
@media (max-width:599px){
  .gy-hero-in{min-height:min(66dvh,540px)}
}

/* ⑦ 480px 이하에서 히어로 버튼 3개 폭이 150/181/180 으로 들쭉날쭉했다. */
@media (max-width:480px){
  /* .gy-hero-in 이 align-items:flex-start 라 CTA 줄 자체가 콘텐츠 폭으로 줄어든다.
     줄을 먼저 늘려야 버튼의 width:100% 가 의미를 갖는다. */
  .gy-hero-cta{flex-direction:column;align-items:stretch;gap:12px;align-self:stretch;width:100%}
  .gy-hero-cta .gy-btn{width:100%}
}

/* ⑧ 768 이하에서 서브내비의 현재 항목 라벨이 탭 자리를 1/3 먹었다. */
@media (max-width:767px){ .gy-subnav .cur{display:none} .gy-subnav .ls{margin-left:0} }

/* ⑨ FAQ 만 가운데 정렬이라 좌 제목 체계에서 혼자 튀었다. 좌측으로 돌린다. */
.gy-faq-sec .gy-ct{text-align:left;margin-bottom:44px}
.gy-faq-sec .gy-ct .gy-lead{margin-left:0}
.gy-faq{max-width:880px}

/* ⑩ 저널 글의 저자 아바타가 사이트에서 유일하게 원형이었다(이미지 radius 0 규칙). */
.post-by img,.post-author img{border-radius:0}

/* =========================================================================
   26. 모바일 전면 개선 — 줄배열 · 가시성 · 고정 레이어 위계  (2026-09-20)

   모바일에서 화면을 먹는 고정 레이어가 셋이다(헤더 66 + 서브내비 58 + 하단독 64
   = 188px). 390x760 기준 화면의 25%다. 셋 다 한 단씩 낮추고, 본문은 줄배열을
   기기 폭에 맡긴다.
   ========================================================================= */

/* ① 본문의 <br> 은 데스크톱 리듬 기준으로 넣은 것이다. 모바일에서는 한 줄에
      두세 글자만 떨어져 리듬이 깨진다. **본문만** 풀고 제목의 <br> 은 남긴다
      (제목까지 풀면 "않습니다."만 한 줄에 떨어진다 — CLAUDE.md R4). */
@media (max-width:759px){
  .gy-lead br,
  .gy-body br,
  .gy-hero p br,
  .gy-pagehead p br,
  .gy-rt p br,
  .gy-trust-t br,
  .gy-prose p br,
  .gy-warn br,
  .gy-note br,
  .gy-spec-row .v br,
  .gf-desc br{display:none}
}

/* ② 고정 레이어를 한 단씩 낮춘다. */
@media (max-width:759px){
  :root{--head-h:58px;--head-total:58px}
  .gy-subnav-in{height:50px;gap:20px}
  .gy-subnav .ls{gap:20px}
  .gy-subnav .ls a{font-size:15px}
  .gy-dock a{padding:8px 4px 7px;font-size:11px}
  body{padding-bottom:58px}
  .gf{padding-bottom:58px}
}

/* ③ 손가락으로 누르는 것은 전부 44px 이상. */
@media (max-width:1079px){
  .gy-dock a{min-height:52px}
  .gh-drawer-in > a{padding:16px 2px;min-height:52px}
  .gy-map-links .gy-btn{height:46px}
  .gy-subnav .ls a{min-height:44px;display:inline-flex;align-items:center}
}

/* ④ 모바일 타이포 — 제목은 줄이고 본문은 지킨다.
      제목만 줄여야 본문 가독성을 유지하면서 화면당 정보량이 는다. */
@media (max-width:759px){
  .gy-h2{font-size:26px;line-height:1.3;letter-spacing:-.035em}
  .gy-pagehead h1{font-size:29px;line-height:1.3}
  .gy-pagehead{padding:56px 0 44px}
  .gy-ct{margin-bottom:40px}
  .gy-head{margin-bottom:32px}
  .gy-lead{font-size:16.5px;line-height:1.85}
  .gy-rt h3{font-size:21px;line-height:1.4}
  .gy-2col > h2,.gy-2col > h3{font-size:23px;line-height:1.4}
  .gy-quote{font-size:20px;line-height:1.55}
  .gy-cred{gap:32px}
  .gy-spec-row{padding:18px 0}
  .gy-vs-q{font-size:17px}
}

/* ⑤ 섹션 간격을 조금 좁혀 스크롤 피로를 줄인다(데스크톱 값은 그대로). */
@media (max-width:759px){ :root{--gap-sec:76px;--gap-sec-lg:92px} }

/* ⑥ 모바일에서 버튼은 한 줄에 하나. 두 개가 반반씩 잘리면 라벨이 읽히지 않는다. */
@media (max-width:519px){
  .gy-map-links{flex-direction:column;align-items:stretch}
  .gy-map-links .gy-btn{width:100%}
  .gy-dark .gy-center > div[style*="flex"]{flex-direction:column;align-items:stretch}
  .gy-dark .gy-center .gy-btn{width:100%}
}

/* ⑦ 모바일 페이지헤드는 가운데 정렬이 아니라 좌측이 읽기 편하다. */
@media (max-width:599px){
  .gy-pagehead{text-align:left}
  .gy-pagehead p{margin-left:0}
  .gy-ct{text-align:left}
  .gy-ct .gy-lead{margin-left:0;margin-right:0}
}

/* 영문 라벨이 길어 3-up 이 2x2 로 깨지고 네 번째 칸이 고아가 됐다. 3열로 고정한다. */
.gy-trust-n.is-en{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.gy-trust-n.is-en div{min-width:0}
@media (max-width:599px){ .gy-trust-n.is-en{grid-template-columns:1fr;gap:20px} }

/* 장비명 영문은 대문자 키커로 띄우지 않고 국문 제목 옆에 작게 병기한다. */
.gy-col h3 .en{display:block;margin-top:6px;font-size:13px;font-weight:400;
  letter-spacing:0;color:var(--mute);text-transform:none}

/* ── 전수조사 후속: 12px 미만으로 남아 있던 읽는 글자를 올린다 ──────────
   로고의 영문 서브라인(.gh-logo .e)과 체크 아이콘 글리프는 장식이라 그대로 둔다. */
@media (max-width:1499px){ .gy-dock a{font-size:12px} }
@media (min-width:1500px){ .gy-dock a{font-size:12px} }
.gf-cr{font-size:12.5px;color:var(--on-dark-2)}

/* =========================================================================
   v41.2 — 고급화 (2026-09-27)
   원칙: 효과를 얹지 않는다. 굵기·자간·여백·선 굵기만 다듬는다.
   · 800 굵기 제목은 "크고 무겁다"로 읽힌다. 680~700 으로 내려 획을 가늘게.
   · 글자가 가늘어진 만큼 자간을 한 단 푼다(-.045 → -.034em).
   · 버튼·칩은 굵기를 빼고 선을 옅게. 누를 수 있다는 건 모양이 말해 준다.
   · PC(1080~1399)의 하단 탭바는 앱처럼 보인다 → 숨긴다. 헤더에 예약·전화가 있다.
   · 소제목에 입힌 액센트 색(규칙 3·7 위반)을 걷어낸다.
   ========================================================================= */

/* 1. 제목 — 가늘게, 자간은 한 단 풀기 */
h1,h2,h3,h4,h5{font-weight:700}
.gy-h1,.gy-hero h1{font-weight:680;letter-spacing:-.036em;line-height:1.2}
.gy-h2{font-weight:680;letter-spacing:-.034em;line-height:1.28}
.gy-pagehead h1{font-weight:680;letter-spacing:-.036em}
.gy-h3,.gy-rt h3,.gy-jt h3,.gy-prin-i h3{font-weight:650;letter-spacing:-.03em}
.gy-2col > h2,.gy-2col > h3{font-weight:680;letter-spacing:-.032em}
.gy-quote{font-weight:650;letter-spacing:-.032em}
.gy-trust-n .n{font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-size:38px}
.gy-trust-n .l{font-size:14.5px;color:var(--mute)}
.gy-trust-n div{border-top:1px solid var(--ink);padding-top:16px;min-width:150px}

/* 2. 본문 — 회색 글자의 무게를 약간 덜고 행 길이를 제한 */
.gy-lead{letter-spacing:-.018em}
.gy-body,.gy-rt li,.gy-prin-i p{letter-spacing:-.016em}

/* 3. 소제목(분류) — 액센트 대신 작고 차분하게 */
.gy-rt .k{color:var(--mute);font-weight:500;font-size:13.5px;letter-spacing:-.005em;margin-bottom:12px}
.gy-rt-fig{margin-bottom:26px}
.gy-rt h3{margin-bottom:18px}

/* 4. 버튼 — 굵기를 빼고, 어두운 면 위 선은 옅게 */
.gy-btn{font-weight:600;letter-spacing:-.015em}
.gy-btn-on-dark{border-color:rgba(255,255,255,.42)}
.gy-hero .gy-btn{border-color:rgba(255,255,255,.46);color:#fff;backdrop-filter:blur(2px)}
.gy-hero .gy-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.gy-tl{font-weight:600;padding-bottom:4px}

/* 5. 히어로 칩 — 상자를 걷고 앞에 가는 선 하나 */
.gy-hero .gy-chip{border:0;background:none;padding:0;gap:12px;font-size:14.5px;letter-spacing:-.01em;margin-bottom:28px}
.gy-hero .gy-chip::before{content:"";width:28px;height:1px;background:rgba(255,255,255,.6)}
.gy-hero .gy-chip b{font-weight:650;font-size:14.5px}
.gy-hero p{letter-spacing:-.015em}

/* 6. 헤더 — 로고와 내비 굵기 정돈 */
.gh-logo .k{font-weight:750;letter-spacing:-.05em}
.gh-util-r .tel{font-weight:700}

/* 7. 원칙 번호 — 숫자는 가늘고 크게, 선은 검게 */
.gy-prin-i{border-top-color:var(--ink)}
.gy-prin-i .n{font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* 8. 독 — PC 폭(1080~1399)에서는 숨긴다. 우측 세로 독은 1400부터. */
@media (min-width:1080px) and (max-width:1399px){
  .gy-dock{display:none !important}
  body{padding-bottom:0}
}
@media (min-width:1400px){
  .gy-dock{left:auto;bottom:auto;right:20px;top:50%;transform:translateY(-50%);width:74px;display:block;
    background:var(--ink);border-radius:var(--r-dock);overflow:hidden;border-top:0;padding-bottom:0}
  .gy-dock a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 6px;min-height:0;
    font-size:11px;font-weight:600;color:#fff;letter-spacing:-.02em}
  .gy-dock a + a{border-top:1px solid rgba(255,255,255,.16)}
  .gy-dock a:hover{background:var(--dark-2)}
  .gy-dock a.on{background:var(--accent);color:#fff}
  body{padding-bottom:0}
}

/* 9. 모바일 — 제목은 한 단 가볍게, 히어로 버튼은 덜 육중하게 */
@media (max-width:759px){
  .gy-hero h1{letter-spacing:-.034em}
  .gy-hero-cta{gap:8px}
  .gy-hero-cta .gy-btn{height:50px;font-size:15.5px}
  .gy-trust-n{gap:24px 28px}
  .gy-trust-n div{min-width:128px}
  .gy-trust-n .n{font-size:32px}
  .gy-dock a{font-weight:600}
  .gh-burger i{height:1.25px}
}
@media (max-width:1079px){ .gh-burger{padding:0 11px} }
/* 모바일 히어로 CTA — 예약 두 개는 한 줄에, 전화는 아래 한 줄. 세 칸이 쌓이면 육중하다. */
@media (min-width:340px) and (max-width:480px){
  .gy-hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .gy-hero-cta .gy-btn{padding:0 10px;font-size:15px}
  .gy-hero-cta .gy-btn:nth-child(3){grid-column:1 / -1}
}
/* 푸터·메가메뉴의 큰 숫자·제목도 같은 굵기 체계로 */
.gf-tel,.gh-drawer-in > a.gh-drawer-tel{font-weight:650;letter-spacing:-.03em}
.gh-mega-l .t{font-weight:680;letter-spacing:-.034em}
.gf-brand .k{font-weight:750}
.gy-rez-alt a{font-weight:650}


/* =========================================================================
   v42 (2026-10-05) — 가시성 · 인터랙션 · 동적 모션
   벤치마크 실측: 압구정안과(톤 — 세리프 영문 액센트, 제목 속 강조어, 다크 브랜드
   밴드의 시그니처 원칙, 회전 원형 문구) + 비앤빛(동작 — 줄 단위 제목 등장, 숫자
   카운트업, 회색→검정 채움, 가로 스와이프+진행바, 섹션 인디케이터, 내원 전 안내).

   지키는 것 (v41 규칙은 그대로다)
   - 카드·그림자·필 버튼·대문자 영문 키커를 들이지 않는다.
   - 숨김은 "화면 아래"에 있는 요소에만, 사진은 절대 통째로 가리지 않는다.
     (사진 등장은 위쪽 14%만 덮었다가 열린다. 감지가 실패해도 86%는 보인다.)
   - 자동으로 넘어가는 히어로 슬라이드는 넣지 않는다(고령 환자).
   - 무한 반복 모션은 장식 두 개뿐이다(영문 워터마크 흐름, 원형 문구 회전).
     prefers-reduced-motion 에서 모두 멈춘다.
   - 스크롤 연동은 CSS scroll-driven animation 을 먼저 쓰고(@supports),
     지원하지 않는 브라우저에서는 그냥 정지 화면이 된다. 깨지지 않는다.

   새로 허용한 것 (사용자 지시 2026-10-05: 압구정 톤 채택)
   - 세리프 영문(Cormorant Garamond Italic, 13.5KB 서브셋)은 **장식 전용**:
     워터마크, 원형 문구, 큰 단계 번호, 스크롤 표시. 읽어야 하는 글자에는 쓰지 않는다.
   - 제목 안 강조어 1개(<em>)만 액센트 색. 문단·라벨에는 쓰지 않는다.
   ========================================================================= */
@font-face{
  font-family:'Cormorant Italic';font-style:italic;font-weight:500;font-display:swap;
  src:url('fonts/Cormorant-Italic-subset.woff2') format('woff2');
  unicode-range:U+20,U+26,U+2C-39,U+41-5A,U+61-7A,U+B7,U+2019;
}
:root{
  --serif:'Cormorant Italic','Times New Roman',serif;
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ── 1. 제목 강조어 ── */
.gy-h2 em,.gy-hero h1 em,.gy-pagehead h1 em,.gy-h1 em{font-style:normal;color:var(--accent)}
.gy-dark .gy-h2 em,.gy-hero h1 em{color:var(--accent-lt)}

/* ── 2. 줄 단위 등장 (JS 가 <br> 기준으로 .ln 을 만든다) ──
   JS 가 없으면 .ln 자체가 안 생기므로 아무것도 숨지 않는다. */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > span{display:inline-block;transition:transform .95s var(--e-expo),opacity .6s linear;transition-delay:calc(var(--i,0) * 90ms)}
.lw .ln > span{transform:translateY(108%);opacity:0}
/* 히어로 h1 은 첫 화면이므로 로드 직후에 올린다 */
.gy-hero .ln > span{animation:gyLine 1.1s var(--e-expo) both;animation-delay:calc(180ms + var(--i,0) * 110ms)}
@keyframes gyLine{from{transform:translateY(108%)}to{transform:none}}

/* ── 3. 히어로 — 천천히 가라앉는 배경, 순서대로 오르는 글, 스크롤 시 배경 시차 ── */
.gy-hero-bg img{animation:gyKB 2.8s var(--e-expo) both}
@keyframes gyKB{from{scale:1.09}to{scale:1}}
.gy-hero .gy-chip,.gy-hero-in > p,.gy-hero-cta{animation:gyUp .9s var(--e-expo) both}
.gy-hero .gy-chip{animation-delay:.05s}
.gy-hero-in > p{animation-delay:.48s}
.gy-hero-cta{animation-delay:.6s}
@keyframes gyUp{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@supports (animation-timeline:view()){
  .gy-hero-bg img{animation:gyKB 2.8s var(--e-expo) both,gyPar linear both;
    animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
  @keyframes gyPar{to{translate:0 14%}}
  .gy-hero-in{animation:gyFade linear both;animation-timeline:view();animation-range:exit 10% exit 80%}
  @keyframes gyFade{to{opacity:.15;translate:0 -40px}}
}
/* 스크롤 표시 — PC 만 */
.gy-cue{display:none}
@media (min-width:1080px){
  .gy-cue{display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;left:50%;bottom:28px;
    translate:-50% 0;color:rgba(255,255,255,.78);font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.02em}
  .gy-cue i{position:relative;display:block;width:1px;height:46px;background:rgba(255,255,255,.22);overflow:hidden}
  .gy-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:46px;background:#fff;animation:gyCue 2.2s var(--e-io) infinite}
  .gy-cue:hover{color:#fff}
}
@keyframes gyCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ── 4. 헤더 — 읽은 만큼 가는 선, 내려가면 얇은 그림자 ── */
.gh{transition:box-shadow .3s var(--e-out)}
.gh.is-scrolled{box-shadow:0 10px 30px -22px rgba(14,33,53,.45)}
@supports (animation-timeline:scroll()){
  .gh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
    transform-origin:0 50%;transform:scaleX(0);animation:gyProg linear both;animation-timeline:scroll(root);pointer-events:none}
  @keyframes gyProg{to{transform:scaleX(1)}}
}

/* ── 5. 사진 등장 — 위 14%만 덮었다가 열리고, 살짝 커졌던 사진이 제자리로 ── */
.cw img{clip-path:inset(14% 0 0 0);scale:1.12}
.cw img,.cin img{transition:clip-path 1.2s var(--e-expo),scale 1.6s var(--e-expo)}
.cin img{clip-path:inset(0 0 0 0);scale:1}

/* ── 6. 버튼 — 왼쪽에서 차오르는 면, 텍스트 링크는 화살표가 밀린다 ── */
.gy-btn{--fill:var(--ink);--fill-c:#fff;position:relative;isolation:isolate;overflow:hidden}
.gy-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-expo)}
.gy-btn:hover{background:transparent;color:var(--fill-c)}
.gy-btn:hover::before{transform:scaleX(1);transform-origin:left}
.gy-btn-on-dark,.gy-hero .gy-btn{--fill:#fff;--fill-c:var(--ink)}
.gy-hero .gy-btn:hover,.gy-btn-on-dark:hover{background:transparent}
.gy-btn-solid{--fill:var(--accent)}
.gy-btn-solid:hover{background:var(--ink);border-color:var(--accent)}
.gy-tl{position:relative;padding-right:1.5em;border-bottom-color:currentColor;transition:color .25s var(--e-out)}
.gy-tl::before{content:"";position:absolute;right:0;top:calc(50% - 2px);width:.95em;height:.95em;translate:0 -50%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--e-expo)}
.gy-tl:hover::before,.gy-rt:hover .gy-tl::before{transform:translateX(5px)}
.gy-rt:hover .gy-tl{color:var(--accent);border-color:var(--accent)}
.gy-rt h3{transition:color .3s var(--e-out)}
.gy-jt a{position:relative}
/* v42.1 — 제목을 밀면 밑줄(border)이 글자보다 6px 늦게 시작해 어긋나 보였다. 밀지 않는다. */
.gy-jt h3{transition:border-color .3s var(--e-out)}

/* ── 7. 증상 찾기 — 모바일은 옆으로 넘기고 진행바로 위치를 알린다 ── */
.gy-swipe-bar{display:none}
@media (max-width:639px){
  .gy-route[data-swipe]{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gy-route[data-swipe]::-webkit-scrollbar{display:none}
  .gy-route[data-swipe] > .gy-rt{flex:0 0 84%;scroll-snap-align:start}
  .gy-route[data-swipe] .gy-rt-fig img{aspect-ratio:4/3}
  .gy-swipe-bar{display:block;position:relative;height:2px;margin-top:22px;background:var(--line)}
  .gy-swipe-bar i{position:absolute;left:0;top:0;height:2px;width:var(--w,33.4%);background:var(--ink);
    transform:translateX(calc(var(--x,0) * 100%));transition:transform .2s linear}
}

/* ── 8. 진료 원칙 — 다크 밴드 시그니처 ── */
.gy-sys{position:relative;overflow:hidden;padding-bottom:0}
.gy-sys .gy-label{color:var(--on-dark-3)}
.gy-sys-grid{display:grid;gap:44px}
@media (min-width:960px){
  .gy-sys-grid{grid-template-columns:minmax(0,420px) 1fr;gap:80px;align-items:start}
  .gy-sys-head{position:sticky;top:calc(var(--head-total) + 64px)}
}
.gy-sys-lead{margin-top:22px;font-size:17px;line-height:1.9;color:var(--on-dark-2);letter-spacing:-.016em}
.gy-sys-count{display:none}
.gy-sys-rail{display:none}
@media (min-width:960px){
  .gy-sys-count{display:flex;align-items:baseline;gap:12px;margin-top:56px;font-family:var(--serif);font-style:italic;color:var(--on-dark-3)}
  .gy-sys-count b{font-weight:500;font-size:84px;line-height:.9;color:#fff;letter-spacing:-.02em;font-variant-numeric:lining-nums}
  .gy-sys-count span{font-size:24px}
  .gy-sys-rail{display:block;position:relative;width:180px;height:1px;margin-top:22px;background:rgba(255,255,255,.18)}
  .gy-sys-rail i{position:absolute;left:0;top:0;height:1px;width:25%;background:var(--accent-lt);
    transform:scaleX(var(--p,1));transform-origin:left;transition:transform .8s var(--e-expo)}
}
.gy-sys-steps{list-style:none;margin:0;padding:0;counter-reset:none}
.gy-sys-step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:36px 0;border-top:1px solid rgba(255,255,255,.16);
  transition:opacity .6s var(--e-out)}
.gy-sys-step:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:960px){ .gy-sys-step{grid-template-columns:110px 1fr;padding:52px 0} }
.gy-sys-step .n{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--on-dark-3);transition:color .5s var(--e-out)}
@media (min-width:960px){ .gy-sys-step .n{font-size:56px} }
.gy-sys-step h3{font-size:clamp(21px,2.3vw,27px);font-weight:650;letter-spacing:-.032em;line-height:1.35;color:#fff;margin-bottom:12px}
.gy-sys-step p{font-size:17px;line-height:1.9;color:var(--on-dark-2);letter-spacing:-.016em;max-width:44ch}
/* JS 가 살아 있을 때만 현재 단계 외를 낮춘다(모바일은 덜 낮춘다 — 읽혀야 한다) */
.gy-sys.is-live .gy-sys-step{opacity:.42}
@media (max-width:959px){ .gy-sys.is-live .gy-sys-step{opacity:.62} }
.gy-sys.is-live .gy-sys-step.on{opacity:1}
.gy-sys-step.on .n{color:var(--accent-lt)}

/* 흐르는 영문 워터마크 — 장식. 읽는 글자가 아니다. */
.gy-wm{margin-top:var(--gap-sec);overflow:hidden;white-space:nowrap;pointer-events:none;user-select:none;line-height:.82}
.gy-wm-track{display:inline-flex;animation:gyWm 48s linear infinite}
.gy-wm span{font-family:var(--serif);font-style:italic;font-size:clamp(68px,11vw,168px);color:rgba(255,255,255,.07);padding-right:.5em;
  transform:translateY(.16em);display:inline-block}
@keyframes gyWm{to{transform:translateX(-50%)}}

/* ── 9. 원장 — 회전 원형 문구, 인용문은 읽는 만큼 짙어진다 ── */
.gy-cred-fig{position:relative}
.gy-ring{position:absolute;width:118px;height:118px;right:-34px;top:-40px;overflow:visible;animation:gyRing 32s linear infinite}
.gy-ring text{font-family:var(--serif);font-style:italic;font-size:11.4px;fill:var(--ink)}
.gy-ring circle{fill:var(--accent)}
@media (max-width:899px){ .gy-ring{width:92px;height:92px;right:-6px;top:-34px} }
@keyframes gyRing{to{rotate:360deg}}
@supports (animation-timeline:view()){
  [data-fill]{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,var(--ink) 0 50%,var(--mute) 50% 100%);background-size:200% 100%;background-position:100% 0;
    animation:gyFill linear both;animation-timeline:view();animation-range:entry 30% cover 52%}
  @keyframes gyFill{to{background-position:0 0}}
}

/* ── 10. 숫자 카운트업 — 자리수가 바뀌어도 폭이 흔들리지 않게 ── */
[data-count]{font-variant-numeric:tabular-nums}

/* ── 11. 내원 전 확인 ── */
.gy-prep{list-style:none;margin:0 0 64px;padding:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.gy-prep li{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.gy-prep svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.gy-prep b{display:block;font-size:17px;font-weight:650;letter-spacing:-.03em;color:var(--ink);margin-bottom:4px}
.gy-prep span{display:block;font-size:15.5px;line-height:1.75;color:var(--copy);letter-spacing:-.015em}
@media (min-width:860px){
  .gy-prep{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .gy-prep li{border-bottom:0;padding:30px 28px 30px 0}
  .gy-prep li + li{padding-left:28px;border-left:1px solid var(--line)}
}

/* ── 12. 섹션 인디케이터 (홈, 1400+) ── */
.gy-idx{display:none}
@media (min-width:1400px){
  .gy-idx{display:flex;flex-direction:column;gap:2px;position:fixed;left:26px;top:50%;translate:0 -50%;z-index:70;
    opacity:0;transition:opacity .4s var(--e-out)}
  .gy-idx.show{opacity:1}
  .gy-idx a{display:flex;align-items:center;gap:12px;height:30px;color:var(--mute);font-size:13px;letter-spacing:-.02em}
  .gy-idx a i{display:block;width:16px;height:1px;background:currentColor;transition:width .45s var(--e-expo)}
  .gy-idx a span{opacity:0;translate:-6px 0;transition:opacity .3s var(--e-out),translate .4s var(--e-expo);white-space:nowrap}
  .gy-idx a.on{color:var(--ink)}
  .gy-idx a.on i{width:34px}
  .gy-idx:hover a span,.gy-idx a.on span,.gy-idx a:focus-visible span{opacity:1;translate:0 0}
  .gy-idx.dk a{color:rgba(255,255,255,.55)}
  .gy-idx.dk a.on{color:#fff}
}

@property --gyp{syntax:'<percentage>';inherits:false;initial-value:0%}
/* ── 13. 맨 위로 — 읽은 만큼 테두리가 찬다 ── */
.gy-top{position:fixed;right:14px;bottom:calc(58px + 14px);z-index:74;width:46px;height:46px;display:grid;place-items:center;
  background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);
  opacity:0;visibility:hidden;translate:0 10px;transition:opacity .3s var(--e-out),translate .4s var(--e-expo),visibility 0s .3s}
.gy-top.on{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.gy-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .35s var(--e-expo)}
.gy-top:hover svg{translate:0 -3px}
.gy-top:hover{border-color:var(--ink)}
/* 모바일에서는 본문 글자를 가린다. iOS 는 상태바를 누르면 맨 위로 간다. */
@media (max-width:759px){ .gy-top{display:none} }
@media (min-width:760px) and (max-width:1079px){ .gy-top{bottom:calc(64px + 16px)} }
@media (min-width:1080px){ .gy-top{right:24px;bottom:24px;width:52px;height:52px} }
@media (min-width:1080px) and (max-width:1399px){ .gy-top{bottom:24px} }
@supports (animation-timeline:scroll()){
  .gy-top::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
    background:conic-gradient(var(--accent) var(--gyp),transparent 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    animation:gyRingP linear both;animation-timeline:scroll(root)}
  @keyframes gyRingP{to{--gyp:100%}}
}

/* ── 14. 하단 탭바 — 누르는 느낌 ── */
@media (max-width:1399px){
  .gy-dock a{transition:background-color .15s var(--e-out),color .15s var(--e-out)}
  .gy-dock a:active{background:var(--band)}
}

/* ── 15. 서브 페이지 머리 — 제목 줄 등장 뒤 설명이 따라온다 ── */
.post-hero h1 em{color:var(--accent)}
.gy-pagehead .ln > span,.post-hero .ln > span{animation:gyLine 1.05s var(--e-expo) both;animation-delay:calc(80ms + var(--i,0) * 110ms)}
.gy-pagehead p{animation:gyUp .9s var(--e-expo) .35s both}

/* ── 16. 모션 줄이기 ── */
@media (prefers-reduced-motion:reduce){
  .gy-wm-track,.gy-ring,.gy-cue i::after{animation:none !important}
  .lw .ln > span{transform:none;opacity:1}
  .cw img{clip-path:none;scale:1}
  [data-fill]{color:var(--ink);background:none;animation:none}
  .gh::after,.gy-hero-in,.gy-hero-bg img{animation:none !important}
}
@media print{ .gy-top,.gy-idx,.gy-wm,.gy-cue{display:none !important} .lw .ln > span,.cw img{transform:none;opacity:1;clip-path:none;scale:1} }


/* =========================================================================
   v42.1 (2026-10-05) — 홈 「연세 아이 저널」 가시성
   이전: 가운데 제목 + 글만 있는 3등분 칸(사진·날짜 없음, 라벨 12.5px).
   지금: 시그니처 2단(좌 제목 고정 / 우 사진 목록). 모바일은 증상 찾기와 같은
   가로 넘기기 + 진행바. 카드가 아니다 — 면·그림자 없이 헤어라인으로만 나눈다.
   ========================================================================= */
.gy-jl{display:grid;gap:40px}
.gy-jl-head .gy-label{color:var(--on-dark-3)}
.gy-jl-lead{margin-top:22px;font-size:17px;line-height:1.9;color:var(--on-dark-2);letter-spacing:-.016em}
.gy-jl-list{list-style:none;margin:0;padding:0}
.gy-jl-i{display:grid;color:#fff}
.gy-jl-fig{display:block;overflow:hidden;background:var(--dark-2)}
.gy-jl-fig img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.82) brightness(.9);
  transition:transform .9s var(--e-expo),filter .5s var(--e-out)}
.gy-jl-b{display:block;min-width:0}
.gy-jl-m{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--on-dark-3);letter-spacing:-.01em;margin-bottom:12px}
.gy-jl-m .no{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1;color:var(--accent-lt);margin-right:4px}
.gy-jl-m i{width:1px;height:11px;background:rgba(255,255,255,.28)}
.gy-jl-m time{font-variant-numeric:tabular-nums}
.gy-jl-t{display:inline;font-size:clamp(20px,2.1vw,25px);line-height:1.45;font-weight:650;letter-spacing:-.032em;color:#fff;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:3px;transition:background-size .55s var(--e-expo)}
.gy-jl-t em{font-style:normal;color:var(--accent-lt)}
.gy-jl-x{display:block;margin-top:12px;font-size:16.5px;line-height:1.8;color:var(--on-dark-2);letter-spacing:-.016em}
.gy-jl-i .ar{display:none}
.gy-jl-more .gy-btn{width:100%}
.gy-jl-bar{background:rgba(255,255,255,.18)}
.gy-jl-bar i{background:#fff}

/* 모바일 — 옆으로 넘기기 */
@media (max-width:639px){
  .gy-jl-list[data-swipe]{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .gy-jl-list[data-swipe]::-webkit-scrollbar{display:none}
  .gy-jl-list > li{flex:0 0 84%;scroll-snap-align:start}
  .gy-jl-fig{margin-bottom:20px}
  .gy-jl-fig img{filter:none}
  .gy-jl-bar{margin-top:6px}
  .gy-jl{gap:32px}
}
/* 태블릿 이상 — 사진 목록 */
@media (min-width:640px){
  .gy-jl-list > li{border-top:1px solid rgba(255,255,255,.16)}
  .gy-jl-list > li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
  .gy-jl-i{grid-template-columns:180px minmax(0,1fr) 28px;gap:28px;align-items:center;padding:30px 0;transition:opacity .4s var(--e-out)}
  .gy-jl-i .ar{display:block;width:26px;height:26px;fill:none;stroke:var(--on-dark-3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .5s var(--e-expo),stroke .3s var(--e-out)}
  .gy-jl-more .gy-btn{width:auto}
}
/* PC — 좌: 고정된 제목과 전체 보기 / 우: 목록 */
@media (min-width:960px){
  .gy-jl{grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-template-areas:"head list" "more list";grid-template-rows:auto 1fr;column-gap:80px;row-gap:40px;align-items:start}
  .gy-jl-head{grid-area:head;position:sticky;top:calc(var(--head-total) + 64px)}
  .gy-jl-list{grid-area:list}
  .gy-jl-more{grid-area:more;align-self:start}
  .gy-jl-bar{display:none}
  .gy-jl-i{grid-template-columns:240px minmax(0,1fr) 30px;gap:40px;padding:40px 0}
}
@media (hover:hover){
  .gy-jl-i:hover .gy-jl-fig img{transform:scale(1.06);filter:none}
  .gy-jl-i:hover .gy-jl-t,.gy-jl-i:focus-visible .gy-jl-t{background-size:100% 1px}
  .gy-jl-i:hover .ar{transform:translateX(6px);stroke:#fff}
  .gy-jl-list:hover .gy-jl-i:not(:hover){opacity:.5}
}
.gy-jl-i:focus-visible{outline:2px solid var(--accent-lt);outline-offset:6px}


/* =========================================================================
   v42.2 (2026-10-05) — 모바일 스크롤 감각 · 섹션 인지
   실측(390, CPU 4배 감속, 터치 플릭 12회): 프레임 끊김 0%, p95 16.7ms — 렌더링은
   문제가 아니었다. 문제는 둘이었다.
   ① 앵커 착지가 헤더 아래 61~64px 어긋났다. 서브내비(62px) 몫을 서브내비가 없는
      홈에도 비워 둬서 이전 섹션 꼬리가 보이며 멈췄다 → 서브내비 있는 페이지만 비운다.
   ② 들어온 제목·사진이 0.95~1.6초에 걸쳐 나타나 빠르게 넘기면 "늦게 따라오는"
      느낌이 났다 → 모바일은 짧고 가깝게.
   ========================================================================= */
html{scroll-padding-top:calc(var(--head-total) + 1px)}
html:has(.gy-subnav){scroll-padding-top:calc(var(--head-total) + 62px)}
@media (max-width:759px){
  html:has(.gy-subnav){scroll-padding-top:calc(var(--head-total) + 50px)}
  .ln > span{transition-duration:.55s,.35s;transition-delay:calc(var(--i,0) * 50ms)}
  .lw .ln > span{transform:translateY(70%)}
  .cw img{clip-path:inset(8% 0 0 0);scale:1.05}
  .cw img,.cin img{transition:clip-path .65s var(--e-expo),scale .8s var(--e-expo)}
  .gy-rv-s > *{transition-duration:.35s}
  .gy-rv-s.in > *:nth-child(2){transition-delay:40ms}
  .gy-rv-s.in > *:nth-child(3){transition-delay:80ms}
  .gy-rv-s.in > *:nth-child(4){transition-delay:120ms}
}

/* 모바일·태블릿 헤더의 「지금 구역」 — 누르면 구역 목록 */
.gh-sec,.gh-secs{display:none}
@media (max-width:1079px){
  .gh{position:sticky}
  .gh-sec{display:inline-flex;align-items:center;gap:7px;margin-left:auto;min-height:44px;max-width:46vw;padding:0 4px 0 10px;
    background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;font-size:14px;font-weight:600;letter-spacing:-.025em;
    opacity:0;visibility:hidden;translate:0 4px;transition:opacity .25s var(--e-out),translate .35s var(--e-expo),visibility 0s .25s}
  .gh-sec.show{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
  .gh-sec .no{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;line-height:1;color:var(--accent)}
  .gh-sec .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gh-sec svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:rotate .3s var(--e-expo)}
  .gh-sec.swap .no,.gh-sec.swap .t{animation:gySecIn .45s var(--e-expo)}
  @keyframes gySecIn{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
  .gh-sec ~ .gh-burger{margin-left:2px}
  .gh.is-secs .gh-sec svg{rotate:180deg}
  .gh-sec:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .gh-secs{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -24px rgba(14,33,53,.5);clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .4s var(--e-expo),visibility 0s .4s}
  .gh.is-secs .gh-secs{clip-path:inset(0 0 -40px 0);visibility:visible;transition-delay:0s}
  .gh-secs ol{list-style:none;margin:0 auto;padding:6px var(--pad) 12px;max-width:var(--max)}
  .gh-secs a{display:flex;align-items:center;gap:14px;min-height:50px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;letter-spacing:-.025em;color:var(--copy)}
  .gh-secs li:last-child a{border-bottom:0}
  .gh-secs .no{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;color:var(--mute);width:26px}
  .gh-secs a[aria-current]{color:var(--ink)}
  .gh-secs a[aria-current] .no{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){ .gh-sec.swap .no,.gh-sec.swap .t{animation:none} }
/* ③ 세리프 워터마크는 글꼴이 늦게 바뀌어 끼워지면(swap) 줄 높이가 달라져, 그 아래 저널·예약이
      ~20px 밀렸다(부드러운 스크롤 착지 어긋남 + 화면 덜컹). 높이를 고정해 글꼴과 무관하게 만든다. */
.gy-wm{--wm:clamp(68px,11vw,168px);height:calc(var(--wm) * .86);line-height:1}
.gy-wm span{font-size:var(--wm);line-height:1;height:var(--wm)}
/* 안 이동 뒤 구역으로 옮긴 포커스(스크린리더용)는 테두리를 그리지 않는다 */
section[tabindex="-1"]:focus,[id][tabindex="-1"]:focus{outline:none}
/* ④ 실측: 390 폭에서 「지금 구역」 라벨이 햄버거를 화면 밖(407px)으로 밀었다.
      로고·햄버거는 줄지 않고, 라벨만 줄어들며 말줄임 한다. */
@media (max-width:1079px){
  .gh-logo,.gh-burger{flex:0 0 auto}
  .gh-sec{flex:0 1 auto;min-width:0;max-width:none}
}
@media (max-width:759px){
  .gh-in{gap:10px}
  .gh-sec{gap:6px;padding:0 2px 0 6px;font-size:13.5px}
  .gh-sec .no{font-size:17px}
}
@media (max-width:419px){ .gh-sec svg{display:none} }
/* ⑤ 실측: 사진 대기 상태의 확대(scale)가 넘침을 자르지 않는 틀(원장 사진 — 원형 문구가 밖으로
      나가야 해서 overflow 를 열어 둔다)에서 화면 밖으로 10px 삐져나가 768 폭 가로 스크롤을 만들었다.
      확대는 넘침을 자르는 틀(증상·저널 사진)에서만 쓰고, 나머지는 위쪽 덮개만 연다. */
.cw img{scale:1}
.gy-rt-fig.cw img,.gy-jl-fig.cw img{scale:1.08}
/* ⑥ 실측: 모바일 원장 구역에서 문서 폭 391px — 회전하는 원형 문구의 상자 대각선(+19px)이
      화면 끝을 1px 넘었다. 안쪽으로 들이고, 본문에 가로 넘침 방지막을 둔다
      (clip 은 스크롤 상자를 만들지 않아 sticky 를 깨지 않는다). */
@media (max-width:899px){ .gy-ring{right:6px} }
main{overflow-x:clip}

/* ── v42.6 — 모바일 체감 속도 (2026-10-06) ──
   실측: 휴대폰에서 「느리고 스크롤이 끊긴다」. 손대는 곳은 그리는 비용뿐이다(모양은 그대로).
   ① 붙어 다니는 서브내비의 배경 흐림(backdrop-filter)은 iOS 에서 스크롤 프레임마다 아래를 다시 흐린다
      → 터치 기기에서는 끄고 거의 불투명한 흰색으로. 눈으로 보이는 차이는 없다.
   ② 히어로 버튼의 흐림도 같은 이유로 끈다.
   ③ 인용문이 읽는 만큼 짙어지는 효과는 background-position 을 스크롤마다 다시 그린다(합성 불가)
      → 터치 기기에서는 처음부터 짙은 글자로 둔다. */
@media (pointer:coarse), (max-width:1079px){
  .gy-subnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.985)}
  .gy-hero .gy-btn{backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-fill]{animation:none !important;color:inherit !important;-webkit-background-clip:border-box;background-clip:border-box;background:none}
}

/* ── v43.1 — 온라인 예약 폼을 없애고 네이버 예약으로 (2026-10-23 사용자 결정) ── */
.gy-book-acts{display:grid;gap:10px}
.gy-book .gy-rez-alt{text-align:left;margin-top:18px}

/* ══════ v44 — 간편 페이지 (2026-10-23) ══════
   원장님 방향: 「한눈에 보이는 간단한 병원 소개」. 메뉴는 진료 분야·원장 소개·진료 시간·오시는 길 넷.
   홈은 처음 → 진료 분야 → 진료 원칙 → 원장 → 진료 안내(시간·예약·오시는 길).
   줄 배열: 제목은 줄 길이를 맞추고(balance), 문단은 마지막 줄에 한 단어만 남지 않게(pretty).
   모바일에서 문단 <br> 은 풀린다(v41 R4). 짧은 두 문장은 <br class="k"> 로 모바일에서도 지킨다. */
h1,h2,h3,.gy-h2,.gy-quote{text-wrap:balance}
p,li,dd,.gy-spec-row .v,.gy-map-tbl .v,.gy-care .b span{text-wrap:pretty}
@media (max-width:759px){
  :is(.gy-lead,.gy-body,.gy-hero p,.gy-trust-t,.gy-warn,.gy-note,.gy-spec-row .v,.gy-rez-box .sub) br.k{display:inline}
}

/* 진료 분야 — 카드 없이 사진·이름·한 줄. PC 4열, 모바일은 목록 줄 */
.gy-care-head{max-width:640px;margin-bottom:56px}
.gy-care-head .gy-lead{margin-top:18px}
.gy-care{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.gy-care a{display:grid;gap:18px;color:inherit;text-decoration:none;position:relative}
.gy-care .f{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
.gy-care .f img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.gy-care a:hover .f img{transform:scale(1.04)}
.gy-care .b{display:grid;gap:8px;padding-right:28px}
.gy-care .b b{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.gy-care .b span{font-size:15px;line-height:1.7;color:var(--copy)}
.gy-care .ar{position:absolute;right:0;bottom:6px;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5;transition:translate .3s}
.gy-care a:hover .ar{translate:4px 0}
.gy-care a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
@media (max-width:999px){ .gy-care{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px} }
@media (max-width:599px){
  .gy-care-head{margin-bottom:28px}
  .gy-care{grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink)}
  .gy-care li{border-bottom:1px solid var(--line)}
  .gy-care a{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:16px;padding:16px 0}
  .gy-care .f{aspect-ratio:1}
  .gy-care .b{gap:4px;padding-right:30px}
  .gy-care .b b{font-size:18px}
  .gy-care .b span{font-size:14.5px;line-height:1.6}
  .gy-care .ar{bottom:auto;top:50%;translate:0 -50%;width:18px;height:18px}
  .gy-care a:hover .ar{translate:3px -50%}
}

/* 진료 안내 — 왼쪽 시간표 + 예약, 오른쪽 지도 */
.gy-visit-l{display:grid;gap:44px;align-content:start}
.gy-hours h3{font-size:21px;letter-spacing:-.035em;margin-bottom:16px}
.gy-hours-t{margin:0;border-top:1px solid var(--ink)}
.gy-hours-t > div{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.gy-hours-t dt{font-size:15px;color:var(--copy)}
.gy-hours-t dd{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.gy-hours-t dd small{font-size:13.5px;font-weight:400;color:var(--mute);margin-left:6px}
.gy-hours-t .off dd{color:var(--mute);font-weight:600}
@media (max-width:599px){ .gy-hours-t > div{grid-template-columns:112px 1fr} .gy-hours-t dd small{display:block;margin:2px 0 0} }

/* 신뢰 숫자 — 모바일에서 2+1 로 떨어지던 것을 3칸으로 */
@media (max-width:599px){
  .gy-trust-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .gy-trust-n div{min-width:0;padding-top:12px}
  .gy-trust-n .n{font-size:27px}
  .gy-trust-n .l{font-size:12.5px;line-height:1.5}
}

/* 항목 나열: 「·」 가 줄 끝에 홀로 남지 않게 항목 단위로 묶는다 */
.gy-dots i{font-style:normal;white-space:nowrap}
.gy-dots i:not(:last-child)::after{content:"·";margin-left:.45em;color:var(--deco)}
@media (max-width:759px){ .gy-dots{display:flex;flex-wrap:wrap;gap:0 16px} .gy-dots i::after{content:none!important} }
/* 신뢰 숫자 — PC 에서도 2+1 로 떨어지지 않게 3칸 */
.gy-trust-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.gy-trust-n div{min-width:0}
@media (max-width:599px){ .gy-trust-n{gap:14px} }
/* 오시는 길 표 — 모바일에서 이름과 내용 사이가 멀었다 */
@media (max-width:559px){ .gy-map-tbl{gap:0} .gy-map-tbl > span.k{padding-top:16px} .gy-map-tbl > span.v{padding:4px 0 14px;border-bottom:1px solid var(--line)} }
/* 사진 설명은 짧다 — 줄 길이를 맞춰 마지막 줄에 몇 글자만 남지 않게 */
figcaption,.figcap,.gy-cred-cap{text-wrap:balance}

/* ══════ v45 — 탭 · 사진/글 높이 맞춤 (2026-10-23) ══════
   원장 구역: 오른쪽 글이 사진보다 훨씬 길어 두 단의 위아래가 어긋났다.
   → 「진료 철학 / 주요 이력」 탭으로 나눈다. 두 패널을 같은 칸에 겹쳐 두어 탭을 바꿔도 높이가 흔들리지 않는다.
   → PC 에서는 사진을 오른쪽 글 높이에 맞춰 늘린다(얼굴 기준 object-position). */
.gy-tabs{margin-top:32px}
.gy-tablist{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:28px}
.gy-tablist [role=tab]{appearance:none;background:none;border:0;margin:0;padding:0 0 14px;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--mute);cursor:pointer;position:relative;transition:color .2s}
.gy-tablist [role=tab]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-expo,ease)}
.gy-tablist [role=tab][aria-selected=true]{color:var(--ink)}
.gy-tablist [role=tab][aria-selected=true]::after{transform:none}
.gy-tablist [role=tab]:hover{color:var(--ink)}
.gy-tablist [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.gy-tabpanels{display:grid}
.gy-tabpanel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.gy-tabpanel.is-on{opacity:1;visibility:visible;transition:opacity .35s}
.gy-tabpanel .gy-quote{margin-bottom:22px}
.gy-tabpanel .gy-spec{border-top:0}
.gy-tabpanel .gy-spec-row:first-child{padding-top:4px}
.gy-tabs + .gy-btn{margin-top:36px}
@media (min-width:900px){
  .gy-cred{align-items:stretch}
  .gy-cred-fig{display:flex;flex-direction:column;height:100%}
  .gy-cred-fig img{flex:1 1 0;min-height:420px;height:auto;object-fit:cover;object-position:50% 22%}
}
@media (prefers-reduced-motion:reduce){ .gy-tabpanel,.gy-tablist [role=tab]::after{transition:none} }
@media (max-width:899px){
  .gy-tabpanel{grid-area:auto}
  .gy-tabpanel:not(.is-on){display:none}
  .gy-cred-cap{display:none}   /* 바로 아래 「송원경 대표원장」 라벨과 겹친다 */
}


/* v46.1 — 진료 분야: 매거진 목차처럼. 카드 없이 헤어라인·세리프 번호·엇갈린 높이 */
.gy-care-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:end;gap:24px 64px;max-width:none;margin-bottom:72px}
.gy-care-head .gy-lead{margin:0;padding-bottom:6px}
.gy-care{gap:40px}
.gy-care a{gap:0}
.gy-care .f{aspect-ratio:4/5}
.gy-care .f img{filter:saturate(.9)}
.gy-care .b{position:relative;gap:10px;padding:20px 32px 0 0;margin-top:22px;border-top:1px solid var(--line)}
.gy-care .b::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.gy-care a:hover .b::before,.gy-care a:focus-visible .b::before{transform:scaleX(1)}
.gy-care .n{position:absolute;right:0;top:16px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1;color:var(--mute);letter-spacing:.02em}
.gy-care .b b{font-size:22px;font-weight:700;letter-spacing:-.04em}
.gy-care .b span{font-size:15.5px;line-height:1.75}
.gy-care .ar{bottom:4px}
.gy-care a:active .f img{transform:scale(1.02);transition-duration:.16s}
@media (min-width:1000px){
  .gy-care li:nth-child(even){margin-top:72px}
}
@media (max-width:999px){
  .gy-care-head{grid-template-columns:1fr;margin-bottom:48px}
}
@media (max-width:759px){
  .gy-care-head{margin-bottom:28px;gap:14px}
  .gy-care{gap:0}
  .gy-care a{gap:16px}
  .gy-care .b{margin:0;padding:0 30px 0 0;border:0;gap:4px}
  .gy-care .b::before,.gy-care .n{display:none}
  .gy-care .b b{font-size:18px}
  .gy-care .b span{font-size:14.5px;line-height:1.6}
  .gy-care .ar{bottom:auto}
}
@media (prefers-reduced-motion:reduce){ .gy-care .b::before{transition:none} }

.nw{white-space:nowrap}


/* v46.3 — 모바일 손맛·속도 (2026-10-23 「카카오 인앱에서 스크롤이 뻑뻑하고 원하는 대로 안 움직인다」)
   ① 히어로 높이가 dvh 였다 → 카카오·사파리 아래 도구막대가 스크롤 중 숨었다 나타날 때마다 히어로 높이가 바뀌어
      그 아래 페이지 전체가 들썩였다(손가락과 다르게 움직이는 느낌). 변하지 않는 svh 로 고정한다.
   ② 터치 기기에서는 스크롤에 묶인 히어로 패럴랙스·글자 흐려짐, 끝없이 도는 원형 문구·워터마크를 끈다(스크롤 중 합성 부담).
   ③ 등장 효과는 짧고 가볍게(제목 줄 .95s → .5s, 이동 거리 절반). */
.gy-hero-in{min-height:min(72svh,600px)}
@media (min-width:760px){ .gy-hero-in{min-height:min(80svh,720px)} }
@media (max-width:599px){ .gy-hero-in{min-height:min(66svh,540px)} }
@media (pointer:coarse), (max-width:1079px){
  .gy-hero-bg img,.gy-hero-in{animation:none !important;translate:none;opacity:1}
  .gy-ring,.gy-wm-track{animation:none !important}
  .gy-rv{transition-duration:.35s}
  .gy-rv.rv-wait:not(:has(img)){transform:translateY(8px)}
  .gy-rv-s > *{transition-duration:.3s}
  .gy-rv-s.rv-wait > *:not(img):not(:has(img)){transform:translateY(8px)}
  .gy-rv-s.in > *:nth-child(n){transition-delay:0ms}
  .ln > span{transition-duration:.5s,.3s;transition-delay:calc(var(--i,0) * 50ms)}
}

/* 협력병원 — 모바일에서 가로 2×2, 「협력병원」은 한 번만 */
.gy-trust-four{display:none}
@media (max-width:959px){
  .gy-trust-alt{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0}
  .gy-trust-alt em{grid-column:1/-1;font-style:normal;font-size:13px;font-weight:600;color:var(--mute);letter-spacing:-.01em;padding:14px 0 4px}
  .gy-trust-alt span{font-size:15.5px;padding:10px 0;border-top:1px solid var(--line)}
  .gy-trust-alt span:nth-of-type(odd){padding-right:12px}
  .gy-trust-alt span:nth-of-type(even){padding-left:16px;border-left:1px solid var(--line)}
  .gy-trust-alt{margin-bottom:22px;border-bottom:1px solid var(--line)}
  .gy-trust-names{display:none}
  .gy-trust-four{display:inline}
}

/* 푸터 — 모바일에서 세로 나열을 줄이고 묶는다 */
@media (max-width:759px){
  .gf-top{padding:48px var(--pad) 36px;gap:30px}
  .gf-top > div:first-child{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}
  .gf-top > div:first-child .gf-brand{margin:0}
  .gf-top > div:first-child .gf-desc{grid-column:1/-1;grid-row:2;margin:18px 0 0;font-size:14.5px;line-height:1.8}
  .gf-top > div:first-child .gy-btn{grid-column:2;grid-row:1}
  .gf-lb{margin-bottom:10px;font-size:13px}
  .gf-menu{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
  .gf-menu a{min-height:40px;font-size:14.5px}
  .gf-tel{font-size:26px;margin-bottom:10px}
  .gf-addr{font-size:14.5px;line-height:1.75;margin-bottom:16px}
  .gf-hours{gap:6px;font-size:13.5px;line-height:1.55}
  .gf-bot-in{padding:20px var(--pad) 28px;gap:10px}
  .gf-legal{font-size:12px;line-height:1.75}
}

/* v46.5 — 모바일 손맛 2 (2026-10-31 「스크롤이 툭툭 끊긴다, 가볍고 손으로 잘 제어돼야 한다」)
   ① 자석 스냅을 껐다(v41.js 16번). 손을 뗀 뒤 페이지가 스스로 움직이지 않는다.
   ② 사진 등장(위를 덮었다 열고 살짝 줄어드는 효과)은 clip-path 를 스크롤 중에 다시 그린다 → 터치 기기에서는 처음부터 제자리.
   ③ 손가락으로 누르는 곳은 44px 이상(모양은 그대로, 누르는 범위만 넓힌다). */
@media (pointer:coarse), (max-width:1079px){
  .cw img{clip-path:none;scale:1;transition:none}
  .gy-tl{padding-top:12px;margin-top:-12px}
  .gj-tabs-in button{min-height:44px}
  .crumb a{padding:14px 0}
}

/* v46.6 — 모바일에서 읽기·누르기 (2026-10-31, 주 고객은 고령층)
   ① 12~12.5px 로 남아 있던 설명 글자를 13.5px 로(로고 영문·체크 아이콘 같은 장식은 그대로).
   ② 폭이 좁은 링크(서브내비 「소개」 25px, 경로 「홈」 11px)는 좌우로 누르는 범위만 넓힌다(보이는 간격은 그대로). */
@media (max-width:759px){
  .gy-trust-n .l{font-size:13.5px}
  .gy-jt .m,.gy-vs-a .k{font-size:13.5px}
  .gf-legal{font-size:13px}
  .gf-cr{font-size:12.5px}
  .gy-dock a{font-size:12.5px}
}
@media (pointer:coarse), (max-width:1079px){
  .gy-subnav .ls a{padding-inline:10px;margin-inline:-10px;border-bottom:0}
  .gy-subnav .ls a.on{background:linear-gradient(var(--accent),var(--accent)) no-repeat 50% 100% / calc(100% - 20px) 1.5px}
  .crumb a{padding:14px 8px;margin:0 -8px}
}