/* ============================================================
   LG Smile Project — 공용 스타일
   Figma: LG Smile_공유용 / 섹션 "260905 수정안"

   5개 페이지가 공유합니다.
     main.html     A_메인      (288:1465)
     about.html    A_2_어바웃  (288:1952)
     contest.html  A_3_공모전  (288:2479)
     career.html   A_4_취업    (288:2837)
     wedding.html  A_5_결혼    (288:2058)

   여기에는 토큰 · 리셋 · GNB · 헤드라인 · 스티커 · 푸터만 둡니다.
   페이지 고유 레이아웃은 각 html의 <style>에 있습니다.
   ============================================================ */

/* ---------- 서체 ---------- */
@font-face{
  font-family:"LG Smile";
  src:url("LGSmile-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"LG Smile";
  src:url("LGSmile-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}

/* ---------- 토큰 ---------- */
:root{
  /* 1920 시안 1px = --px. 뷰포트 폭에 항상 비례 — 좁으면 축소, 넓으면 확대 */
  --px: calc(100vw / 1920);

  --bg:              #F7EDF3;
  --ink:             #0A0A0A;
  --ink-sub:         #333333;
  --btn-bg:          #FFFFFF;
  /* 2026-09-16 새 시안(어바웃·모먼트·결혼) : 푸터가 검정 → 밝은 회색으로 바뀌었습니다.
     배경/구분선은 시안 픽셀에서 추출, 본문 글자는 검정으로 뒤집습니다. */
  --footer-bg:       #F1F1F1;
  --footer-ink:      #0A0A0A;
  --footer-muted:    #888888;
  --footer-rule:     #B7B7B7;

  --font-display: "LG Smile", "Pretendard Variable", Pretendard, -apple-system,
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, -apple-system,
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --card-shadow: 0 0 calc(12 * var(--px)) rgba(0,0,0,.12),
                 0 0 calc(12 * var(--px)) rgba(0,0,0,.12);

  /* GNB 위 스크림 — 시안 dim (#000 30% → 투명, 높이 306) */
  --scrim: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(247,237,243,0));
}

/* ---------- 리셋 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* 섹션 클리핑을 풀면서 스티커가 화면 좌우로 나갑니다.
   body 만으로는 가로 스크롤이 남아 html 에도 함께 걸어둡니다. */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.stage{
  width:calc(1920 * var(--px));
  max-width:100%;
  margin-inline:auto;
  position:relative;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   GNB — 1920 × 64, 좌우 여백 280
   시안에서 프로필 pill · 버튼 라벨 · 화살표는 hidden 처리되어 있음
   ============================================================ */
.gnb{
  position:absolute; inset:0 0 auto 0; z-index:20;
  height:calc(64 * var(--px));
  padding-inline:calc(280 * var(--px));
  display:flex; align-items:center; justify-content:space-between;
  color:#fff;
}
.gnb__nav{
  display:flex; align-items:center;
  gap:calc(64 * var(--px));
}
.gnb__nav > li{
  display:flex; align-items:center; justify-content:center;
  gap:calc(8 * var(--px));
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(12.6px, calc(14 * var(--px)), 14px);
  line-height:clamp(16px, calc(16.8 * var(--px)), 16.8px);
  white-space:nowrap;
}
/* 시안의 항목 폭(72 / 112 / 102) — 텍스트는 넘쳐도 가운데 정렬 */
.gnb__nav > li:nth-child(1){ width:calc(72 * var(--px));  letter-spacing:-.02em; }
.gnb__nav > li:nth-child(2){ width:calc(112 * var(--px)); letter-spacing:-.01em; }
.gnb__nav > li:nth-child(3){ width:calc(102 * var(--px)); letter-spacing:-.01em; }
.gnb__caret{
  width:calc(20 * var(--px)); height:calc(20 * var(--px)); flex:none;
  transition:rotate .18s ease;
}

/* ---------- 하위 메뉴 (스마일 클래스) ---------- */
.gnb__nav > li.has-sub{ position:relative; }
.gnb__subtoggle{
  display:flex; align-items:center; justify-content:center;
  gap:calc(8 * var(--px));
  font:inherit; color:inherit; letter-spacing:inherit;
  white-space:nowrap;
}
.gnb__subtoggle[aria-expanded="true"] .gnb__caret{ rotate:180deg; }

.gnb__sub{
  position:absolute; z-index:30;
  top:calc(100% + 14 * var(--px));
  left:50%; translate:-50% 0;
  min-width:calc(140 * var(--px));
  padding:calc(8 * var(--px)) 0;
  border-radius:calc(12 * var(--px));
  background:#FFFFFF;
  box-shadow:0 calc(6 * var(--px)) calc(20 * var(--px)) rgba(0,0,0,.18);
  /* 닫힘 상태 */
  opacity:0; visibility:hidden;
  translate:-50% calc(-6 * var(--px));
  transition:opacity .16s ease, translate .16s ease, visibility .16s;
}
/* 삼각 꼭지 */
.gnb__sub::before{
  content:""; position:absolute;
  left:50%; top:calc(-5 * var(--px)); translate:-50% 0;
  width:calc(12 * var(--px)); height:calc(12 * var(--px));
  background:#FFFFFF; rotate:45deg;
  border-radius:2px;
}
.gnb__nav > li.has-sub:hover .gnb__sub,
.gnb__nav > li.has-sub:focus-within .gnb__sub,
.gnb__subtoggle[aria-expanded="true"] + .gnb__sub{
  opacity:1; visibility:visible; translate:-50% 0;
}
.gnb__sub a{
  display:block;
  padding:calc(9 * var(--px)) calc(20 * var(--px));
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(12.6px, calc(14 * var(--px)), 14px); line-height:clamp(18px, calc(20 * var(--px)), 20px);
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  transition:background .14s ease;
}
.gnb__sub a:hover,
.gnb__sub a:focus-visible{ background:#F7EDF3; }
.gnb__sub a[aria-current="page"]{ font-weight:700; }

/* 가운데 smile 배지 — 메인(A_메인)에서는 hidden이라 넣지 않음.
   현재 쓰는 logo-smile-flat.svg 에는 그림자가 이미 구워져 있어
   CSS drop-shadow 를 겹치지 않습니다. */
.gnb__logo{
  width:calc(179 * var(--px)); height:auto;
}

/* 우측 영역 — 시안의 "menu list" 프레임(414 폭, 오른쪽 정렬).
   좌우 폭이 같아야 가운데 로고가 시안 위치(x=870)에 놓입니다. */
.gnb__actions{
  width:calc(414 * var(--px));
  display:flex; justify-content:flex-end; align-items:center;
}
.gnb__menu{
  width:calc(40 * var(--px)); height:calc(40 * var(--px));
  border-radius:calc(8 * var(--px));
  display:grid; place-items:center;
}
.gnb__menu svg{ width:calc(16 * var(--px)); height:calc(16 * var(--px)); }

/* 상단 스크림 — .gnb 가 얹히는 요소에 붙입니다 */
.has-scrim{ position:relative; }
.has-scrim::before{
  content:""; position:absolute; inset:0 0 auto 0; z-index:10;
  height:calc(306 * var(--px));
  background:var(--scrim);
  pointer-events:none;
}

/* ============================================================
   상단 바 — web-menu-before-login 시안 GNB (227:7407 / 1198:8394)
   흰 배경 · 높이 64 · 문서 흐름에 포함 (히어로 위에 겹치지 않음)
   좌우 여백 280 대칭, 로고는 왼쪽 여백 안 x=45 에 놓입니다.
   about · contest · career · wedding · menu 에서 사용
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto; z-index:30;
  height:calc(113 * var(--px));   /* 시안: 내용 세로 중심이 56.5 */
  background:transparent;                       /* 최상단에서는 투명 */
  transition:background .25s ease, box-shadow .25s ease;
}
/* 스크롤을 내리면 흰 배경 */
.topbar.is-stuck{
  background:#FFFFFF;
  box-shadow:0 calc(2 * var(--px)) calc(12 * var(--px)) rgba(51,52,71,.10);
}
/* 로고의 흰 테두리가 흰 배경(하위 페이지·스크롤 뒤)에서도 보이도록 항상 옅은 halo — 영상 위(투명 GNB)에서도 자연스럽다(2026-09-15 사용자 확인) */
.topbar__logo{ filter:drop-shadow(0 0 1.5px rgba(51,52,71,.45)) drop-shadow(0 1px 2px rgba(51,52,71,.18)); }
/* 화면 전체 폭으로 고정하되 내용은 1920 무대에 맞춰 가운데 정렬 */
.topbar__wrap{
  position:relative;
  width:calc(1920 * var(--px));
  max-width:100%;
  height:100%;
  margin-inline:auto;
}
/* A_메인.pdf 시안: 로고가 왼쪽이 아니라 정중앙(960), 크기 277×41.
   위치를 감싸는 <a> 에 줍니다. img 만 absolute 로 띄우면
   <a> 가 0×0 이 되어 로고를 눌러도 링크가 동작하지 않습니다. */
.topbar__home{
  position:absolute; z-index:1;
  left:50%; translate:-50% -50%; top:50%;
  /* SVG viewBox 를 986×190 으로 넓혀(잘림 제거) 여백이 늘어난 만큼 보정.
     시안 로고 잉크 폭 290 → 986 × (292/986) 기준 290.5 로 동일합니다. */
  width:calc(292 * var(--px));
  display:block;
}
.topbar__logo{
  display:block;
  width:100%; height:auto;
}
/* 시안 좌우 여백 40 (메뉴 잉크 41 부터, 버튼 오른쪽 끝 1880) */
.topbar__inner{
  position:absolute; inset:0 calc(40 * var(--px));
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(24 * var(--px));
}
/* 항목 사이 잉크 간격 45 = gap 13 + 좌우 padding 16×2 */
.topbar__nav{
  flex:0 0 auto;
  margin-left:calc(-16 * var(--px));   /* 첫 항목 잉크를 40 에 맞춤 */
  display:flex; align-items:center;
  gap:calc(13 * var(--px));
}
/* 오른쪽 원형 아이콘 2개 — 시안 60×60, 사이 11 */
.topbar__actions{
  flex:0 0 auto;
  display:flex; align-items:center;
  gap:calc(11 * var(--px));
}
.topbar__icon{
  display:block;
  width:calc(60 * var(--px)); height:calc(60 * var(--px));
  transition:opacity .16s ease;
}
.topbar__icon:hover{ opacity:.7; }
.topbar__icon img{ display:block; width:100%; height:100%; }
.topbar__link,
.topbar__login{
  display:inline-flex; align-items:center; justify-content:center;
  gap:calc(6 * var(--px));
  height:calc(40 * var(--px));
  padding-inline:calc(16 * var(--px));
  border-radius:calc(8 * var(--px));
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(16px, calc(20 * var(--px)), 20px);            /* 시안 14 → 20 으로 키움 */
  line-height:clamp(22.4px, calc(28 * var(--px)), 28px);
  color:#333447;
  white-space:nowrap;
  transition:background .14s ease;
}
.topbar__link:hover,
.topbar__login:hover,
.topbar__menu:hover{ background:#F6F6F9; }
.topbar__link[aria-current="page"]{ font-weight:700; }
.topbar__caret{
  width:calc(16 * var(--px)); height:calc(16 * var(--px)); flex:none;
  transition:rotate .18s ease;
}
[aria-expanded="true"] .topbar__caret{ rotate:180deg; }

/* 상단 바 하위 메뉴 (스마일 클래스) */
.topbar__item{ position:relative; display:flex; align-items:center; }
.topbar__sub{
  position:absolute; z-index:40;
  top:calc(100% + 8 * var(--px)); left:0;
  min-width:calc(196 * var(--px));   /* 글자 20 에 맞춰 넓힘 */
  padding:calc(8 * var(--px)) 0;
  border-radius:calc(12 * var(--px));
  background:#FFFFFF;
  box-shadow:0 calc(6 * var(--px)) calc(20 * var(--px)) rgba(51,52,71,.16);
  opacity:0; visibility:hidden;
  translate:0 calc(-6 * var(--px));
  transition:opacity .16s ease, translate .16s ease, visibility .16s;
}
.topbar__item:hover .topbar__sub,
.topbar__item:focus-within .topbar__sub,
[aria-expanded="true"] + .topbar__sub{
  opacity:1; visibility:visible; translate:0 0;
}
.topbar__sub a{
  display:block;
  padding:calc(11 * var(--px)) calc(24 * var(--px));
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(16px, calc(20 * var(--px)), 20px); line-height:clamp(22.4px, calc(28 * var(--px)), 28px);  /* 상위 메뉴와 동일 */
  color:#333447;
  white-space:nowrap;
  transition:background .14s ease;
}
.topbar__sub a:hover,
.topbar__sub a:focus-visible{ background:#F6F6F9; font-weight:700; }
.topbar__sub a[aria-current="page"]{ font-weight:700; }
.topbar__menu{
  flex:none;
  width:calc(40 * var(--px)); height:calc(40 * var(--px));
  border-radius:calc(8 * var(--px));
  display:grid; place-items:center;
  color:#333447;
  transition:background .14s ease;
}
.topbar__menu svg{ width:calc(16 * var(--px)); height:calc(16 * var(--px)); }

/* ---------- 메인 전용 : 히어로 영상 위에 얹힌 상태 ----------
   main.html 은 .topbar 에 .is-on-hero 를 함께 답니다.
   A_메인.pdf 시안 기준으로 최상단에서도 스크롤 후와 똑같이
   어두운 글씨(#333447)·가운데 로고를 그대로 씁니다.
   달라지는 건 바 배경뿐입니다 (최상단 투명 → 스크롤 시 흰색).
   ※ 어두운 영상 위에서는 글씨가 묻힐 수 있는데, 영상이 확정되면
     그때 스크림이나 글자색을 다시 판단하면 됩니다. */

@media (max-width:1279px){
  .topbar{ height:56px; }
  .topbar__logo{ left:16px; top:14px; width:132px; }
  .topbar__inner{ inset:0 16px 0 168px; gap:8px; }
  .topbar__nav{ gap:4px; }
  .topbar__link,.topbar__login{ height:36px; padding-inline:10px; font-size:13px; }
  .topbar__menu{ width:36px; height:36px; }
  .topbar__icon{ width:40px; height:40px; }   /* 56px 바 안에 60px 원형 아이콘이 삐져나오던 것(2026-09-12) */
  .topbar__sub{ min-width:132px; border-radius:12px; top:calc(100% + 6px); }
  .topbar__sub a{ padding:8px 16px; font-size:13px; }
}
@media (max-width:1279px){
  /* 2026-09-11: 모바일 겹침 해결 — 로고 좌측·텍스트 메뉴 숨김·아이콘 우측(전체메뉴로 이동)
     2026-09-12: 태블릿(761~1279)도 동일 — 텍스트 메뉴(≈330px)가 중앙 로고와 겹치던 구간. 메뉴는 전체메뉴(≡)에 있다 */
  .topbar__home{ left:16px; top:50%; translate:0 -50%; width:clamp(120px, calc(160 * var(--px)), 160px); }
  .topbar__logo{ display:block; }
  .topbar__nav{ display:none; }
  .topbar__inner{ inset:0 12px; justify-content:flex-end; }
}

/* ============================================================
   공통 헤드라인 — LG Smile Bold 48 / 67.2 / -1.92
   ============================================================ */
.headline{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(31.2px, calc(48 * var(--px)), 48px);
  line-height:clamp(43.7px, calc(67.2 * var(--px)), 67.2px);
  letter-spacing:-.04em;
  text-align:center;
  color:var(--ink);
  text-wrap:balance;
}

/* ============================================================
   데코 스티커 — 섹션 대비 % 좌표(--xp / --yp / --wp)
   회전은 Figma SVG 내보내기에 이미 구워져 있으므로 CSS 회전 없음
   ============================================================ */
.sticker{
  /* 본문 콘텐츠(1~5) 위에, 고정 상단 바·메뉴(20~40) 아래 */
  position:absolute; z-index:10;
  pointer-events:none; user-select:none;
  left:calc(var(--xp) * 1%);
  top:calc(var(--yp) * 1%);
  width:calc(var(--wp) * 1%);
  height:auto;
}

/* ============================================================
   스티커 미세 움직임 — 5개 페이지 공용
   PNG 자체에 기울기가 구워져 있어 CSS transform 은 그 위에 더해집니다.
   섹션 안에서 5종이 순환하고, 주기가 서로 나누어떨어지지 않아
   여러 개가 같은 순간에 같이 움직이지 않습니다.
   ============================================================ */
@keyframes stk-float{        /* 위아래로 */
  from{ transform:translateY(calc(-18 * var(--px))); }
  to{   transform:translateY(calc(18 * var(--px))); }
}
@keyframes stk-tilt{         /* 좌우로 기울기 */
  from{ transform:rotate(-10deg); }
  to{   transform:rotate(10deg); }
}
@keyframes stk-bob{          /* 뜨면서 기울기 */
  from{ transform:translateY(calc(-16 * var(--px))) rotate(-8deg); }
  to{   transform:translateY(calc(14 * var(--px))) rotate(8deg); }
}
@keyframes stk-drift{        /* 옆으로 흐르며 기울기 */
  from{ transform:translateX(calc(-16 * var(--px))) rotate(6deg); }
  to{   transform:translateX(calc(16 * var(--px))) rotate(-6deg); }
}
@keyframes stk-breathe{      /* 커졌다 작아졌다 */
  from{ transform:scale(.9) rotate(-6deg); }
  to{   transform:scale(1.12) rotate(6deg); }
}

.sticker{ animation:stk-float 4s ease-in-out infinite alternate; }
.sticker:nth-of-type(5n+1){ animation:stk-bob     4.4s ease-in-out infinite alternate; animation-delay:-1.4s; }
.sticker:nth-of-type(5n+2){ animation:stk-tilt    3.6s ease-in-out infinite alternate; animation-delay:-3.2s; }
.sticker:nth-of-type(5n+3){ animation:stk-float   3.3s ease-in-out infinite alternate; animation-delay:-0.7s; }
.sticker:nth-of-type(5n+4){ animation:stk-breathe 5.0s ease-in-out infinite alternate; animation-delay:-2.5s; }
.sticker:nth-of-type(5n+5){ animation:stk-drift   4.1s ease-in-out infinite alternate; animation-delay:-4.6s; }

@media (prefers-reduced-motion:reduce){
  .sticker{ animation:none; }
}

/* ============================================================
   푸터 — 시안 1920 × 397 을 40% 축소한 1920 × 238
   안쪽 치수(padding·gap·font·로고)를 모두 ×0.6 으로 맞췄습니다.
   시안 원본값은 각 줄 주석에 남겨둡니다.
   ============================================================ */
.footer{
  background:var(--footer-bg);
  color:var(--footer-ink);
  padding:calc(48 * var(--px));                     /* 시안 80 */
  /* 2026-09-12: .stage 가 1920 에서 멈춰도(--px 상한) 검정 띠는 화면 끝까지, 내용은 1920 안 중앙 */
  width:100vw; margin-inline:calc(50% - 50vw); box-sizing:border-box;
  padding-inline:max(calc(48 * var(--px)), calc(50vw - 960px + 48px));
  display:flex; flex-direction:column;
  gap:calc(28.8 * var(--px));                       /* 시안 48 */
  font-family:var(--font-display);
}
.footer__main{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:calc(24 * var(--px));                         /* 시안 40 */
}
.footer__brand{
  display:flex; flex-direction:column;
  gap:calc(9.6 * var(--px));                        /* 시안 16 */
}
.footer__mark{ width:calc(67.2 * var(--px)); height:auto; }   /* 시안 112 */
.footer__name{
  margin:0; font-weight:700;
  font-size:clamp(16px, calc(20 * var(--px)), 20px); line-height:1.2;  /* 글자 크기는 시안 유지 */
}
.footer__tag{
  margin:0; font-weight:300;
  font-size:clamp(12px, calc(12 * var(--px)), 12px); line-height:1.667;  /* 글자 크기는 시안 유지 */
  color:var(--footer-muted);
}
.footer__col{
  display:flex; flex-direction:column;
  gap:calc(9.6 * var(--px));                        /* 시안 16 */
}
.footer__col-h{
  font-weight:700;
  font-size:clamp(12px, calc(12 * var(--px)), 12px); line-height:1.2;  /* 글자 크기는 시안 유지 */
}
/* 열 제목은 '스마일 프로젝트란?' 소개 페이지로 갑니다.
   .footer__col a / .footer a 의 링크 스타일(연한 회색·모바일 터치영역)이
   제목에까지 걸리지 않도록 여기서 되돌립니다. */
/* .footer__col a 와 명시도가 같으면 뒤에 오는 쪽이 이기므로 .footer 를 앞에 붙여 올립니다. */
.footer .footer__col-h a{
  display:inline; padding:0; margin:0;
  color:inherit; font:inherit; letter-spacing:inherit;
  text-decoration:none;
}
.footer .footer__col-h a:hover{ text-decoration:underline; }
.footer__col a{
  font-weight:300;
  font-size:clamp(12px, calc(12 * var(--px)), 12px); line-height:1.2;  /* 글자 크기는 시안 유지 */
  color:var(--footer-muted);
  transition:color .15s ease;
}
.footer__col a:hover{ color:var(--footer-ink); }
.footer__rule{
  height:1px; border:0; margin:0;                   /* 헤어라인 — 축소 대상 아님 */
  background:var(--footer-rule);
}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:calc(14.4 * var(--px));                       /* 시안 24 */
  font-weight:300;
  font-size:12px; line-height:1.2;  /* 시안 11 → 12(법적 고지 최소 가독 크기, 2026-09-12) */
  color:var(--footer-muted);
}
.footer__legal{
  display:flex;
  gap:calc(14.4 * var(--px));                       /* 시안 24 */
}
.footer__legal a:hover{ color:var(--footer-ink); }

/* ============================================================
   서브페이지 공통 (공모전 · 취업 · 결혼)
   시안 공통 리듬: 섹션 padding 70/280, 타이틀 40px, gap 32, 흰 패널 r40
   ============================================================ */
.sec{
  position:relative;
  background:var(--bg);
  /* 스티커가 섹션 경계에서 잘리지 않도록 클리핑 해제 (시안은 clipsContent=true) */
  overflow:visible;
  padding:calc(70 * var(--px)) calc(280 * var(--px));
}
/* 예외 — 장식컷(panel__art)은 섹션 밖으로 크게 벗어나도록 배치돼 있어
   클리핑을 풀면 그대로 삐져나옵니다. 이 섹션만 시안대로 잘라둡니다. */
.sec:has(.panel__art){ overflow:hidden; }
.sec__title{
  margin:0 0 calc(32 * var(--px));
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px, calc(40 * var(--px)), 40px);
  line-height:clamp(31.2px, calc(48 * var(--px)), 48px);
  letter-spacing:-.01em;
  text-align:center;
  color:var(--ink);
}
.sec__title--left{ text-align:left; }

/* 흰 패널 — r40, 시안 stroke 5px 는 흰 배경 위 흰 선이라 생략 */
.panel{
  position:relative;
  border-radius:calc(40 * var(--px));
  background:#FFFFFF;
  padding:calc(40 * var(--px)) calc(60 * var(--px));
}

/* ---------- 아코디언 ---------- */
.acc{ display:flex; flex-direction:column; }
.acc__item{ border:0; }
.acc__item + .acc__item{ margin-top:0; }
.acc__row{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(8 * var(--px));
  cursor:pointer;
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(19.2px, calc(24 * var(--px)), 24px);      /* 시안 24 */
  line-height:clamp(30.7px, calc(38.4 * var(--px)), 38.4px);
  letter-spacing:-.03em;
  color:var(--ink);
}
.acc__row::-webkit-details-marker{ display:none; }
.acc__icon{
  flex:none;
  width:calc(32 * var(--px)); height:calc(32 * var(--px));
  position:relative;
}
/* +  /  −  아이콘 (시안 add / remove 벡터, #666) */
.acc__icon::before,
.acc__icon::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  translate:-50% -50%;
  background:#666666;
}
.acc__icon::before{ width:calc(18 * var(--px)); height:calc(2 * var(--px)); }
.acc__icon::after{
  width:calc(2 * var(--px)); height:calc(18 * var(--px));
  transition:opacity .18s ease;
}
.acc__item[open] .acc__icon::after{ opacity:0; }

.acc__body{
  margin:calc(8 * var(--px)) 0 0;
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(16px, calc(20 * var(--px)), 20px);      /* 시안 20 */
  line-height:clamp(25.6px, calc(32 * var(--px)), 32px);
  letter-spacing:-.03em;
  color:#666666;
}
.acc__rule{
  height:1px; border:0; margin:0;
  background:#AEAEAE; opacity:.4;
}
/* 아코디언 본문 안의 질문·답변 목록 (career · wedding 의 FAQ 분류 항목)
   FAQ정리.pdf 는 분류마다 여러 Q&A 를 담고 있어 .acc__body 한 문단으로는
   부족합니다. 질문은 진하게, 답변은 본문색으로 구분합니다. */
.qa{
  margin:calc(12 * var(--px)) 0 0;
  display:flex; flex-direction:column;
  gap:calc(20 * var(--px));
}
.qa__q{
  margin:0 0 calc(6 * var(--px));
  font-family:var(--font-body); font-weight:600;
  font-size:clamp(19.2px, calc(24 * var(--px)), 24px); line-height:clamp(30.7px, calc(38.4 * var(--px)), 38.4px);   /* 시안 24 */
  letter-spacing:-.03em; color:var(--ink);
}
.qa__a{
  margin:0;
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(16px, calc(20 * var(--px)), 20px); line-height:clamp(25.6px, calc(32 * var(--px)), 32px);     /* 시안 20 */
  letter-spacing:-.03em; color:#666666;
}
/* 시안의 두 가지 아코디언 변형
     .faq    — 얇은 테두리 상자로 감싸고 항목 간격 24
     .notice — 테두리 없이 항목 간격 32 */
/* 시안의 이 상자는 테두리가 visible:false — 항목 사이 구분선만 있습니다 */
.faq .acc__rule{ margin-block:calc(24 * var(--px)); }
.notice .acc__rule{ margin-block:calc(32 * var(--px)); }
/* 구분선 없이 이어지는 항목 (시안에 선이 없는 자리) */
.faq .acc__item + .acc__item{ margin-top:calc(24 * var(--px)); }

/* ---------- 문의 목록 ---------- */
.contact{
  display:flex; flex-direction:column;
  gap:calc(16 * var(--px));
}
.contact__row{
  display:flex; justify-content:space-between; align-items:center;
  gap:calc(16 * var(--px));
  font-size:clamp(16px, calc(20 * var(--px)), 20px);      /* 시안 20 */
  line-height:clamp(25.6px, calc(32 * var(--px)), 32px);
  letter-spacing:-.03em;
}
.contact__row dt{
  font-family:var(--font-body); font-weight:500; color:var(--ink);
  flex:none;
}
.contact__row dd{
  margin:0;
  font-family:var(--font-body); font-weight:300; color:#666666;
  width:calc(923 * var(--px));                     /* 시안 값 정렬 위치 x=717 */
  flex:none;
}

/* ---------- 히어로 (서브페이지 01) ---------- */
.phero{
  position:relative;
  /* 시안 히어로 높이 900 */
  height:calc(900 * var(--px));
  background:var(--bg);
  overflow:visible;   /* 스티커가 섹션 경계에서 잘리지 않도록 (시안은 clip) */
}
/* 쌓임 순서 — 흰 프레임(0) < 누끼(2) < 본문 카피(5) < 스티커(10) */
.phero__copy{
  position:absolute; z-index:5;
  left:calc(280 * var(--px));
  /* 시안 베이스라인 : eyebrow 310 / h1 382 / desc 459·490·521·552 / 버튼 590~650.
     Pretendard(A .95 D .24)·LG Smile(A .95 D .25) 기준으로 역산한 값입니다. */
  top:calc(282 * var(--px));
  width:calc(660 * var(--px));
}
/* 260907 피드백: 메인 카드에서 쓰는 본문 폰트(--font-body)를
   상세페이지 세부문구에도 통일 적용. LG Smile 은 Bold/Light 두 종뿐이라
   작은 본문에서 Light(300) 이 얇게 깨져 보였습니다. */
.phero__eyebrow{
  margin:0;
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(19.2px, calc(24 * var(--px)), 24px);      /* 시안 24 */
  line-height:clamp(27.2px, calc(34 * var(--px)), 34px);
  letter-spacing:-.02em;
  color:var(--ink-sub);
}
.phero__h1{
  margin:calc(9 * var(--px)) 0 0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(39px, calc(60 * var(--px)), 60px);      /* 시안 60 */
  line-height:clamp(46.8px, calc(72 * var(--px)), 72px);
  letter-spacing:-.02em;
  color:var(--ink);
  /* 시안 그림자 구조 : 글자 둘레에 순백 띠(약 4px)가 있고, 그 바깥에서
     그림자가 알파 0.25 로 시작해 8px 안에 사라집니다 ('스티커' 느낌).
     text-shadow 는 paint-order:stroke 와 함께 쓰면 채움의 그림자가 흰 테두리
     위에 다시 그려져 띠가 사라지므로, 요소 전체에 거는 drop-shadow 를 씁니다.
     시안 프로파일(255,255,255,251,192,197,205,216,231,243,251,254,255)과
     대조해 맞춘 값입니다. */
  paint-order:stroke fill;
  -webkit-text-stroke:calc(8 * var(--px)) #FFFFFF;   /* 바깥으로 4 — 시안 흰 띠 폭 */
  filter:drop-shadow(0 calc(2 * var(--px)) calc(4 * var(--px)) rgba(0,0,0,.42));
}
.phero__desc{
  margin:calc(36.7 * var(--px)) 0 0;
  font-family:var(--font-body); font-weight:400;   /* 260907 피드백: 본문 폰트 통일 */
  font-size:clamp(17.6px, calc(22 * var(--px)), 22px);      /* 시안 22 / 행간 31 */
  line-height:clamp(24.8px, calc(31 * var(--px)), 31px);
  letter-spacing:-.02em;
  color:var(--ink);
}
.phero__cta{
  display:flex; align-items:center;
  gap:calc(8 * var(--px));   /* 대지 196:6803 CTA gap 8 */
  margin-top:calc(31.3 * var(--px));
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:calc(13.2 * var(--px)) calc(32 * var(--px));   /* 시안 버튼 높이 60 */
  border-radius:999px;
  font-family:var(--font-body); font-weight:600;
  font-size:clamp(19.2px, calc(24 * var(--px)), 24px);      /* 시안 24 */
  line-height:clamp(26.9px, calc(33.6 * var(--px)), 33.6px);
  letter-spacing:-.02em;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform:translateY(calc(-2 * var(--px)));
  box-shadow:0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(0,0,0,.16);
}
.btn--solid{ background:var(--accent); color:#FFFFFF; }
.btn--ghost{
  background:#FFFFFF; color:var(--accent);
  border:1px solid var(--accent);
}

/* 히어로 콜라주 — 흰 라운드 프레임 + 그 위로 튀어나오는 누끼 컷 */
.shot{ position:absolute; overflow:hidden; background:#FFFFFF; }
.shot img{ position:absolute; width:100%; height:100%; object-fit:cover; }
.cutout{ position:absolute; z-index:2; }
/* 크롭용 이미지는 상자보다 커야 합니다 — 리셋의 max-width:100% 를 해제 */
.shot img,
.cutout img{ max-width:none; }

/* ============================================================
   반응형 — 1280 미만부터 리플로우(2026-09-12: 글자 최소 크기 도입 후 1024~1279 데스크톱 배치가 좁아 태블릿 배치로 편입)
   (1280~1920 은 --px 비례 축소로 시안 레이아웃을 그대로 유지, 1920 초과는 --px 상한 1px)
   ============================================================ */
@media (max-width:1279px){
  :root{ --px:1px; }                    /* 비례 축소 중단, 실치수로 전환 */
  .stage{ width:100%; }

  .gnb{
    height:64px;
    padding-inline:clamp(20px, 4vw, 60px);
  }
  .gnb__nav{ gap:clamp(20px, 3.4vw, 44px); }
  .gnb__nav > li{ width:auto !important; font-size:14px; line-height:1.2; }
  .gnb__caret{ width:18px; height:18px; }
  .gnb__sub{
    top:calc(100% + 12px); min-width:132px;
    border-radius:12px; padding:6px 0;
  }
  .gnb__sub::before{ top:-4px; width:10px; height:10px; }
  .gnb__sub a{ padding:8px 16px; font-size:13px; line-height:1.4; }
  .gnb__logo{ width:clamp(120px, 14vw, 160px); }
  .gnb__actions{ width:auto; }
  .gnb__menu{ width:40px; height:40px; }
  .gnb__menu svg{ width:18px; height:18px; }

  .has-scrim::before{ height:180px; }

  .headline{
    font-size:clamp(24px, 3.6vw, 44px);
    line-height:1.4;
    padding-inline:clamp(20px, 5vw, 60px);
  }

  /* % 좌표는 유지하고 크기만 줄여 본문과의 충돌을 완화 */
  .sticker{ width:calc(var(--wp) * 1.45%); opacity:.92; }

  /* ---- 서브페이지 공통 ---- */
  .sec{ padding:clamp(48px, 7vw, 90px) clamp(20px, 5vw, 64px); }
  .sec__title{
    font-size:clamp(24px, 3.2vw, 36px); line-height:1.25;
    margin-bottom:clamp(20px, 2.6vw, 32px);
  }
  .panel{ border-radius:28px; padding:clamp(24px, 3.4vw, 40px) clamp(20px, 3.4vw, 48px); }

  .acc__row{ font-size:15px; line-height:1.55; }
  .acc__icon{ width:22px; height:22px; }
  .acc__icon::before{ width:13px; height:2px; }
  .acc__icon::after{ width:2px; height:13px; }
  .acc__body{ font-size:14px; line-height:1.65; }
  .qa{ margin-top:10px; gap:16px; }
  .qa__q,.qa__a{ font-size:14px; line-height:1.65; }
  .faq .acc__rule{ margin-block:18px; }
  .notice .acc__rule{ margin-block:22px; }

  .contact__row{ font-size:14px; line-height:1.6; align-items:flex-start; }
  .contact__row dd{ width:auto; flex:1 1 auto; text-align:right; }

  .phero{ height:auto; padding:calc(56px + clamp(96px, 12vw, 150px)) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 72px); }
  .phero__copy{ position:static; width:100%; }
  .phero__eyebrow{ font-size:14px; }
  .phero__h1{ font-size:clamp(26px, 3.6vw, 40px); line-height:1.3; }
  .phero__desc{ font-size:15px; line-height:1.6; margin-top:20px; }
  .phero__cta{ margin-top:24px; flex-wrap:wrap; }
  .btn{ font-size:14px; padding:11px 24px; }

  /* 푸터 여백·간격·로고만 ×0.6 (원래 padding 40/72·20/64, gap 32, mark 96) */
  .footer{ padding:clamp(24px, 3.6vw, 43px) clamp(12px, 3vw, 38px); gap:19px; }
  .footer__mark{ width:58px; }
  .footer__name{ font-size:18px; }
  .footer__tag,.footer__col-h,.footer__col a{ font-size:12px; }
  .footer__bottom{ font-size:12px; }
}

@media (max-width:640px){
  .gnb{ padding-inline:16px; }
  .gnb__nav{ gap:16px; }
  .gnb__nav > li{ font-size:12px; }
  .gnb__logo{ display:none; }          /* 좁은 폭에서 메뉴와 겹침 */
  .headline{ font-size:clamp(20px, 5.6vw, 26px); padding-inline:20px; }
  .footer__main{ flex-direction:column; gap:32px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer__legal{ gap:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   2026-09-12 데스크톱 확대감 완화 (자력 결정, 시안 치수와 다름 → 디자이너 공유 예정)
   · --px 상한 1px: 1920 초과 화면에서 전 페이지 요소가 더 커지지 않음(1920 이하는 시안 그대로)
   · GNB 실치수: 헤더 113→76, 로고 292→220, 메뉴 20→16(시안 원본 14, 개발 중 20으로 키웠던 것),
     아이콘 60→44, 내용 최대폭 1600. 위치 규칙(중앙 로고·좌 메뉴·우 아이콘·투명→흰 배경)은 유지.
   ============================================================ */
@media (min-width:1280px){
  :root{ --px:min(1px, calc(100vw / 1920)); }
}
/* GNB 고정 치수는 1280 부터 — 1024~1279 에서 16px 메뉴 3개(≈490px)가 중앙 로고(좌 402)를 덮는다. 그 구간은 기존 비례(--px) 유지 */
@media (min-width:1280px){
  .topbar{ --px:1px; height:76px; }
  .topbar__wrap{ width:100%; max-width:1600px; }
  .topbar__inner{ inset:0 32px; }
  .topbar__home{ width:220px; }
  .topbar__icon{ width:44px; height:44px; }
  .topbar__link,.topbar__login{ height:40px; padding-inline:14px; font-size:16px; line-height:24px; }
  .topbar__sub a{ font-size:15px; }
  /* 헤더가 113→76 으로 낮아진 만큼(37px) 서브 히어로를 올려 시안의 헤더-본문 간격을 유지 */
  .phero{ margin-top:calc(76px - 113 * var(--px)); }   /* 1920: −37px, 1280: ≈0 */
}

/* UA 기본 small{font-size:smaller} 가 카피라이트를 10px 로 줄이던 것 차단 */
.footer__bottom small{ font-size:inherit; }

/* ============================================================
   2026-09-12 모바일(≤767) — 피그마 mobile-contest/job/wedding-home(1404:10634·10729·10927) 실측
   GNB 52(로고 140×25 · 선형 햄버거 24, stroke #333447/2) · 콘텐츠 패딩 20
   히어로: 아이브로우 LG Smile 700 16/22.4 #333333 · 타이틀 LG Smile 700 40/56 #0A0A0A
           본문 LG Smile 300 16/22.4 #0A0A0A · CTA 2열(46~48, r1000, Pretendard 600 16) gap 8
   ============================================================ */
@media (max-width:767px){
  .topbar{ height:52px; }
  .topbar__home{ left:20px; top:2px; translate:none; width:140px; } /* 같은 원본·크기, padding10px 포함 그림 y12px */
  .topbar__logo{ width:100%; }                              /* ≤1279 블록의 132px 해제 → 대지 140 */
  .topbar__inner{ inset:0 20px; }
  /* 모바일 메뉴 버튼 = 대지(mobile-*-home, 2026-09-15 갱신)의 원형 36(외곽 #595959 0.6, 3선) — 데스크톱과 같은 menu.svg 를 36 으로 */
  .topbar__icon{ position:relative; width:36px; height:36px; margin-right:-4px; }
  .topbar__icon img{ display:block; }
  .topbar__icon:focus-visible{ outline:2px solid #4049EB; outline-offset:2px; border-radius:50%; }
  /* 모바일 히어로 제목은 흰 띠(text-stroke)·그림자 없음(대지 mobile-contest-home 1404:10634) */
  .phero__h1{ paint-order:normal; -webkit-text-stroke:0; filter:none; }
  /* 서브 히어로 카피(공모전·신입사원·예비부부 공통) */
  .phero{ height:auto; padding:72px 20px 12px; }          /* 52 GNB + 20 */
  .phero__copy{ position:static; width:auto; max-width:none; }
  .phero__eyebrow{ font-family:var(--font-display); font-weight:700; font-size:16px; line-height:22.4px; color:#333333; margin:0 0 0; }
  .phero__h1{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:56px; color:#0A0A0A; margin:0 0 16px; }
  .phero__desc{ font-family:var(--font-display); font-weight:300; font-size:16px; line-height:22.4px; color:#0A0A0A; margin:0 0 16px; }
  .phero__desc br{ display:none; }                          /* 대지는 흐름 줄바꿈 */
  .phero__cta{ display:flex; gap:8px; margin:0; }
  .phero__cta .btn{ flex:1 1 0; justify-content:center; height:48px; padding:12px 16px; border-radius:1000px;
                    font-family:var(--font-body); font-weight:600; font-size:16px; line-height:22.4px; white-space:nowrap; }
  /* 사진 구성 — 페이지별 % 좌표(각 템플릿 스타일 끝에 정의). 공통: 상대 박스 + 좌우 블리드 */
  .phero .phero__shots{ position:relative; display:block; width:100vw; margin:12px 0 0 -20px; height:auto; grid-template-columns:none; }
  .phero__shots .shot, .phero__shots .cutout, .phero__shots .cutout-in{ position:absolute; display:none; margin:0; }
  .phero__shots .shot img, .phero__shots .cutout img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; }
  .phero .sticker{ display:none; }
  .phero__shots{ isolation:isolate; }
  /* 터치 타깃: 로고 링크·푸터 링크 세로 여백(시각 변화 없음) */
  .topbar__home{ padding:10px 0; box-sizing:content-box; }
  .footer a{ display:inline-block; padding:8px 0; margin:-8px 0; }
}

/* ============================================================
   모바일(≤767) 스크롤 컨테이너 정리 — html·body 둘 다 overflow-x:hidden 이면 body 가 별도 스크롤 컨테이너가 되어
   뷰포트 scroll-snap 이 안 걸린다(실측). body 는 clip(스크롤 컨테이너 아님)으로 가로 넘침만 자른다.
   섹션 스냅 자체는 홈 템플릿(design.ts home)에만 둔다 — 서브페이지는 섹션이 길고 촘촘해 자유 스크롤(Codex 자문).
   ============================================================ */
@media (max-width:767px){
  body{ overflow-x:clip; }
  html{ scroll-padding-top:52px; }   /* 앵커 이동 시 고정 헤더 보정 */
}

/* ============================================================
   2026-09-12 모바일(≤767) 타이포·간격 점검 반영 — Codex CLI 리뷰 + 390px 전 페이지 캡처 검토.
   A안 색·서체는 유지(라벨 색 등 대비 지적은 디자인 결정이라 미반영). 값은 4/8px 그리드.
   ============================================================ */
@media (max-width:767px){
  /* 한글 어절 단위 줄바꿈 — '만/드는', '전국/민' 같은 음절 분리 방지. 긴 URL 은 anywhere 로 안전망 */
  body{ word-break:keep-all; overflow-wrap:anywhere; }
  /* 서브 히어로 본문은 A안 본문 서체(Pretendard 400)로 — 피그마 모바일 대지의 LG Smile Light 는 A안 아님 */
  .phero__desc{ font-family:var(--font-body); font-weight:400; font-size:16px; line-height:24px; }
  .phero__cta .btn{ font-size:15px; }
  /* 본문 최소 14px */
  .specs__value,.specs__note,.topic__body,.topic__note,.facts__row dd,.facts__row dt{ font-size:14px !important; line-height:1.6 !important; }
  .specs__col{ align-items:flex-start !important; text-align:left !important; }        /* 긴 참가 조건은 왼쪽부터 읽게, 신입사원·예비부부 정보 목록과 정렬 통일 */
  .specs__col:first-child .specs__note{ width:auto !important; }
  /* 강제 줄바꿈은 모바일에서 해제(자동 줄바꿈 뒤 짧은 꼬리 행 방지) */
  .tl__desc br,.sec__lead br,.card__desc br,.about__copy p br,.reward__desc br,.judge__body br{ display:none; }
  /* 섹션 리듬: 상하 48, 제목-내용 24 */
  .sec{ padding-block:48px !important; }
  .sec__title{ margin-bottom:24px !important; }
  /* 타임라인(상세 일정) 패널 — 인라인 60px 패딩이 본문 폭을 208px 로 조임 */
  .sec[aria-labelledby="detail-title"] > .panel{ padding:24px 20px !important; }
  /* 카드: 세로 간격·본문·버튼 통일 */
  .card{ gap:16px !important; }
  .card__desc{ font-size:14px !important; line-height:1.6 !important; }
  .card__cta{ font-size:14px !important; line-height:20px !important; padding:12px 24px !important; min-height:44px; }
  /* 아코디언 행 터치 높이 */
  .acc__row{ min-height:44px; align-items:center; }
  /* 푸터 링크 — 14px, 터치 44, 음수 마진 제거 */
  .footer__col a,.footer__legal a{ font-size:14px; line-height:20px; display:inline-block; padding-block:12px; margin-block:0; }
  /* 장식 스티커는 콘텐츠 뒤로(패널·카드가 덮음) — FAQ 답변·운영시간을 가리던 문제. 히어로 스티커는 개별 규칙(z-index:3)이 우선 */
  .sticker{ z-index:0; }
  .panel,.reward,.card,.about__card{ position:relative; z-index:1; }
  .sec[aria-labelledby="faq-title"] > .sticker,.sec[aria-labelledby="contact-title"] > .sticker{ display:none; }
}

/* 2026-09-13 디자이너 모바일 메뉴. 기존 1279px 이하 메뉴 생략·767px 레이아웃과 함께 사용. */
.navmodal{ position:fixed; inset:0; z-index:60; }
.navmodal[hidden]{ display:none !important; }
.navmodal__backdrop{
  position:absolute; inset:0;
  background:rgba(18,18,26,.45);
  opacity:0; transition:opacity .22s ease;
}
.navmodal__panel{
  position:absolute; inset:0 0 auto;
  max-height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#FFFFFF;
  border-radius:0 0 20px 20px;
  box-shadow:0 12px 32px rgba(51,52,71,.18);
  padding:0 20px 24px;
  transform:translateY(-12px); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.navmodal.is-open .navmodal__backdrop{ opacity:1; }
.navmodal.is-open .navmodal__panel{ transform:none; opacity:1; }

/* 상단 바와 같은 줄에 로고·닫기 버튼 */
.navmodal__head{
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  margin-inline:-4px;
}
.navmodal__home{ display:block; width:124px; }
.navmodal__home img{ display:block; width:100%; height:auto; }
.navmodal__close{
  flex:none;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:999px; background:transparent;
  color:#333447; cursor:pointer;
}
.navmodal__close:hover{ background:#F6F6F9; }
.navmodal__close svg{ width:18px; height:18px; }

.navmodal__nav{ display:flex; flex-direction:column; padding-top:8px; }
.navmodal__link{
  display:block;
  padding:14px 4px;
  font-family:var(--font-display); font-weight:500;
  font-size:18px; line-height:1.4;
  letter-spacing:-.02em;
  color:#333447;
  border-bottom:1px solid rgba(174,174,174,.4);
}
.navmodal__link[aria-current="page"]{ font-weight:700; }
.navmodal__group{ border-bottom:1px solid rgba(174,174,174,.4); }
.navmodal__group > .navmodal__link{ border-bottom:0; padding-bottom:6px; }
.navmodal__sub{ display:flex; flex-direction:column; padding:0 4px 12px; }
.navmodal__sub a{
  display:block;
  padding:9px 12px;
  font-family:var(--font-display); font-weight:300;
  font-size:15px; line-height:1.4;
  letter-spacing:-.02em;
  color:#666666;
}
.navmodal__sub a::before{ content:"· "; color:#AEAEAE; }
.navmodal__all{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:20px;
  height:48px;
  border-radius:999px;
  background:#333447; color:#FFFFFF;
  font-family:var(--font-display); font-weight:500;
  font-size:15px; letter-spacing:-.02em;
}

/* 모달 열려 있는 동안 뒤쪽 스크롤 잠금 */
body.navmodal-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .navmodal__backdrop,
  .navmodal__panel{ transition:none; }
}

/* 가장자리 장식은 회전·흔들림까지 섹션 안에 둔다. 사진/영상 크롭 규칙은 유지한다. */
.programs > .sticker, .outro > .sticker, .sec > .sticker {
  --sticker-edge: max(16px, calc(32 * var(--px)));
  left: clamp(var(--sticker-edge), calc(var(--xp) * 1%), calc(100% - var(--wp) * 1% - var(--sticker-edge)));
}
@media (max-width:1279px) {
  .programs > .sticker, .outro > .sticker, .sec > .sticker {
    left: clamp(var(--sticker-edge), calc(var(--xp) * 1%), calc(100% - var(--wp) * 1.45% - var(--sticker-edge)));
  }
}

/* 서브 히어로의 흰 배경만 화면 전체로 연장하고 콘텐츠 폭은 유지한다. */
.phero { isolation:isolate; }
.phero::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax); }