/* 페이지랩 소개 탭 — 인수인계 시안(2026-09-18) CSS 를 .pl-intro 로 스코프한 것. 규격은 SPEC.md 참고, 값은 요청 없이 바꾸지 않는다. */
/* ==================================================================
     페이지랩 소개 [국·영문 한 페이지] — 원래 시안(63132fbb) 디자인 그대로 + 헤더 KR/EN 전환
       모든 글은 <span class="ko">…</span><span class="en">…</span> 로 같은 자리에 함께 있고
       html[lang] 값에 따라 한쪽만 보인다(새로고침 없음). 영문 조정은 맨 아래 ':root[lang="en"]' 블록.
       확인 필요(공식 영문 표기, 점선 밑줄): 전정환 원장 · 페이지성형외과 · 더라인성형외과 · 차메디텍
     pagelab.co.kr 기존 컴포넌트만으로 구성
       · 좌측 34 : 우측 66 (사이 --gutter 80)  → 메인 페이지 magazine-layout
       · 16px/600 인덱스, 비활성 #ccc          → 메인 페이지 menu-item
       · 2열 카드 그리드 gap 20px, 이미지 4:5   → 메인·프로그램 카드
       · 라벨 + 본문 + 1px 구분선 목록          → Directions 섹션 info-block
       · 화살표 더보기 링크                     → 메인 program-more-btn
     글자 크기는 4단계만 사용 (:root 의 --fs-* 참고)
       타이틀      30 / 700 / 1.3   (모바일 24)
       중간타이틀  16 / 600 / 1.55  (모바일 16)
       본문        15 / 400 / 1.68  (모바일 14)   라벨·캡션도 본문 크기, 색·이탤릭으로만 구분
       위첨자 숫자 12 / 400
     영문 서체는 사이트 공통 --font-en (Inter). 회색 영문 라벨은 사이트 서브캡션(italic 14) — 2026-09-22
     ================================================================== */
  :root{
    --ground:#ffffff;
    --ink:#1d1d1d;
    --body:#333333;
    --muted:#999999;
    --faint:#cccccc;
    --line:#d3d3d3;
    --rule:#e5e5e5;
    --rule-soft:#ededed;   /* 연혁 행 구분선 — --rule 보다 한 단계 연함 */
    --ph:#f5f5f5;
    --black:#000000;       /* 더보기 밑줄 hover · 모바일 햄버거 — 실제 사이트와 동일 */
    --kr:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
    --en:var(--font-en);   /* 사이트 전체 영문 서체 = common.css --font-en (2026-09-22 Inter) */
    /* 연혁 숫자 전용 — Helvetica Neue 의 얇은 웨이트를 쓰되,
       그 서체가 없는 환경(Windows 등)에서는 Arial 에 얇은 웨이트가 없어
       굵게 나오므로 Inter 200/300 을 폴백으로 둔다 */
    --num:var(--font-en);  /* 연혁 큰 숫자: Inter 200/300 (공통 head 에서 로드) */

    /* ── 글자 크기는 이 4단계만 쓴다 ──────────────────────────
       타이틀      --fs-title  30 (모바일 24)  좌측 헤드카피 · 챕터 제목
       중간타이틀  --fs-sub    16 (모바일 16)  목차 · 원칙 문장 · 챕터 소제목 · 연혁 소제목
       본문        --fs-body   15 (모바일 14)  본문 · 라벨(SINCE, Milestones) · 연혁 설명 · 캡션 · 더보기
       위첨자 숫자 --fs-sup    12 (모바일 12)  목차/챕터 번호 · 이미지 자리 안내
       예외: 사이트 공통 헤더(메뉴 14 · 상담신청 12 — 실제 사이트와 동일해야 함),
             연혁의 큰 연도 숫자(130 / 모바일 72 — 글자가 아니라 그래픽 요소) */
    --fs-title:30px;
    --fs-sub:16px;
    --fs-body:15px;
    --fs-sup:12px;
    /* 회색 영문 라벨(SINCE 줄 · Milestones · 사진 캡션) — 사이트 공통 서브캡션과 같은 모양
       (둘러보기 탭 .space-caption/.floor-label, 의료진 .medical-team-sub): Inter italic 14 / 모바일 12 / #999
       2026-09-22 사용자 "About 페이지 폰트 정리" 요청으로 시안의 15 정체 → 사이트 규칙으로 통일 */
    --fs-cap:14px;
    /* 연혁 설명 줄('더라인성형외과 안면성형센터장으로 약 10년' 등) — 본문보다 한 단계 작게 14 / 모바일 13
       (2026-09-22 사용자 "연혁 안 폰트 조금 줄이자", 원래 본문 15 / 모바일 14) */
    --fs-note:14px;
  }

  
  html{scroll-behavior:smooth}
  .pl-intro{color:var(--body);font-family:var(--kr);font-size:var(--fs-body);line-height:1.68;-webkit-font-smoothing:antialiased;}
  
  

  /* ===== 사이트 헤더 — pagelab.co.kr 실측 재현 ===== */
  
  
  
  
  
  
  /* 언어 전환 — 상담신청 왼쪽에 조용히. 현재 언어만 진하게(ink), 다른 쪽은 목차 비선택색(faint) */
  
  
  
  
  
  
  
  /* 헤더 아래 흰 띠 — 오른쪽 본문이 메뉴바 밑선(69px)이 아니라
     왼쪽 타이틀 '유행보다' 의 글자 윗선에서 가려지도록 흰 판을 늘린다.
     --cut 은 JS 가 타이틀 글자 윗선을 실측해 넣는다(기본값은 추정치).
     왼쪽 열은 69~타이틀 사이가 원래 비어 있어 가려지는 것이 없다. */
  :root{--cut:235px;--cut-box:226px;   /* 기본값 = 헤더 86 기준 추정치(JS 가 실측으로 덮음). JS 가 숫자로 읽으므로 calc 대신 숫자 */
    --cut-lift:20px;   /* 컷 선을 타이틀 윗선보다 이만큼 위로 — 딱 붙으면 답답해서 숨 쉴 여유 */
  }
  

  /* ===== 매거진 레이아웃 (메인 페이지와 동일 비율) ===== */
  /* 왼쪽 묶음 : 오른쪽 묶음 = 34 : 66 은 그대로, 두 묶음 사이(--gutter)만 따로 둔다.
     예전엔 왼쪽 34% 안의 오른쪽 여백 40px 이 곧 사이였다 → 사이만 40 → 80 으로 넓힘.
     (보이는 간격: 타이틀 글자 끝 → 오른쪽 글 시작 134.6 → 187.4) */
  :root{--gutter:80px}
  .pl-intro .layout{
    max-width:1444px;margin:0 auto;padding:0 72px 200px;
    display:flex;align-items:flex-start;column-gap:var(--gutter);
  }
  .pl-intro .index{
    width:calc((100% - var(--gutter)) * .34);flex:0 0 calc((100% - var(--gutter)) * .34);
    /* top 은 이 열이 처음 놓이는 자리(헤더 바로 아래 69px)와 같아야 한다.
       이보다 크면 페이지 로드 시 그만큼 아래로 밀려 우측과 상단이 어긋난다. */
    position:sticky;top:calc(var(--pl-header-h) + var(--pl-tabbar));   /* 헤더 + 탭 바 */
    padding:68px 0 0 0;   /* 탭 바 아래 68 에 타이틀 (2026-09-23 사용자 요청, 원래 140) */
  }
  .pl-intro .content{width:calc((100% - var(--gutter)) * .66);flex:0 0 calc((100% - var(--gutter)) * .66);min-width:0;padding-top:68px}   /* 좌측과 같은 68 */

  /* ----- 좌측 인덱스 ----- */
  .pl-intro .index h1{
    font-size:var(--fs-title);font-weight:700;line-height:1.3;color:var(--ink);
    /* 우측 본문 첫 줄과 글자 윗선(한글 윗선)을 맞춤.
       Pretendard 실측(베이스라인 기준) — 보정 없을 때 타이틀이 0.75px 아래 */
    margin:-0.75px 0 18px;word-break:keep-all;
  }
  .pl-intro .index ol{list-style:none;margin:0;padding:0}
  .pl-intro .index li{margin:0 0 12px}
  .pl-intro .index a{
    display:inline-block;
    font-size:var(--fs-sub);font-weight:600;line-height:1.55;
    color:var(--ink);text-decoration:none;transition:color .2s;
  }
  /* 인덱스 번호 — 메뉴 글자 앞 작은 위첨자.
     vertical-align 4.1px = 16px 메뉴의 한글 윗선(12.67px) − 12px 숫자의 윗선(8.57px) */
  .pl-intro .index a .no{
    font-family:var(--en);font-size:var(--fs-sup);font-weight:400;letter-spacing:normal;
    color:var(--muted);margin-right:8px;
    vertical-align:4.1px;font-variant-numeric:tabular-nums;
  }
  .pl-intro .index a:hover{color:var(--faint)}
  .pl-intro .index ol:has(a.active) a:not(.active){color:var(--faint)}
  .pl-intro .index ol:has(a.active) a:not(.active) .no{color:var(--faint)}
  .pl-intro .index a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  /* 우측 'Milestones' 라벨(.section-label)·사진 캡션과 똑같이 — 사이트 서브캡션(Inter italic 14 / 400 / #999). */
  .pl-intro .index .since{
    display:block;margin:0 0 48px;
    font-family:var(--en);font-style:italic;font-size:var(--fs-cap);font-weight:400;line-height:1.5;color:var(--muted);
    letter-spacing:normal;
  }

  /* ----- 우측 본문 ----- */
  .pl-intro .lede{padding-bottom:120px}
  .pl-intro .lede--mo{display:none}   /* 모바일용 복제 문단(pages.py 가 생성) — PC 에서는 숨김 */
  .pl-intro .lede p{margin:0 0 10px;word-break:keep-all}
  .pl-intro .lede .principle{
    margin:32px 0 0;padding-top:32px;border-top:1px solid var(--ink);
    font-size:var(--fs-sub);font-weight:600;line-height:1.55;color:var(--ink);word-break:keep-all;
  }

  /* 연혁 — Directions 섹션의 정보 목록과 같은 구조 */
  /* 연혁 마지막 이미지(2016) 아랫변 → 챕터 01 제목 사이의 '실제로 보이는' 간격.
     고정 영역이 가장 큰 행(2015, 3:4)에 맞춰 잡혀 있어 2016 아래에 빈 공간이 남는데,
     그 빈 공간은 JS 가 .ms-stage 의 음수 margin-bottom 으로 걷어낸다.
     그래서 이 값이 곧 화면에서 보이는 간격이 된다. (처음 266 → 133 → 160 → 200) */
  .pl-intro .history{padding-bottom:200px}
  .pl-intro .section-label{
    font-family:var(--en);font-style:italic;font-size:var(--fs-cap);font-weight:400;line-height:1.5;
    color:var(--muted);display:block;margin:0 0 28px;
  }
  /* 연혁 — 화면을 붙잡아 두는 무대.
       고정: Milestones 라벨 + '20'  /  움직임: 연도 행들만 위로
       z-order 가 핵심 — 행(1) < '20'(2) < 라벨 띠(3)
       그래서 '05' 는 '20' **뒤를** 지나 위로 올라가다가
       Milestones 라벨 띠(흰 배경) 뒤로 들어가며 사라진다. */
  .pl-intro .ms-stage{
    position:relative;
    /* --ms-fixtop / --ms-start 는 고정 영역(.ms-head) 높이를 재서 JS가 넣는다 */
    --ms-fixtop:120px;
    --ms-start:300px;
    --ms-headpad:26px;   /* 고정 영역 아래 여백 = 사라지는 경계 */
    --ms-gap:127px;      /* '20' 과 '05' 의 세로 간격(줄상자 윗선 기준). 눈에 보이는 숫자 사이 여백 = 연혁 구분선 위아래 여백과 같은 30
                            (숫자 잉크 높이 97 + 30). 100 → 140 → 127 (2026-09-22 사용자 "아래 보더 간격처럼 맞추자") */
    --ms-headgap:9px;    /* Milestones 라벨과 '20' 사이 간격 — 보이는 간격 약 50px */
    --ms-indent:132px;   /* '20' 폭 = 연도 열 들여쓰기. JS가 실측해 넣는다 */
    --ms-inktop:8px;     /* 연도 줄상자 윗선 → 숫자 글자 윗선까지. JS가 실측해 넣는다 */
  }
  /* top 값을 이 블록이 처음 놓이는 자리(헤더 69px + .content 상단 여백 140px)와
     똑같이 두면, 페이지를 열자마자 붙어 있고 단 1px 도 움직이지 않는다. */
  .pl-intro .ms-pin{
    position:sticky;top:calc(var(--pl-header-h) + 68px + var(--pl-tabbar));   /* 헤더 + 탭 바 + .content 위 여백 68 */
    height:calc(100vh - var(--pl-header-h) - 68px - var(--pl-tabbar));
    overflow:hidden;
  }
  /* 고정 영역 — 오프닝 문단 + Milestones 라벨. 연도가 이 뒤로 사라진다 */
  .pl-intro .ms-head{
    position:absolute;left:0;right:0;top:0;z-index:3;
    background:var(--ground);
    padding-bottom:var(--ms-headpad);
  }
  /* 원칙 문장 ↔ Milestones : 보이는 간격(글자 밑선→윗선) 100px.
     글자 위아래 여백이 더해지므로 margin 은 그만큼 뺀 값 — 라벨 서체(Inter italic 14 / 1.5) 기준 브라우저 실측(2026-09-22).
     (라벨은 아래 '20' 쪽에 더 가깝게 붙어 연혁의 제목으로 읽히도록 위는 넓게, 아래는 좁게) */
  .pl-intro .ms-head .lede{padding-bottom:0;margin-bottom:89.04px}   /* 실측: 보이는 간격 98.08 → 100 */
  .pl-intro .ms-head .section-label{margin:0}
  /* 고정된 '20' — 행보다 위, 라벨 띠보다 아래.
     흰 판을 깔아 두면 올라오는 회색 구분선이 숫자를 뚫고 지나가지 않고
     '20' 뒤로 들어갔다 나온다. 위아래 10px 은 선이 갑자기 끊기지 않도록 준 여유.
     (padding 으로 판을 키우고 같은 크기의 음수 margin 으로 글자 위치는 그대로) */
  .pl-intro .ms-fix{
    position:absolute;left:0;top:var(--ms-fixtop);z-index:2;
    background:var(--ground);
    padding:10px 0;margin-top:-10px;
  }
  /* 움직이는 연도 행들 — '20' 뒤를 지나간다 */
  .pl-intro .ms-track{
    position:absolute;left:0;right:0;top:0;z-index:1;
    padding-top:var(--ms-start);
    will-change:transform;
  }
  .pl-intro .ms-fix, .pl-intro .ms-yy{
    font-family:var(--num);
    font-size:130px;font-weight:400;line-height:.82;
    letter-spacing:-.03em;color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .pl-intro .ms-row{
    /* 폭 배분 — 숫자 : 텍스트 : 이미지 */
    display:grid;grid-template-columns:max-content minmax(0,180px) minmax(0,1fr);
    column-gap:20px;align-items:start;
    /* 구분선 기준 위아래 여백을 눈으로 똑같이(30px) 맞춘다.
       아래쪽: 연도 글자·이미지가 상자 위에서 --ms-inktop 만큼 내려와 시작하므로
       그만큼 padding-top 에서 빼야 실제로 보이는 여백이 30px 이 된다.
       위쪽: 앞 행의 이미지 아랫변이 곧 상자 아랫변이라 padding-bottom 이 그대로 30px. */
    padding:calc(30px - var(--ms-inktop)) 0 30px;
    border-top:1px solid var(--rule-soft);
    /* 구분선을 '20' 아래까지 왼쪽으로 늘린다.
       .ms-track 이 '20' 폭만큼 padding-left 를 갖고 있어 그대로 두면
       선이 '20' 오른쪽에서 시작한다. 같은 크기만큼 왼쪽으로 빼고(margin)
       다시 안쪽으로 밀어(padding) 넣으면 내용 위치는 그대로이고 선만 길어진다.
       (내용 상자 폭이 변하지 않으므로 이미지 크기도 그대로) */
    margin-left:calc(-1 * var(--ms-indent));
    padding-left:var(--ms-indent);
  }
  .pl-intro .ms-row:first-child{border-top:0;padding-top:0}
  /* 연도가 위로 올라갔으므로, 소제목 묶음은 연도 줄상자 높이만큼의 칸을 잡고
     그 안에서 아래로 붙인다 → 연도 밑선과의 관계가 예전 그대로 유지된다. */
  .pl-intro .ms-tx{
    min-height:calc(130px * .82);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:16px;
  }
  /* 이미지 — 윗변을 연도 숫자의 글자 윗선에 맞춘다.
     line-height 가 .82 라 줄상자가 글자보다 작아서 그냥 align-self:start 로는
     글자보다 8px 쯤 위로 뜬다. 그만큼(--ms-inktop) 내려 준다.
     고정 영역(.ms-pin)이 overflow:hidden 이라 밖으로 내밀면 잘리므로
     예전의 margin-right:-72px(페이지 여백까지 흘리기)은 쓰지 않는다. */
  .pl-intro .ms-media{align-self:start;margin-top:var(--ms-inktop)}
  .pl-intro .ms-media .ph{border:1px solid var(--rule)}
  .pl-intro .ms-media.m-tall .ph{aspect-ratio:3/4}
  .pl-intro .ms-media.m-wide .ph{aspect-ratio:16/10}
  .pl-intro .ms-tx b{
    display:block;font-size:var(--fs-sub);font-weight:600;line-height:1.32;
    color:var(--ink);margin-bottom:6px;word-break:keep-all;
  }
  /* 설명은 두 줄로 떨어지는 경우가 많아 1.35 는 답답하다 */
  /* 설명 줄만(> 직계). 그냥 '.ms-tx span' 이면 국·영문 전환용 span 까지 걸려
     소제목이 회색 15px 로 바뀌고 영문 고유명사가 줄을 따로 차지한다 */
  .pl-intro .ms-tx > span{display:block;font-size:var(--fs-note);line-height:1.5;color:var(--muted);word-break:keep-all}

  /* 챕터 */
  /* 챕터 사이 160 → 200 → 250 — 앞 챕터 사진/본문이 끝나고 다음 제목까지 (연혁 끝 → 챕터 01 은 200 따로) */
  .pl-intro .chapter{padding-bottom:250px;scroll-margin-top:var(--cut-box)}
  .pl-intro .chapter:last-of-type{padding-bottom:0}
  /* 챕터 번호 — 제목 위 한 줄(2026-09-22 사용자 요청: 제목 뒤 위첨자 → 앞 → 위).
     h2 밖(.chapter-side 첫 요소)에 두어 본문 첫 줄↔제목 윗선 정렬(JS, h2 기준)이 그대로 맞는다.
     번호 → 제목 간격 12 = 시술 상세의 태그 → 제목 간격과 동일 */
  .pl-intro .chapter-side .cnum{
    display:block;font-family:var(--en);font-size:var(--fs-sup);font-weight:400;line-height:1;
    color:var(--muted);margin:0 0 12px;font-variant-numeric:tabular-nums;
  }
  /* 챕터 제목 28 / 600 (2026-09-22 사용자 요청, 원래 타이틀 단계 30 / 700). 모바일은 24 / 600 */
  .pl-intro .chapter-title{font-size:28px;font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 18px;word-break:keep-all}
  /* 챕터 소제목 — 14px / 400 / 본문색 #333 (2026-09-22 사용자 확정: 16/600 → 14/500 → 15/500 → 15/400 #333 → 14/400 #333) */
  .pl-intro .chapter-lead{font-size:14px;font-weight:400;line-height:1.55;color:var(--body);margin:0 0 26px;word-break:keep-all}
  /* [제목 + 소제목 | 본문] 두 칸 — 본문 첫 줄이 제목 글자 윗선에서 시작한다.
     칸 경계 = 연혁 소제목 열의 x(--axis, JS 실측 ≈ 294) — 본문이 연혁 글과 같은 세로선에서 시작한다.
     왼쪽 칸 = 축 − 20(칸 사이 20): 제목(국문 한 줄, 영문 2줄) → 18 → 소제목(국문 2줄 <br>, 영문 balance).
     제목(30/1.3)과 본문(15/1.68)의 글자 윗선 차이는 JS 가 재서 본문 쪽만 옮긴다(--body-shift, 음수 가능).
     제목은 움직이지 않으므로 목차 이동 시 제목 윗선 = 좌측 타이틀 선 은 그대로. */
  :root{--axis:294px}
  .pl-intro .chapter-cols{
    display:grid;grid-template-columns:calc(var(--axis) - 20px) minmax(0,1fr);
    column-gap:20px;align-items:start;
  }
  .pl-intro .chapter-side .chapter-lead{margin:0}
  .pl-intro .chapter-body{margin-top:var(--body-shift,0px)}
  .pl-intro .chapter p{margin:0 0 10px;word-break:keep-all}
  .pl-intro .chapter p:last-of-type{margin-bottom:0}

  /* 이미지 — 사이트 카드 그리드와 동일 (2열, gap 20px, 4:5).
     본문 → 사진 여백 56 → 80 (2026-09-22 사용자 요청, 시술 상세의 사진↔글 80 과 동일. 모바일 36 → 48) */
  .pl-intro .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}
  .pl-intro .cards.one{grid-template-columns:1fr}
  .pl-intro .ph.wide{aspect-ratio:5/3}
  .pl-intro .cards figure{margin:0}
  .pl-intro .ph{
    aspect-ratio:4/5;background:var(--ph);border:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;text-align:center;padding:20px;
  }
  /* 실제 사진이 들어간 칸 — 회색 안내 대신 사진이 칸을 꽉 채운다 */
  .pl-intro .ph.is-photo{background:none;padding:0;overflow:hidden}
  .pl-intro .ph.is-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .pl-intro .ph .ratio{font-family:var(--en);font-size:var(--fs-sup);font-weight:600;letter-spacing:.1em;color:var(--muted)}
  .pl-intro .ph .hint{font-size:var(--fs-sup);line-height:1.6;color:var(--muted);word-break:keep-all}
  /* 자동 롤링 사진(챕터 04) — 카드 그리드와 같은 2장 · gap 20 · 4:5.
     한 장씩 옆으로 넘어가고 끝에서 처음으로 이어진다(앞 2장을 뒤에 복제해 끊김 없이).
     마우스를 올리거나 키보드로 들어오면 멈춤 · 화면 밖/탭 숨김 시 멈춤 · 동작 줄이기 설정이면 움직이지 않음 */
  .pl-intro .roll{margin-top:80px;overflow:hidden}
  .pl-intro .roll-track{display:flex;gap:20px;will-change:transform}
  .pl-intro .roll-track.is-moving{transition:transform .6s cubic-bezier(.65,0,.35,1)}   /* 사이트 공통 전환 600 (2026-09-30, 이전 .9s) */
  .pl-intro .roll-item{flex:0 0 calc((100% - 20px) / 2);margin:0}
  /* 사진 캡션 — 다른 회색 영문(SINCE 줄 · Milestones)과 같은 사이트 서브캡션(Inter italic 14 / 400 / #999) */
  .pl-intro .cards figcaption{
    margin-top:14px;font-family:var(--en);font-style:italic;font-size:var(--fs-cap);font-weight:400;line-height:1.5;color:var(--muted);
  }

  /* 더보기 링크 — 사이트 공통 .pl-link(common.css) 그대로: 밑줄 2px #d3d3d3 → 호버 시 검정이 왼쪽에서 채워짐,
     오른쪽 8px PNG 화살표(sub_black_arrow.png, 호버 시 움직이지 않음). 2026-09-22 사용자 "호버 방식 다른 페이지와 동일하게"
     (이전: 시안 전용 SVG ↗ 화살표가 호버 시 2px 이동). 글자만 소개 탭 본문 규격(15 / 500, 국문 서체)으로 보정 */
  .pl-intro .more-link{
    margin-top:36px;
    font-family:var(--kr);font-size:var(--fs-body);font-weight:500;line-height:1.5;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:smooth}
    
  }

  @media (max-width:1200px){
    /* 타이틀 크기는 사이트 규격 유지, 여백만 조절 */
    :root{--gutter:48px}   /* 좁은 화면에서는 사이도 같은 비율로 줄임(예전 24 → 지금 48) */
  }

  @media (max-width:959px){
    :root{--fs-title:24px;--fs-sub:16px;--fs-body:14px;--fs-sup:12px;--fs-cap:12px;--fs-note:13px}
    
    
    
    
    
    
    

    /* 좌측 인덱스 → 상단 가로 스크롤 탭 (사이트 모바일 방식과 동일) */
    .pl-intro .layout{display:block;padding:0 20px 120px}
    .pl-intro .index{width:auto;position:static;padding:0}
    /* 목차 줄은 고정하지 않는다(2026-09-23 사용자 "목차 고정 해제") → 연혁 무대·챕터 기준선에 더할 목차 줄 높이 0.
       현재 챕터 기준선 = 헤더 66 + 탭 바 40 + 16 */
    :root{--pl-mnav:0px;--cut:124px}   /* 헤더 68 + 탭 바 40 + 16 — JS 가 숫자로 읽으므로 calc 대신 숫자(헤더 높이를 바꾸면 같이 바꿀 것) */
    .pl-intro .index h1{margin:64px 0 10px}
    /* 목차 줄 — 고정 없이 흐름대로(2026-09-23), 양쪽 20 밖까지 선을 늘린다 */
    .pl-intro .index nav{position:static;background:var(--ground);margin:0 -20px}
    .pl-intro .index ol{
      display:flex;gap:18px;overflow-x:auto;white-space:nowrap;
      padding:9px 20px;border-bottom:1px solid var(--rule);   /* 위아래 12 → 9 (2026-09-23) */
      scrollbar-width:none;-ms-overflow-style:none;
    }
    .pl-intro .index ol::-webkit-scrollbar{display:none}
    .pl-intro .index li{margin:0;flex-shrink:0}
    .pl-intro .index a{font-size:var(--fs-body);font-weight:400;color:var(--muted)}
    .pl-intro .index a.active{color:var(--ink);font-weight:600}
    .pl-intro .index ol:has(a.active) a:not(.active){color:var(--muted)}
    .pl-intro .index a .no{display:none}
    .pl-intro .index .since{margin:0 0 28px}

    .pl-intro .content{width:auto;padding-top:40px}
    .pl-intro .lede{padding-bottom:80px}
    .pl-intro .lede p br.pl-keep{display:none}   /* PC 전용 줄바꿈('기대할 수 있는 효과와' 뒤, 2026-09-22) — 모바일은 자연 줄바꿈 */
    .pl-intro .history{padding-bottom:100px}
    /* 모바일도 PC 와 같은 고정 연혁(2026-09-23 사용자 요청): '20' 고정, 연도가 그 옆(오른쪽)으로 지나간다.
       화면이 짧으므로 오프닝 문단은 무대 밖 복제본(.lede--mo)으로 스크롤시키고, 무대 머리에는 Milestones 라벨만 둔다.
       구현은 PC(JS transform)와 달리 CSS sticky — 라벨 띠(.ms-head)와 '20'(.ms-fix)만 헤더 + 탭 바 아래에 붙고
       행(.ms-track)은 흐름대로 스크롤(JS 로 밀면 모바일에서 끊겨 보여 2026-09-23 변경, top 값은 about-intro.js 가 실측해 넣음).
       목차 줄은 고정 안 함. 연도 64px, 행 = 연도('20' 바로 옆) → 그 아래 소제목·설명 → 사진 (1열,
       소제목·설명·사진은 연도 왼쪽에서 10 들여쓴다 — 2026-09-23 사용자 확정). */
    .pl-intro .ms-head .lede{display:none}
    .pl-intro .lede--mo{display:block;padding-bottom:48px}
    .pl-intro .ms-stage{--ms-gap:78px;--ms-headpad:16px}   /* 64px 숫자 잉크 약 48 + 보이는 간격 30 */
    .pl-intro .ms-head{padding-top:24px}   /* Milestones 라벨이 목차 줄 선에 붙지 않게 (2026-09-23) */
    /* .ms-pin: display:flow-root 로 자식 margin 이 밖으로 빠지지 않게(트랙의 음수 margin-bottom 이 무대 높이를 줄여야
       마지막 연도가 '20' 옆에 왔을 때 sticky 가 풀린다). top 은 JS 가 읽는 기준값(헤더 + 탭 바) */
    .pl-intro .ms-pin{position:static;display:flow-root;height:auto;overflow:visible;top:calc(var(--pl-header-h) + var(--pl-tabbar) + var(--pl-mnav))}
    .pl-intro .ms-head{position:sticky;top:calc(var(--pl-header-h) + var(--pl-tabbar));left:auto;right:auto}                                  /* top 은 JS 가 다시 넣음 */
    /* '20' 은 sticky(블록)라 폭이 열 전체가 되므로 글자 폭만큼만(width:max-content) — JS 가 이 폭으로 행을 들여쓴다 */
    .pl-intro .ms-fix{position:sticky;top:calc(var(--pl-header-h) + 100px);left:auto;width:max-content;margin-top:calc(var(--ms-headgap) - 10px)}
    .pl-intro .ms-track{position:static;padding-top:0;transform:none;will-change:auto}
    .pl-intro .ms-fix, .pl-intro .ms-yy{font-size:64px}
    /* padding 축약형을 쓰면 PC 규칙의 padding-left(--ms-indent, '20' 폭만큼 들여쓰기)가 지워져 연도가 '20' 아래로 내려간다 → 위아래만 */
    .pl-intro .ms-row{grid-template-columns:1fr;row-gap:12px;padding-top:calc(20px - var(--ms-inktop));padding-bottom:20px}
    .pl-intro .ms-tx{min-height:0;display:block;padding-bottom:0;margin:0 0 0 10px}   /* 연도 아래, 연도보다 10 들여쓰기 */
    .pl-intro .ms-media{grid-column:auto;align-self:start;margin:0 0 0 10px}         /* 글 아래, 같은 들여쓰기 */
    .pl-intro .chapter{padding-bottom:100px;scroll-margin-top:calc(var(--pl-header-h) + var(--pl-tabbar) + var(--pl-mnav) + 16px)}
    .pl-intro .chapter-cols{display:block}
    .pl-intro .chapter .chapter-side .chapter-lead{margin:0 0 26px}   /* .chapter p:last-of-type(여백 0)보다 우선 */
    .pl-intro .chapter-body{margin-top:0}
    .pl-intro .chapter-title{font-size:var(--fs-title)}
    .pl-intro .cards{gap:10px;margin-top:48px}
    .pl-intro .roll{margin-top:48px}
    .pl-intro .roll-track{gap:10px}
    .pl-intro .roll-item{flex-basis:calc((100% - 10px) / 2)}
  }

  /* ═══════════════ 국·영문 전환 ═══════════════
     기본은 국문. html[lang="en"] 일 때만 영문이 보인다(lang 이 비어 있어도 국문). */
  :root:not([lang="en"]) .pl-intro .en, :root:not([lang="en"]) .about-tabs .en{display:none !important}
  :root[lang="en"] .pl-intro .ko, :root[lang="en"] .about-tabs .ko{display:none !important}

  /* ── 영문 보기 — 국문 격자·크기 4단계·색은 그대로, 영어에 맞는 부분만 ── */
  :root[lang="en"]{--kr:var(--en)}                      /* 한글 글꼴 자리까지 모두 Inter(사이트 영문 서체) */
  /* 영문 본문 행간은 사이트 영문 본문과 같은 1.68 (둘러보기 탭 .space-desc-en · 시술 상세 .story-desc.en 과 동일).
     중간타이틀 굵기는 국문과 같은 600 — Inter 600 은 사이트 영문 소제목 굵기(Helvetica Neue 600 이 Bold 로 잡히던
     시절의 500 보정은 Inter 전환으로 불필요). 2026-09-22 "About 페이지 폰트 정리" */
  :root[lang="en"] .pl-intro .index h1, :root[lang="en"] .pl-intro .chapter-title{letter-spacing:-.02em}   /* 사이트 영문 제목 자간 */
  /* 줄 길이: 국문은 오른쪽 열 끝까지 쓰지만 영어는 한 줄 75자 안팎에서 끊는다 */
  :root[lang="en"] .pl-intro .lede p, :root[lang="en"] .pl-intro .chapter-body p{max-width:38em}
  :root[lang="en"] .pl-intro .lede .principle{max-width:none}
  :root[lang="en"] .pl-intro .chapter-lead, :root[lang="en"] .pl-intro .chapter-title{text-wrap:balance}
  :root[lang="en"] .pl-intro .ms-tx > span{line-height:1.55}
  :root[lang="en"] .pl-intro .ms-row{grid-template-columns:max-content minmax(0,220px) minmax(0,1fr)}  /* 연혁 설명 폭 180 → 220 */
  :root[lang="en"] .pl-intro p, :root[lang="en"] .pl-intro .ms-tx > span{word-break:normal;overflow-wrap:break-word}
  /* 국문과 같은 정렬을 영문 글자(Inter) 기준으로 다시 맞춘 값 — 브라우저 실측(2026-09-22, 폰트를 바꾸면 다시 잰다)
     · 타이틀 글자 윗선 = 오른쪽 첫 문단 글자 윗선
     · 원칙 문장 ↔ Milestones 보이는 간격 100 */
  :root[lang="en"] .pl-intro .index h1{margin-top:-0.31px}          /* 실측: 국문 −0.75, 영문(Inter) −0.31 */
  :root[lang="en"] .pl-intro .ms-head .lede{margin-bottom:88.30px}  /* 실측: 국문 89.04, 영문 88.30 */
  /* 공식 영문 표기 확인이 필요한 고유명사 — 점선 밑줄(색 추가 없음, 기존 --line) */
  .pl-intro .todo{text-decoration:underline dotted var(--line);text-underline-offset:3px;text-decoration-thickness:1px}
  @media (max-width:959px){
    :root[lang="en"] .pl-intro .ms-row{grid-template-columns:1fr}
  }

/* ==================================================================
   About 페이지 탭 바 + 소개 탭 통합용 추가 규칙 (정적 사이트)
   - 탭 바(2026-09-23 E안 확정 → 같은 날 축소): 메인 페이지 좌측 매거진 메뉴 어휘(500, 비선택 #ccc, 선·상자 없음)를 15px 로.
     처음에는 헤더 아래 140(모바일 24) 띄워 놓이고, 스크롤하면 올라와 헤더 바로 아래(top 68/66)에 sticky 로
     걸린다(흰 배경, 내용은 그 뒤로 지나감). 아래 헤어라인 없음. 소개 탭의 sticky 기준값은 '걸린 상태'(헤더 + 바) 기준.
     ※ 그 여백은 margin 이 아니라 앞의 빈 요소(.about-tabs-space)로 준다 — margin-top 은 .pl-main 밖으로 상쇄(collapse)되어
       .pl-main(흰 배경)이 통째로 내려가고 그 뒤의 검정 리빌 푸터가 띠처럼 비쳤다(2026-09-23 사용자 스크린샷).
     바 높이는 --pl-tabbar(PC 55 = 20+15+20 / 모바일 40 = 14+14+12) — 소개 탭의 sticky 기준값(좌측 목차·흰 띠·연혁 무대·모바일 목차)에 더해진다.
     글자·여백을 바꾸면 이 값도 같이 맞춘다.
   - 흰 띠: 원본은 사이트 헤더의 ::after 였으나, 정적 사이트에서는 우측 열(.content) 맨 위의
     sticky 요소로 재현(좌측 열의 탭·타이틀을 덮지 않도록 우측 열 폭만 덮는다)
   ================================================================== */
:root{--pl-tabbar:55px}
.about-tabs{
  position:sticky;top:var(--pl-header-h);z-index:1500;   /* 헤더(2000) 아래, 본문 sticky 요소들 위 */
  background:var(--ground);
}
.about-tabs-space{height:100px}             /* 처음 놓이는 자리: 헤더 아래 100 (2026-09-23 40 → 140, 2026-09-28 사용자 요청 "여백 좀 줄이기" 140 → 100) */
.about-tabs__inner{max-width:1444px;margin:0 auto;padding:20px 72px;display:flex;gap:28px;align-items:baseline}
.about-tab{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--kr);font-size:15px;font-weight:500;line-height:1;
  color:var(--faint);transition:color .2s;white-space:nowrap;
}
.about-tab:hover,.about-tab.is-active{color:var(--ink)}
.about-tab:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:959px){
  :root{--pl-tabbar:40px}
  .about-tabs-space{height:16px}   /* 2026-09-28 24 → 16 */
  .about-tabs__inner{padding:14px 20px 12px;gap:22px}
  .about-tab{font-size:14px}
}
.about-pane.is-hidden{display:none !important}
/* 둘러보기 1블록의 영문 제목·문단(pages._tidy_tour 가 2블록에서 옮김) — 국문과 같은 자리·여백 (2026-09-23) */
.pl-main .space-section-kr .space-desc-en{margin:0 0 80px}
@media (max-width:1444px){ .pl-main .space-section-kr .space-desc-en{margin:0 0 60px} }
@media (max-width:959px){ .pl-main .space-section-kr .space-desc-en{margin-bottom:100px} }
.pl-intro .content{position:relative}
.pl-intro .content .pl-intro__band{
  --band-h:calc(var(--cut) - var(--cut-lift) - var(--pl-header-h) - var(--pl-tabbar));
  position:sticky;top:calc(var(--pl-header-h) + var(--pl-tabbar));height:var(--band-h);
  margin-top:-68px;margin-bottom:calc(68px - var(--band-h));   /* .content 위 여백(68)만큼 끌어올려 열 맨 위에서 시작 */
  background:var(--ground);z-index:5;pointer-events:none;
}
@media (max-width:959px){
  .pl-intro .content .pl-intro__band{display:none}
}