/* =====================================================================
   yr-embed.css — 아임웹 코드위젯 전용 (자동 생성 · 직접 수정 금지)
   ---------------------------------------------------------------------
   site.css + about.css 의 모든 선택자를 #yr-root 안으로 가둔 빌드본.

   왜 가두는가: 원본에는 body{}, *{box-sizing}, a{text-decoration:none},
   img{display:block}, table{width:100%} 같은 전역 규칙이 있어서,
   그대로 넣으면 아임웹의 헤더·푸터·다른 블록까지 전부 덮어쓴다.

   주의: .is-about 같은 상태 클래스는 원래 <body> 에 붙던 것인데
   임베드에서는 #yr-root 자신에 붙으므로 '#yr-root.is-about' 로 결합한다.
   자손(' ')으로 만들면 규칙이 통째로 죽는다.
   ===================================================================== */

/* =====================================================================
   Youth Round — 2026 리뉴얼 디자인 시스템 v2
   ---------------------------------------------------------------------
   원칙
   1. 히어로는 영상/사진 위 어두운 막 + 흰 글자
   2. 한 섹션에 색은 1개까지. 대부분의 섹션은 흑·백·회색만 쓴다.
      오렌지는 「지금 이것」 표시에만, 블루는 CTA와 링크에만.
   3. 사진은 크게, 섹션마다 다른 위치에.
   4. 사진 위 정보는 유리 패널로 얹는다.
   5. 제목은 세리프. 단, 크게 쓰지 않는다. 본문은 읽히는 크기를 지킨다.
   6. 여백은 넓게.
   ---------------------------------------------------------------------
   목차
   00 토큰   01 리셋   02 타이포   03 레이아웃/섹션   04 헤더
   05 히어로 06 페이지헤드 07 글래스 08 버튼 09 섹션헤드
   10 카드   11 스플릿 12 모자이크 13 밴드 14 숫자 15 스텝
   16 표     17 정보/체크/콜아웃 18 데이 19 비교 20 FAQ
   21 폼     22 CTA 23 푸터 24 모션 25 반응형 26 인쇄
   ===================================================================== */

/* == 00 토큰 ======================================================== */
#yr-root{
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --cream:#F5F5F3;
  --ink:#0E1012;
  --body:#3B4045;
  --muted:#7A8087;
  --faint:#AEB3B8;
  --line:#E4E4E2;
  --line-soft:#EEEEEC;

  --blue:#013AA5;
  --blue-deep:#08203F;
  --orange:#FC5D12;

  --on-dark:#FFFFFF;
  --on-dark-mid:rgba(255,255,255,.72);
  --on-dark-low:rgba(255,255,255,.44);
  --on-dark-line:rgba(255,255,255,.14);

  /* 서체는 Pretendard 한 벌. --serif 는 「제목용」 별칭으로만 남긴다. */
  --serif:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
          "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;

  --wrap:1200px;
  --wrap-mid:1000px;
  --gut:clamp(20px,4vw,40px);

  --sec-y:clamp(56px,6.2vw,100px);
  --sec-y-tight:clamp(44px,5vw,76px);

  /* 라운딩 없음 — 각진 에디토리얼 */
  --r:0;
  --r-sm:0;
  --r-lg:0;
  --pill:0;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* == 01 리셋 ======================================================== */
#yr-root *,
#yr-root *::before,
#yr-root *::after{box-sizing:border-box}
#yr-root{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
#yr-root{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:15.5px;line-height:1.85;
  letter-spacing:-.005em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
#yr-root img{max-width:100%;display:block;border:0}
#yr-root a{color:inherit;text-decoration:none}
#yr-root button{font:inherit;color:inherit}
#yr-root table{border-collapse:collapse;width:100%}
#yr-root figure,
#yr-root figcaption,
#yr-root blockquote{margin:0}
#yr-root hr{border:0;margin:0}
#yr-root ::selection{background:var(--ink);color:#fff}

/* == 02 타이포 — 제목은 작게, 본문은 읽히게 ========================== */
#yr-root .h1,
#yr-root .h2,
#yr-root .h3{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  letter-spacing:-.032em;margin:0;
}
#yr-root .h1{font-size:clamp(30px,3.8vw,52px);line-height:1.18;letter-spacing:-.04em}
#yr-root .h2{font-size:clamp(22px,2.1vw,30px);line-height:1.45}
#yr-root .h3{font-size:clamp(18px,1.35vw,21px);line-height:1.5}
#yr-root .h4{
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.55;
  letter-spacing:-.012em;color:var(--ink);margin:0;
}

#yr-root .eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 22px;
}
#yr-root .eyebrow--orange{color:var(--orange)}
#yr-root .eyebrow--onDark{color:var(--on-dark-low)}

#yr-root .lead{font-size:16px;line-height:2;color:var(--body);max-width:60ch;margin:0}
#yr-root .lead--onDark{color:var(--on-dark-mid)}

#yr-root .note{font-size:13.5px;line-height:1.9;color:var(--muted);margin:0}
#yr-root .note--onDark{color:var(--on-dark-low)}
#yr-root .note strong{color:var(--ink);font-weight:700}

#yr-root .rule{display:none}       /* 장식 선은 쓰지 않는다 */

/* == 03 레이아웃/섹션 =============================================== */
#yr-root .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
#yr-root .wrap--mid{max-width:var(--wrap-mid)}
#yr-root .wrap--wide{max-width:1680px}

#yr-root .sec{padding-block:var(--sec-y);position:relative}
#yr-root .sec--tight{padding-block:var(--sec-y-tight)}

#yr-root .sec--paper,
#yr-root .sec--white,
#yr-root .sec--cream{background:transparent}
/* 밝은 섹션끼리는 배경 대신 얇은 선 한 줄로 이어진다 */
#yr-root .sec:not(.sec--ink):not(.sec--blue) + .sec:not(.sec--ink):not(.sec--blue){padding-top:0}
#yr-root .sec:not(.sec--ink):not(.sec--blue) + .sec:not(.sec--ink):not(.sec--blue) > .wrap:first-child::before{
  content:"";display:block;border-top:1px solid var(--line);margin-bottom:var(--sec-y)}
#yr-root .sec--ink{background:var(--ink);color:var(--on-dark-mid)}
#yr-root .sec--blue{background:var(--blue-deep);color:var(--on-dark-mid)}
#yr-root .sec--ink .h1,
#yr-root .sec--ink .h2,
#yr-root .sec--ink .h3,
#yr-root .sec--ink .h4,
#yr-root .sec--blue .h1,
#yr-root .sec--blue .h2,
#yr-root .sec--blue .h3,
#yr-root .sec--blue .h4{color:#fff}

/* == 04 헤더 ======================================================== */
#yr-root .site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
#yr-root .site-header__in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:76px;transition:height .3s var(--ease)}
#yr-root .site-header.is-stuck .site-header__in{height:60px}
#yr-root .brand{display:flex;align-items:center;flex:0 0 auto}
#yr-root .brand img{height:30px;width:auto}
#yr-root .brand__light{display:block}
#yr-root .brand__dark{display:none}
#yr-root .site-header.is-stuck .brand__light{display:none}
#yr-root .site-header.is-stuck .brand__dark{display:block}

#yr-root .nav{display:flex;align-items:center;gap:4px}
#yr-root .nav a{
  position:relative;font-size:14px;font-weight:600;color:rgba(255,255,255,.84);
  padding:8px 12px;transition:color .2s;
}
#yr-root .nav a:not(.btn-nav)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
#yr-root .nav a:not(.btn-nav):hover::after,
#yr-root .nav a.is-current::after{transform:scaleX(1)}
#yr-root .nav a:hover{color:#fff}
#yr-root .nav a.is-current{color:#fff}
#yr-root .nav .btn-nav{margin-left:8px;background:#fff;color:var(--ink);
  padding:9px 18px;font-weight:700}
#yr-root .nav .btn-nav:hover{background:var(--ink);color:#fff}

#yr-root .site-header.is-stuck{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
}
#yr-root .site-header.is-stuck .nav a{color:var(--body)}
#yr-root .site-header.is-stuck .nav a:hover{color:var(--ink)}
#yr-root .site-header.is-stuck .nav a.is-current{color:var(--ink)}
#yr-root .site-header.is-stuck .nav .btn-nav{background:var(--ink);color:#fff}

#yr-root .nav-toggle{display:none;width:42px;height:42px;border:0;background:transparent;
  cursor:pointer;position:relative}
#yr-root .nav-toggle span,
#yr-root .nav-toggle::before,
#yr-root .nav-toggle::after{
  content:"";position:absolute;left:11px;width:20px;height:1.5px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s;
}
#yr-root .nav-toggle span{top:20px}
#yr-root .nav-toggle::before{top:14px}
#yr-root .nav-toggle::after{top:26px}
#yr-root .site-header.is-stuck .nav-toggle span,
#yr-root .site-header.is-stuck .nav-toggle::before,
#yr-root .site-header.is-stuck .nav-toggle::after{background:var(--ink)}
#yr-root .nav-toggle[aria-expanded="true"] span{opacity:0}
#yr-root .nav-toggle[aria-expanded="true"]::before{top:20px;transform:rotate(45deg)}
#yr-root .nav-toggle[aria-expanded="true"]::after{top:20px;transform:rotate(-45deg)}

/* == 05 히어로 ====================================================== */
#yr-root .hero{position:relative;min-height:min(94svh,780px);display:flex;align-items:flex-end;
  background:#0B0D0F;overflow:hidden;isolation:isolate}
#yr-root .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
#yr-root .hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#yr-root .hero__video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,177.78svh);height:max(56.25vw,100svh);
  border:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);
}
#yr-root .hero__video.is-ready{opacity:1}
#yr-root .hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(8,9,11,.86) 0%,rgba(8,9,11,.50) 34%,
                    rgba(8,9,11,.18) 68%,rgba(8,9,11,.30) 100%),
    linear-gradient(100deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.22) 55%,
                    rgba(8,9,11,0) 100%);
}
#yr-root .hero__in{position:relative;z-index:2;width:100%;padding-block:140px 108px}
#yr-root .hero__title{
  font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(32px,4.2vw,58px);line-height:1.16;letter-spacing:-.04em;
  margin:0;max-width:17ch;
}
#yr-root .hero__sub{margin:26px 0 0;max-width:54ch;font-size:15.5px;line-height:1.95;
  color:rgba(255,255,255,.76)}
#yr-root .hero__foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#yr-root .hero__caption{
  margin-top:30px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;color:rgba(255,255,255,.5);max-width:72ch;
}
#yr-root .hero__caption a{color:rgba(255,255,255,.78);text-decoration:underline;white-space:nowrap;
  text-underline-offset:3px}

#yr-root .hero__strip{display:flow-root;position:relative;z-index:20;background:var(--white)}
#yr-root .hero__strip .strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);
  padding-block:26px 28px;border-bottom:1px solid var(--line);
}
#yr-root .strip__cell{padding:0}
#yr-root .strip__k{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink);
  line-height:1.4;letter-spacing:-.02em;margin:0}
#yr-root .strip__v{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}

/* == 06 페이지헤드 ================================================== */
#yr-root .pagehead{position:relative;background:#0B0D0F;overflow:hidden;isolation:isolate;
  min-height:clamp(480px,66vh,760px);display:flex;align-items:flex-end}
#yr-root .pagehead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#yr-root .pagehead__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(8,9,11,.90) 0%,rgba(8,9,11,.58) 44%,rgba(8,9,11,.24) 100%),
    linear-gradient(100deg,rgba(8,9,11,.70),rgba(8,9,11,.14));
}
#yr-root .pagehead__in{position:relative;z-index:2;width:100%;padding-block:150px 52px}
#yr-root .pagehead .h1{color:#fff}
#yr-root .pagehead .lead{color:rgba(255,255,255,.78)}
#yr-root .pagehead__meta{margin-top:24px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.20);
  font-size:14px;font-weight:700;color:#fff}
#yr-root .pagehead--ink{background:var(--ink);min-height:auto;display:block}
#yr-root .pagehead--ink .pagehead__in{padding-block:170px 82px}

#yr-root .toc{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px}
#yr-root .toc a{
  padding:8px 15px;border-radius:var(--pill);font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.80);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s,color .2s;
}
#yr-root .toc a:hover{background:rgba(255,255,255,.2);color:#fff}

/* == 07 글래스 ====================================================== */
#yr-root .card.glass{padding:clamp(24px,2.4vw,34px);border-top:0;background:rgba(10,11,13,.58);border:1px solid rgba(255,255,255,.14)}
#yr-root .card--onDark .h3,
#yr-root .card--onDark .h4,
#yr-root .card--onDark .card__t,
#yr-root .band .h3{color:#fff}
#yr-root .card.glass .card__d{color:rgba(255,255,255,.86)}
#yr-root .glass{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}
#yr-root .glass--light{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
#yr-root .glass--dark{
  background:rgba(14,16,19,.62);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #yr-root .glass{background:rgba(22,24,28,.74)}
  #yr-root .glass--light{background:rgba(255,255,255,.95)}
  #yr-root .glass--dark{background:rgba(14,16,19,.88)}
}

/* == 08 버튼 ======================================================== */
#yr-root .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--pill);border:1px solid transparent;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;background:var(--ink);color:#fff;
  transition:background .22s,color .22s,border-color .22s;
}
#yr-root .btn:hover{background:var(--orange)}
#yr-root .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
#yr-root .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#yr-root .btn--onDark{background:#fff;color:var(--ink)}
#yr-root .btn--onDark:hover{background:var(--orange);color:#fff}
#yr-root .btn--ghostDark{background:rgba(255,255,255,.06);color:#fff;
  border-color:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#yr-root .btn--ghostDark:hover{background:#fff;color:var(--ink);border-color:#fff}
#yr-root .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
#yr-root .btn-row--center{justify-content:center}

#yr-root .tlink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
#yr-root .tlink::after{content:"→";font-size:12px}
#yr-root .tlink:hover{color:var(--orange);border-color:var(--orange)}

/* == 09 섹션헤드 ==================================================== */
#yr-root .sechead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(32px,6vw,120px);align-items:end}
#yr-root .sechead > .eyebrow,
#yr-root .sechead > .h2,
#yr-root .sechead > .h3{grid-column:1}
#yr-root .sechead > .h2{max-width:24ch}
#yr-root .sechead > .lead{grid-column:2;grid-row:1 / span 2;margin:0;align-self:end;max-width:52ch}
#yr-root .sechead > .lead:only-child{grid-column:1}
#yr-root .sechead > :nth-child(n+4){grid-column:1 / -1}
#yr-root .duo{display:grid;grid-template-columns:minmax(220px,.8fr) 1.5fr;
  gap:clamp(32px,5vw,80px);align-items:start}

/* == 10 카드 — 테두리 장식 없음 ===================================== */
#yr-root .grid{display:grid;gap:clamp(24px,3vw,44px)}
#yr-root .g-2{grid-template-columns:repeat(2,1fr)}
#yr-root .g-3{grid-template-columns:repeat(3,1fr)}
#yr-root .g-4{grid-template-columns:repeat(4,1fr)}
#yr-root .g-5{grid-template-columns:repeat(5,1fr)}

#yr-root .card{
  background:transparent;border-radius:0;
  padding:22px 0 0;border:0;border-top:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
#yr-root .card:hover{border-top-color:var(--ink)}
#yr-root .card--flat{background:transparent;border:0;padding:0}
#yr-root .card--tint{background:transparent}
#yr-root .card--outline{background:transparent;border:1px solid var(--line)}
#yr-root .card--onDark{background:transparent;border-top-color:var(--on-dark-line)}
#yr-root .card--onDark:hover{border-top-color:#fff}
#yr-root .card--hover{border-top:0;padding-top:0}
#yr-root .card--hover .media img{transition:transform 1.1s var(--ease)}
#yr-root .card--hover:hover .media img{transform:scale(1.03)}
/* 예전 강조선 클래스는 무효화 — 마크업 호환용 */
#yr-root .card--edge,
#yr-root .card--edge-blue,
#yr-root .card--edge-orange{border-top-width:1px}

#yr-root .card__num{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--faint);margin:0 0 20px}
#yr-root .card__num--blue,
#yr-root .card__num--orange,
#yr-root .card__num--onDark{color:var(--faint)}
#yr-root .card__label{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
#yr-root .card__label--onDark{color:rgba(255,255,255,.58)}
#yr-root .card__t{margin:0 0 14px}
#yr-root .card__d{margin:0;font-size:14.5px;line-height:1.95;color:var(--body)}
#yr-root .card--onDark .card__d{color:var(--on-dark-mid)}
#yr-root .card__note{margin:18px 0 0;font-size:13px;font-weight:700;color:var(--muted)}

/* == 11 스플릿 ====================================================== */
#yr-root .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,68px);
  align-items:center}
#yr-root .split--rev .split__media{order:2}
#yr-root .split__body{max-width:56ch}

#yr-root .media{border-radius:var(--r);overflow:hidden;background:var(--line-soft);position:relative}
#yr-root .media img{width:100%;height:100%;object-fit:cover;display:block}
#yr-root .media--tall{aspect-ratio:4/5}
#yr-root .media--box{aspect-ratio:4/3}
#yr-root .media--wide{aspect-ratio:16/9}

#yr-root .media-wrap{position:relative}
#yr-root .media-cap{position:absolute;left:0;right:0;bottom:0;
  padding:56px 24px 22px;
  background:linear-gradient(to top,rgba(6,7,9,.78) 0%,rgba(6,7,9,.42) 55%,rgba(6,7,9,0) 100%)}
#yr-root .media-cap__k{font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 6px}
#yr-root .media-cap__t{font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;
  margin:0;line-height:1.5}

/* 화면 끝까지 흘러나가는 사진 — 좌/우 두 방향 */
#yr-root .bleed-right{display:grid;grid-template-columns:1fr minmax(0,50%);
  gap:clamp(28px,4.4vw,68px);align-items:center;
  margin-right:calc((100% - 100vw)/2)}
#yr-root .bleed-right .media{border-radius:0}
#yr-root .bleed-left{display:grid;grid-template-columns:minmax(0,50%) 1fr;
  gap:clamp(28px,4.4vw,68px);align-items:center;
  margin-left:calc((100% - 100vw)/2)}
#yr-root .bleed-left .media{border-radius:0}

/* 가로로 넓게 눕히는 이미지 */
#yr-root .figure-wide{border-radius:var(--r);overflow:hidden;background:var(--line-soft);
  position:relative}
#yr-root .figure-wide img{width:100%;height:100%;object-fit:cover;display:block}
#yr-root .figure-wide--cine{aspect-ratio:21/9}
#yr-root .figure-wide--169{aspect-ratio:16/9}
#yr-root .figure-wide--pano{aspect-ratio:3/1}
#yr-root .figure-wide--half{aspect-ratio:16/7}

/* 사진 두 장을 어긋나게 겹치기 */
#yr-root .stagger{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,32px);align-items:end}
#yr-root .stagger .media:first-child{aspect-ratio:4/5}
#yr-root .stagger .media:last-child{aspect-ratio:1/1;margin-bottom:clamp(20px,4vw,56px)}

/* == 12 모자이크 — 가로 카드는 2칸을 차지한다 ======================= */
#yr-root .mosaic{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(96px,8.6vw,136px);gap:4px}

#yr-root .tile{position:relative;overflow:hidden;background:var(--line-soft)}
#yr-root .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
#yr-root .tile:hover img{transform:scale(1.04)}
#yr-root .tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,9,11,.86) 0%,rgba(8,9,11,.56) 34%,
             rgba(8,9,11,.16) 64%,rgba(8,9,11,0) 90%)}
#yr-root .tile__body{position:absolute;left:0;right:0;top:0;z-index:2;
  padding:clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px) 0}
#yr-root .tile__area{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 10px}
#yr-root .tile__spot{font-family:var(--serif);font-size:clamp(19px,1.7vw,25px);font-weight:700;
  color:#fff;margin:0;line-height:1.34;letter-spacing:-.03em}
#yr-root .tile__why{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.80);line-height:1.8;
  max-width:34ch}

/* 가로 2칸짜리 큰 카드 */
#yr-root .tile--w1{grid-column:1 / 3;grid-row:1 / 4}
#yr-root .tile--w2{grid-column:1 / 4;grid-row:8 / 11}
/* 세로 카드 */
#yr-root .tile--t1{grid-column:3;grid-row:1 / 5}
#yr-root .tile--t2{grid-column:1;grid-row:4 / 8}
#yr-root .tile--t3{grid-column:2;grid-row:4 / 8}
#yr-root .tile--t4{grid-column:3;grid-row:5 / 8}

/* == 13 밴드 ======================================================== */
#yr-root .band{position:relative;overflow:hidden;isolation:isolate;background:#0B0D0F}
#yr-root .band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#yr-root .band__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.60) 40%,
             rgba(8,9,11,.14) 78%,rgba(8,9,11,.06) 100%)}
#yr-root .band__in{position:relative;z-index:2;padding-block:clamp(84px,10vw,150px)}
#yr-root .band--tight .band__in{padding-block:clamp(56px,6vw,92px)}
#yr-root .band--rhythm .band__scrim{background:linear-gradient(to bottom,
  rgba(8,9,11,.84) 0%,rgba(8,9,11,.52) 42%,rgba(8,9,11,.66) 100%)}
#yr-root .band .h2{color:#fff}

/* == 14 숫자 ======================================================== */
#yr-root .figures{display:grid;gap:0}
#yr-root .figure-row{display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;
  gap:clamp(18px,3vw,44px);align-items:start;
  padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line)}
#yr-root .figure-row:first-child{padding-top:0}
#yr-root .figure-row:last-child{border-bottom:0;padding-bottom:0}
#yr-root .figure-row .n{font-family:var(--serif);font-weight:700;
  font-size:clamp(40px,5.2vw,72px);line-height:1.1;letter-spacing:-.045em;
  color:var(--ink);margin:0}
#yr-root .figure-row .n .u{font-size:.5em;letter-spacing:0;margin-left:.08em;color:var(--muted)}
#yr-root .figure-row .d{margin:0;padding-top:.5em;font-size:14px;line-height:1.8;
  color:var(--body);max-width:48ch}

#yr-root .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)}
#yr-root .stat{border-top:1px solid var(--line);padding-top:26px}
#yr-root .stat__n{font-family:var(--serif);font-weight:700;font-size:clamp(36px,4.4vw,60px);
  line-height:1.1;letter-spacing:-.045em;color:var(--ink);margin:0}
#yr-root .stat__l{margin:18px 0 0;font-size:13px;line-height:1.85;color:var(--body)}

/* == 15 스텝 — 칸마다 자기 윗선만 (세로 구분선 없음) ================ */
#yr-root .steps{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,38px)}
#yr-root .steps--3{grid-template-columns:repeat(3,1fr)}
#yr-root .step{padding-top:24px;border-top:1px solid var(--line)}
#yr-root .step__k{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px}
#yr-root .step__t{font-family:var(--serif);font-size:16.5px;font-weight:700;color:var(--ink);
  margin:0 0 12px;line-height:1.5;letter-spacing:-.028em}
#yr-root .step__d{margin:0;font-size:14px;line-height:1.9;color:var(--body)}
#yr-root .steps--onDark .step{border-top-color:var(--on-dark-line)}
#yr-root .steps--onDark .step__t{color:#fff}
#yr-root .steps--onDark .step__d{color:var(--on-dark-mid)}

/* == 16 표 ========================================================== */
#yr-root .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r);background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#yr-root .table{min-width:620px;font-size:14.5px}
#yr-root .table th{text-align:left;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  padding:20px 24px;border-bottom:1px solid var(--line);white-space:nowrap}
#yr-root .table td{padding:20px 24px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;line-height:1.8}
#yr-root .table tr:last-child td{border-bottom:0}
#yr-root .table .k{font-weight:700;color:var(--ink);white-space:nowrap}
#yr-root .table .m{color:var(--body);font-size:14px}

#yr-root .tag{display:inline-block;padding:4px 11px;border-radius:var(--pill);
  font-size:11px;font-weight:700;white-space:nowrap;background:var(--ink);color:#fff}
#yr-root .tag--grey{background:var(--line);color:var(--muted)}
#yr-root .tag--blue{background:var(--line-soft);color:var(--muted)}
#yr-root .tag--now{background:var(--orange);color:#fff}

/* == 17 정보/체크/콜아웃 ============================================ */
#yr-root .info{border-top:1px solid var(--line)}
#yr-root .info__row{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--line-soft)}
#yr-root .info__k{font-size:12.5px;font-weight:700;color:var(--ink);padding-top:3px;line-height:1.6}
#yr-root .info__v{font-size:14.5px;line-height:1.9;color:var(--body);margin:0}
#yr-root .info__v a{color:var(--blue);font-weight:600;border-bottom:1px solid rgba(1,58,165,.28)}
#yr-root .info--onDark{border-top-color:var(--on-dark-line)}
#yr-root .info--onDark .info__row{border-bottom-color:var(--on-dark-line)}
#yr-root .info--onDark .info__k{color:#fff}
#yr-root .info--onDark .info__v{color:var(--on-dark-mid)}

#yr-root .checks{list-style:none;margin:0;padding:0}
#yr-root .checks li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.95;
  color:var(--body)}
#yr-root .checks li+li{margin-top:16px}
#yr-root .checks li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
  background:var(--faint)}
#yr-root .checks li strong{color:var(--ink);font-weight:700}
#yr-root .checks--orange li::before{background:var(--orange)}
#yr-root .checks--onDark li{color:var(--on-dark-mid)}
#yr-root .checks--onDark li::before{background:rgba(255,255,255,.35)}
#yr-root .checks--onDark li strong{color:#fff}

#yr-root .callout{
  padding:clamp(22px,2.4vw,30px) clamp(24px,2.8vw,34px);
  border-radius:var(--r);background:var(--cream);
  border:0;
  font-size:15px;line-height:1.85;color:var(--body);
}
#yr-root .callout--orange{}                 /* 색 구분선 없음 */
#yr-root .callout--onDark{background:rgba(255,255,255,.045);border-color:var(--on-dark-line);
  color:var(--on-dark-mid)}
#yr-root .callout strong{color:var(--ink);font-weight:700}
#yr-root .callout--onDark strong{color:#fff}
#yr-root .callout__k{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* == 18 데이 블록 =================================================== */
#yr-root .days{border-top:1px solid var(--line)}
#yr-root .day{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(26px,3.6vw,60px);
  align-items:start;padding-block:clamp(38px,4.4vw,68px);
  border-bottom:1px solid var(--line)}
#yr-root .day:nth-child(even) .day__media{order:2}
#yr-root .day__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  background:var(--line-soft)}
#yr-root .day__media img{width:100%;height:100%;object-fit:cover}
#yr-root .day__tag{position:absolute;left:16px;top:16px;padding:6px 13px;
  border-radius:var(--pill);font-size:10.5px;font-weight:700;letter-spacing:.13em;color:#fff}
#yr-root .day__date{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
#yr-root .day__h{margin:0 0 16px}
#yr-root .day__lead{font-size:15px;line-height:1.95;color:var(--body);margin:0 0 30px;max-width:48ch}
#yr-root .slots{border-top:1px solid var(--line-soft)}
#yr-root .slot{display:grid;grid-template-columns:minmax(74px,100px) 1fr;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--line-soft)}
#yr-root .slot:last-child{border-bottom:0}
#yr-root .slot__k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);
  padding-top:4px;line-height:1.6}
#yr-root .slot__t{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 7px;line-height:1.6}
#yr-root .slot__d{margin:0;font-size:14px;line-height:1.9;color:var(--body)}

/* == 19 비교 ======================================================== */
#yr-root .compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
#yr-root .compare__col{padding:clamp(26px,3vw,40px);border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid var(--on-dark-line)}
#yr-root .compare__col--after{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24)}
#yr-root .compare__when{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-low);margin:0 0 18px}
#yr-root .compare__col--after .compare__when{color:rgba(255,255,255,.72)}
#yr-root .compare__q{font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.4vw,19px);
  line-height:1.75;letter-spacing:-.022em;color:rgba(255,255,255,.72);margin:0}
#yr-root .compare__col--after .compare__q{color:#fff}

/* == 20 FAQ ========================================================= */
#yr-root .faq{border-top:1px solid var(--line)}
#yr-root .faq details{border-bottom:1px solid var(--line-soft)}
#yr-root .faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-size:15px;font-weight:700;color:var(--ink);line-height:1.6;transition:color .2s}
#yr-root .faq summary::-webkit-details-marker{display:none}
#yr-root .faq summary:hover{color:var(--muted)}
#yr-root .faq summary::after{content:"";position:absolute;right:6px;top:33px;width:12px;height:1.5px;
  background:var(--ink)}
#yr-root .faq summary::before{content:"";position:absolute;right:11px;top:28px;width:1.5px;height:12px;
  background:var(--ink);transition:opacity .25s,transform .25s var(--ease)}
#yr-root .faq details[open] summary::before{opacity:0;transform:rotate(90deg)}
#yr-root .faq__a{margin:0;padding:0 0 28px;font-size:14.5px;line-height:1.95;color:var(--body);
  max-width:62ch}

/* == 21 폼 ========================================================== */
#yr-root .form{display:grid;gap:18px}
#yr-root .form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#yr-root .field{display:grid;gap:8px}
#yr-root .field label{font-size:12.5px;font-weight:700;color:var(--ink)}
#yr-root .field .req{color:var(--orange);margin-left:3px}
#yr-root .field input,
#yr-root .field select,
#yr-root .field textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--white);transition:border-color .2s,box-shadow .2s;
}
#yr-root .field textarea{min-height:140px;resize:vertical;line-height:1.8}
#yr-root .field input::placeholder,
#yr-root .field textarea::placeholder{color:var(--faint)}
#yr-root .field input:focus,
#yr-root .field select:focus,
#yr-root .field textarea:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,19,21,.07)}
#yr-root .field__help{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7}
#yr-root .form__note{padding:16px 18px;border-radius:var(--r-sm);background:var(--paper);
  font-size:12.5px;line-height:1.75;color:var(--muted)}

/* 메일 양식 카드 */
#yr-root .tpl{padding:clamp(28px,3vw,44px);background:var(--cream);border-top:0}
#yr-root .tpl__k{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#yr-root .tpl__v{margin:0 0 26px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.6}
#yr-root .tpl__list{margin:0;padding:0;list-style:none;counter-reset:tpl;border-top:1px solid var(--line-soft)}
#yr-root .tpl__list li{counter-increment:tpl;display:grid;grid-template-columns:28px 1fr;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.8;color:var(--body)}
#yr-root .tpl__list li::before{content:counter(tpl,decimal-leading-zero);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--faint);padding-top:5px}
#yr-root .tpl__list strong{color:var(--ink);font-weight:700;margin-right:8px}
#yr-root .tpl__list span{color:var(--muted);font-size:13.5px}
#yr-root .tpl__foot{margin:22px 0 0;font-size:12.5px;line-height:1.8;color:var(--muted)}

/* == 21b 사진 CTA 밴드 ============================================== */
#yr-root .cta{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:clamp(440px,52vh,600px);display:flex;align-items:center}
#yr-root .cta__bg{position:absolute;inset:0;z-index:-2}
#yr-root .cta__bg img{width:100%;height:100%;object-fit:cover}
#yr-root .cta__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.46) 55%,rgba(8,9,11,.30) 100%)}
#yr-root .cta--right .cta__scrim{background:linear-gradient(270deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.46) 55%,rgba(8,9,11,.30) 100%)}
#yr-root .cta--center .cta__scrim{background:rgba(8,9,11,.50)}
#yr-root .cta__in{position:relative;width:100%;padding-block:clamp(64px,7vw,104px)}
#yr-root .cta__panel{max-width:600px;padding:clamp(30px,3.4vw,48px);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
#yr-root .cta--right .cta__panel{margin-left:auto}
#yr-root .cta--center .cta__panel{margin-inline:auto;text-align:center;max-width:680px}
#yr-root .cta--center .cta__panel .lead{margin-inline:auto}
#yr-root .cta .h2{color:#fff;max-width:26ch;word-break:keep-all}
#yr-root .cta .lead{color:rgba(255,255,255,.80)}
#yr-root .cta .btn-row{margin-top:30px}
#yr-root .cta--center .btn-row{justify-content:center}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #yr-root .cta__panel{background:rgba(8,9,11,.72)}}

/* == 21c 저녁의 기록 ================================================= */
#yr-root .recs{border-top:1px solid var(--line)}
#yr-root .rec{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;
  border-bottom:1px solid var(--line-soft)}
#yr-root .rec__n{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--faint);padding-top:6px}
#yr-root .rec__t{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:-.02em}
#yr-root .rec__d{margin:0;font-size:14.5px;line-height:1.9;color:var(--body)}

/* == 21d 소개 — 원칙 목록 / 어긋난 프로그램 ============================ */
#yr-root .principles{border-top:1px solid var(--line)}
#yr-root .principle{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:26px 0;
  border-bottom:1px solid var(--line-soft)}
#yr-root .principle__n{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--faint);padding-top:7px}
#yr-root .principle__t{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.45;letter-spacing:-.028em}
#yr-root .principle__d{margin:0;font-size:14.5px;line-height:1.95;color:var(--body);max-width:52ch}
#yr-root .progs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
#yr-root .progs > a{display:block}
#yr-root .progs > a:nth-child(2){padding-top:clamp(56px,8vw,128px)}
#yr-root .progs .media{overflow:hidden;background:var(--line-soft)}
#yr-root .progs .media img{transition:transform 1.1s var(--ease)}
#yr-root .progs > a:hover .media img{transform:scale(1.03)}
#yr-root .progs .media--45{aspect-ratio:4/5}
#yr-root .progs .media--sq{aspect-ratio:1/1}
#yr-root .progs__body{padding-top:22px}
#yr-root .progs__body .card__label{margin-bottom:10px}
#yr-root .progs__body .card__d{margin-top:12px}

/* == 22 CTA ========================================================= */
#yr-root .ctaCard{border-radius:var(--r-lg);background:var(--blue-deep);color:#fff;
  padding:clamp(40px,5vw,76px) clamp(28px,4vw,64px);position:relative;overflow:hidden}
#yr-root .ctaCard .h2{color:#fff;max-width:30ch;word-break:keep-all}
#yr-root .ctaCard--center{text-align:center}
#yr-root .ctaCard--center .h2,
#yr-root .ctaCard--center .lead{margin-inline:auto}
#yr-root .ctaCard--ink{background:var(--ink)}

/* == 23 푸터 ======================================================== */
#yr-root .site-footer{background:var(--white);border-top:1px solid var(--line);
  padding-block:clamp(56px,6vw,88px) 0}
#yr-root .site-footer .footer__bottom{margin-bottom:0}
#yr-root .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(26px,3.6vw,48px)}
#yr-root .footer__brand p{margin:18px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted)}
#yr-root .footer__brand img{height:28px}
#yr-root .footer h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px}
#yr-root .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#yr-root .footer ul,
#yr-root .footer li{font-size:14px;color:var(--body)}
#yr-root .footer ul a{transition:color .2s}
#yr-root .footer ul a:hover{color:var(--orange)}
#yr-root .footer__bottom{margin-top:clamp(40px,4.4vw,64px);padding:22px 0 26px;
  border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px 26px;
  font-size:12px;color:var(--faint)}

/* == 23b 키보드 포커스 ============================================ */
#yr-root a:focus-visible,
#yr-root button:focus-visible,
#yr-root .btn:focus-visible,
#yr-root summary:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px}
#yr-root .hero a:focus-visible,
#yr-root .pagehead a:focus-visible,
#yr-root .band a:focus-visible,
#yr-root .sec--ink a:focus-visible,
#yr-root .sec--blue a:focus-visible,
#yr-root .ctaCard a:focus-visible,
#yr-root .site-header:not(.is-stuck) a:focus-visible{outline-color:#fff}

/* == 23c 스티키 서브 내비 ============================================ */
#yr-root .subnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line)}
#yr-root .subnav__in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#yr-root .subnav__in::-webkit-scrollbar{display:none}
#yr-root .subnav a{position:relative;flex:0 0 auto;padding:16px 14px;font-size:13px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:color .2s}
#yr-root .subnav a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
#yr-root .subnav a:hover{color:var(--ink)}
#yr-root .subnav a.is-active{color:var(--ink)}
#yr-root .subnav a.is-active::after{transform:scaleX(1)}
#yr-root .site-header.is-stuck ~ .subnav{top:60px}

/* == 23d 접기 — 날짜별 상세 / 표 ==================================== */
#yr-root .days{border-top:1px solid var(--line)}
#yr-root .dayfold{border-bottom:1px solid var(--line)}
#yr-root .dayfold__s{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:72px 150px minmax(0,1fr) 28px;gap:20px;align-items:baseline;
  padding:22px 0;position:relative}
#yr-root .dayfold__s::-webkit-details-marker{display:none}
#yr-root .dayfold__n{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--orange)}
#yr-root .dayfold__date{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
#yr-root .dayfold__t{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.45}
#yr-root .dayfold__lead{grid-column:3;font-size:14px;color:var(--muted);line-height:1.8;margin-top:2px}
#yr-root .dayfold__s::after{content:"";grid-column:4;grid-row:1;justify-self:end;width:12px;height:12px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:2px}
#yr-root .dayfold[open] .dayfold__s::after{transform:rotate(-135deg)}
#yr-root .dayfold__s:hover .dayfold__t{color:var(--orange)}
#yr-root .dayfold .day{padding:8px 0 44px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#yr-root .dayfold .day__date,
#yr-root .dayfold .day__h,
#yr-root .dayfold .day__lead{display:none}
#yr-root .fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#yr-root .fold__s{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:15px;font-weight:700;color:var(--ink)}
#yr-root .fold__s::-webkit-details-marker{display:none}
#yr-root .fold__s::after{content:"";position:absolute;right:8px;top:24px;width:11px;height:11px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);
  transition:transform .3s var(--ease)}
#yr-root .fold[open] .fold__s::after{transform:rotate(-135deg);top:30px}
#yr-root .fold__b{padding:0 0 28px}

/* == 23e 홈 보강 — 파트너 행 / 스펙 / 흐름 화살표 ===================== */
#yr-root .partners{display:flex;flex-wrap:wrap;gap:14px clamp(22px,3vw,44px);align-items:center;
  padding:18px 0 4px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
#yr-root .partners__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
#yr-root .spec{margin:22px 0 0;display:grid;gap:0;border-top:1px solid var(--line-soft)}
#yr-root .spec > div{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px;line-height:1.7}
#yr-root .spec dt{margin:0;font-weight:700;color:var(--ink)}
#yr-root .spec dd{margin:0;color:var(--body)}
#yr-root .flow{position:relative}
@media (min-width:1081px){
  #yr-root .flow > .card{position:relative}
  #yr-root .flow > .card:not(:last-child)::after{content:"→";position:absolute;right:calc(-1 * clamp(24px,3vw,44px) / 2 - 7px);
    top:64px;font-size:15px;color:var(--faint)}
}
#yr-root .tlink--onDark{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
#yr-root .tlink--onDark:hover{color:#fff;border-bottom-color:#fff}
#yr-root .hero__foot .tlink{margin-left:8px}

/* 넓은 화면에서만 따라오는 요소 (모바일 1단에서는 고정하면 화면을 가린다) */
@media (min-width:861px){ #yr-root .sticky-md{position:sticky;top:110px} }

/* == 23f 장부식 요약 (What / Why / How / Who) ========================= */
#yr-root .ledger{border-top:1px solid var(--line)}
#yr-root .ledger__row{display:grid;grid-template-columns:minmax(120px,.28fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);
  padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line)}
#yr-root .ledger__k{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);padding-top:4px}
#yr-root .ledger__v{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.7;letter-spacing:-.02em;color:var(--ink);max-width:56ch}

/* == 24 모션 ======================================================== */
#yr-root .reveal{opacity:0;transform:translateY(14px)}
#yr-root .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
#yr-root .reveal.d1{transition-delay:.06s}
#yr-root .reveal.d2{transition-delay:.12s}
#yr-root .reveal.d3{transition-delay:.18s}
#yr-root .reveal.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  #yr-root *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #yr-root .reveal{opacity:1!important;transform:none!important}
}

/* == 25 반응형 ====================================================== */
@media (max-width:1080px){
  #yr-root .g-4,
#yr-root .g-5{grid-template-columns:repeat(2,1fr)}
  #yr-root .stats,
#yr-root .steps{grid-template-columns:repeat(2,1fr)}
  #yr-root .steps--3{grid-template-columns:repeat(3,1fr)}
  #yr-root .g-5 > :last-child{grid-column:span 2}
  #yr-root .duo{grid-template-columns:1fr;gap:28px}
  #yr-root .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  #yr-root .tile--w1,
#yr-root .tile--w2,
#yr-root .tile--t1,
#yr-root .tile--t2,
#yr-root .tile--t3,
#yr-root .tile--t4{
    grid-column:auto;grid-row:auto}
  #yr-root .tile--w1,
#yr-root .tile--w2{grid-column:span 2;aspect-ratio:16/8}
  #yr-root .tile--w2{aspect-ratio:16/7}
  #yr-root .tile--t1,
#yr-root .tile--t2,
#yr-root .tile--t3,
#yr-root .tile--t4{aspect-ratio:3/4}
  #yr-root .hero__strip .strip{grid-template-columns:repeat(2,1fr)}
  #yr-root .bleed-right,
#yr-root .bleed-left{grid-template-columns:1fr}
  #yr-root .progs{gap:28px}
  #yr-root .progs > a:nth-child(2){padding-top:48px}
  #yr-root .bleed-right{margin-right:0}
  #yr-root .bleed-left{margin-left:0}
}
@media (max-width:860px){
  #yr-root{scroll-padding-top:70px}
  #yr-root .site-header__in{height:64px}
  #yr-root .nav-toggle{display:block}
  #yr-root .nav{
    position:fixed;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;
    gap:2px;padding:12px var(--gut) 22px;background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s var(--ease);
  }
  #yr-root .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  #yr-root .nav a{color:var(--ink);padding:13px 12px;font-size:15.5px;border-radius:var(--r-sm)}
  #yr-root .nav .btn-nav{margin:8px 0 0;justify-content:center;background:var(--ink);color:#fff}
  #yr-root .site-header.is-stuck .nav a{color:var(--ink)}

  #yr-root .sechead{grid-template-columns:1fr}
  #yr-root .sechead > .lead{grid-column:1;grid-row:auto;margin-top:20px}
  #yr-root .dayfold__s{grid-template-columns:60px minmax(0,1fr) 24px;gap:8px 14px}
  #yr-root .dayfold .day{grid-template-columns:1fr;padding-bottom:32px}
  #yr-root .dayfold__date{grid-column:2}
  #yr-root .dayfold__t{grid-column:1 / 3}
  #yr-root .dayfold__lead{grid-column:1 / 3}
  #yr-root .dayfold__s::after{grid-column:3}
  #yr-root .ledger__row{grid-template-columns:1fr;gap:8px}
  #yr-root .split,
#yr-root .split--rev,
#yr-root .bleed-right,
#yr-root .bleed-left,
#yr-root .compare,
#yr-root .day,
#yr-root .g-2,
#yr-root .g-3,
#yr-root .form__row,
#yr-root .stagger{grid-template-columns:1fr}
  #yr-root .split--rev .split__media,
#yr-root .day:nth-child(even) .day__media{order:0}
  #yr-root .bleed-right{margin-right:0}
  #yr-root .bleed-left{margin-left:0}
  #yr-root .bleed-right .media,
#yr-root .bleed-left .media{border-radius:var(--r)}
  #yr-root .stagger .media:last-child{margin-bottom:0}
  #yr-root .mosaic{grid-template-columns:1fr}
  #yr-root .progs{grid-template-columns:1fr}
  #yr-root .progs > a:nth-child(2){padding-top:0}
  #yr-root .cta{min-height:0}
  #yr-root .cta__panel{max-width:none}
  #yr-root .tile--w1,
#yr-root .tile--w2{grid-column:span 1;aspect-ratio:4/3}
  #yr-root .steps--3{grid-template-columns:1fr}
  #yr-root .footer__grid{grid-template-columns:repeat(3,1fr)}
  #yr-root .footer__brand{grid-column:span 3}
  #yr-root .hero{min-height:min(82svh,640px)}
  #yr-root .hero__in{padding-block:104px 56px}
  #yr-root .hero__strip .strip{margin-top:0}
  #yr-root .hero__caption{display:none}
  #yr-root .toc{gap:6px;margin-top:24px}
  #yr-root .toc a{padding:8px 11px;font-size:12px}
  #yr-root .pagehead__in{padding-block:118px 44px}
  #yr-root .pagehead--ink .pagehead__in{padding-block:126px 58px}
  #yr-root .figure-row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:560px){
  #yr-root .g-4,
#yr-root .g-5,
#yr-root .stats,
#yr-root .steps{grid-template-columns:1fr}
  #yr-root .sechead .h2 br{display:none}
  #yr-root .g-5 > :last-child{grid-column:auto}
  #yr-root .hero__strip .strip{gap:18px 20px;padding-block:22px}

  #yr-root .footer__grid{grid-template-columns:1fr}
  #yr-root .footer__brand{grid-column:span 1}
  #yr-root .info__row,
#yr-root .slot{grid-template-columns:1fr;gap:5px}
  /* 표 → 세로 스택 (가로 스크롤 대신) */
  #yr-root .table{min-width:0;width:100%}
  #yr-root .table thead{display:none}
  #yr-root .table tr{display:block;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
  #yr-root .table tr:last-child{border-bottom:0}
  #yr-root .table td{display:block;padding:0;border:0}
  #yr-root .table td+td{margin-top:5px}
  #yr-root .table .k{white-space:normal}
  #yr-root .table td:first-child{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
  #yr-root .table td:last-child .tag{margin-top:4px}
}

/* == 26 인쇄 ======================================================== */
@media print{
  #yr-root .site-header,
#yr-root .nav,
#yr-root .nav-toggle,
#yr-root .toc,
#yr-root .btn,
#yr-root .btn-row,
#yr-root .hero__video,
#yr-root .hero__strip{display:none!important}
  #yr-root{background:#fff;color:#000;font-size:10.5pt;line-height:1.6}
  #yr-root .sec{padding-block:16pt}
  #yr-root .hero,
#yr-root .pagehead,
#yr-root .band{min-height:auto;background:#fff;color:#000}
  #yr-root .hero__poster,
#yr-root .pagehead__bg,
#yr-root .band__bg{opacity:.16}
  #yr-root .hero__scrim,
#yr-root .pagehead__scrim,
#yr-root .band__scrim{background:none}
  #yr-root .hero__title,
#yr-root .pagehead .h1,
#yr-root .band .h2{color:#000}
  #yr-root .hero__sub,
#yr-root .pagehead .lead,
#yr-root .band .lead{color:#333}
  #yr-root .sec--ink,
#yr-root .sec--blue,
#yr-root .ctaCard{background:#fff!important;color:#000!important}
  #yr-root .sec--ink .h2,
#yr-root .sec--blue .h2,
#yr-root .ctaCard .h2,
#yr-root .compare__q{color:#000!important}
  #yr-root .card,
#yr-root .table-wrap{border:1px solid #ccc;break-inside:avoid}
  #yr-root .day,
#yr-root .tile,
#yr-root .figure-row{break-inside:avoid}
  #yr-root .reveal{opacity:1!important;transform:none!important}
  #yr-root a{color:#000}
}

/* == 홈 전용 (is-home) — 간소화 랜딩 =================================== */


/* Statement — 한 문장 섹션 */
#yr-root .statement__in{width:100%}
#yr-root.is-home .statement{padding-block:clamp(88px,9.4vw,150px)}
#yr-root .statement__h{
  margin-top:20px;max-width:20ch;
  font-size:clamp(30px,3.4vw,50px);line-height:1.3;letter-spacing:-.038em;
}
#yr-root .statement__l{margin-top:26px;max-width:min(760px,100%)}
#yr-root.is-home .lead.statement__l{max-width:min(760px,100%)}
#yr-root .statement__cta{margin:32px 0 0}

/* 여백·타이포 — 글이 줄어든 만큼 공간을 준다 */
#yr-root.is-home .sec{padding-block:clamp(74px,8.1vw,130px)}
#yr-root.is-home .h2{font-size:clamp(25px,2.4vw,35px)}
#yr-root.is-home .lead{max-width:44ch}
#yr-root.is-home .figure-row .n{font-size:clamp(52px,6.8vw,94px)}
#yr-root.is-home .figure-row{padding-block:clamp(26px,3.1vw,42px)}
#yr-root.is-home .figure-row .d{padding-top:1.1em;font-size:15px}

@media (max-width:860px){
  #yr-root.is-home .statement{padding-block:clamp(72px,12vw,96px)}
}

/* 홈 — 프로그램 카드: 링크를 카드 하단에 정렬 */
#yr-root .prog-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
#yr-root .prog-card__body{padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;flex:1}
#yr-root .prog-card__more{margin:auto 0 0;padding-top:26px}

/* 홈 — 숫자 라벨 세로 위치 */
#yr-root.is-home .figure-row .d{padding-top:1.55em}

/* == 홈 — 함께하는 곳 가로 배너 ====================================== */
#yr-root .pbanner{
  position:relative;z-index:20;background:var(--cream);
  border-bottom:1px solid var(--line);
}
#yr-root .pbanner__in{
  display:flex;align-items:center;gap:clamp(24px,4vw,60px);
  padding-block:clamp(26px,3vw,40px);
}
#yr-root .pbanner__k{
  margin:0;flex:0 0 auto;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
#yr-root .pbanner__list{
  margin:0;padding:0;list-style:none;flex:1;
  display:grid;grid-template-columns:repeat(4,1fr);
}
#yr-root .pbanner__list li{
  font-family:var(--serif);font-weight:700;text-align:center;
  font-size:clamp(15px,1.45vw,21px);letter-spacing:-.028em;color:var(--ink);
  padding-inline:clamp(8px,1.4vw,20px);
}
#yr-root .pbanner__list li + li{border-left:1px solid var(--line)}

/* == 홈 — 숫자 가로 3열 ============================================== */
#yr-root .numbers__head .h2{margin-top:16px}
#yr-root .numbers__row{
  margin-top:clamp(40px,4.6vw,68px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,56px);
}
#yr-root .numbers__cell{padding-top:26px;border-top:1px solid var(--on-dark-line)}
#yr-root .numbers__n{
  margin:0;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(44px,5.2vw,76px);line-height:1.05;letter-spacing:-.045em;
}
#yr-root .numbers__n .u{font-size:.46em;letter-spacing:0;margin-left:.06em;color:var(--on-dark-low)}
#yr-root .numbers__d{
  margin:16px 0 0;font-size:14.5px;line-height:1.75;
  color:var(--on-dark-mid);max-width:30ch;
}

@media (max-width:860px){
  #yr-root .pbanner__in{flex-direction:column;align-items:flex-start;gap:16px}
  #yr-root .pbanner__list{width:100%;grid-template-columns:repeat(2,1fr);gap:14px 0}
  #yr-root .pbanner__list li{text-align:left;padding-inline:0}
  #yr-root .pbanner__list li + li{border-left:0}
  #yr-root .pbanner__list li:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
  #yr-root .numbers__row{grid-template-columns:1fr;gap:0}
  #yr-root .numbers__cell{padding-block:24px}
}

/* == 26 YWC 개편 — 운영 책임 · 정적 일자 행 · 막 경계 ================
   글을 줄인 자리를 사진/타이포/밀도로 채운다. 여백은 넓히되 비우지 않는다. */

/* 26a 운영 책임 섹션(sec--blue) 하단 바 — 인솔 담당자 + 기관 정보 */
#yr-root .duty-bar{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.4vw,68px);align-items:start;
  margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(30px,3.2vw,44px);
  border-top:1px solid var(--on-dark-line);
}
/* 사진과 이름을 가로로 붙여, 오른쪽 기관 정보와 높이를 맞춘다 */
#yr-root .runner{margin:0;display:grid;grid-template-columns:clamp(150px,13vw,196px) minmax(0,1fr);
  gap:clamp(20px,2vw,28px);align-items:center}
#yr-root .runner__photo{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:#fff;border-radius:var(--r);
}
#yr-root .runner__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* 흰 배경 사진이 남색 위에서 뜨지 않도록 아주 얇은 테두리만 준다 */
#yr-root .runner__photo::after{content:"";position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.16);pointer-events:none}
#yr-root .runner__body{margin:0;align-self:center}
#yr-root .runner__k{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-low)}
#yr-root .runner__v{margin:0;font-family:var(--serif);font-size:clamp(20px,1.7vw,25px);
  font-weight:700;color:#fff;letter-spacing:-.032em;line-height:1.3}
#yr-root .runner__r{margin:8px 0 0;font-size:14px;line-height:1.75;color:var(--on-dark-mid)}
#yr-root .runner__m{margin:12px 0 0;font-size:13.5px}
#yr-root .runner__m a{color:#fff;border-bottom:1px solid rgba(255,255,255,.38)}
#yr-root .runner__m a:hover{border-bottom-color:#fff}
#yr-root .duty-bar__aside{padding-top:2px}
#yr-root .partners--onDark{padding:0;color:var(--on-dark-mid)}
#yr-root .partners--onDark .partners__k{color:var(--on-dark-low)}

/* 26b 운영 책임 카드 — 어두운 배경에서 번호를 살린다 */
#yr-root .sec--blue .card__num{color:rgba(255,255,255,.34)}
#yr-root .sec--blue .card__note{color:rgba(255,255,255,.62)}

/* 26c 날짜별 상세 — 접히지 않는 이동일 행 */
#yr-root .dayfold--static .dayfold__s{cursor:default;grid-template-columns:72px 150px minmax(0,1fr)}
#yr-root .dayfold--static .dayfold__s::after{display:none}
#yr-root .dayfold--static .dayfold__n{color:var(--faint)}
#yr-root .dayfold--static .dayfold__t{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.02em}
#yr-root .dayfold--static .dayfold__s:hover .dayfold__t{color:var(--muted)}

/* 26d 막(章)이 바뀌는 경계 — 밝은 섹션 사이 간격을 1.4배로 */
#yr-root .sec:not(.sec--ink):not(.sec--blue) + .sec.sec--act:not(.sec--ink):not(.sec--blue) > .wrap:first-child::before{
  margin-bottom:calc(var(--sec-y) * 1.15)}
/* 같은 막 안에서 이어지는 섹션 — 요약과 상세를 한 덩어리로 */
#yr-root .sec:not(.sec--ink):not(.sec--blue) + .sec.sec--cont:not(.sec--ink):not(.sec--blue) > .wrap:first-child::before{
  margin-bottom:calc(var(--sec-y) * .58)}

/* 26e 3단 스텝 — 밴드 위에서 쓸 때 여백을 키운다 */
#yr-root .band .steps{margin-top:clamp(36px,4vw,56px)}
#yr-root .band .steps .step{padding-top:clamp(20px,2.2vw,30px)}
#yr-root .band .step__t{font-size:17.5px}

/* 26f 사진 출처 접기 */
#yr-root .credits .fold__s{font-size:13.5px;font-weight:700;color:var(--muted)}
#yr-root .credits .fold{border-bottom:0}

@media (max-width:860px){
  #yr-root .duty-bar{grid-template-columns:1fr;gap:34px}
  #yr-root .runner{grid-template-columns:132px 1fr;gap:20px}
  #yr-root .dayfold--static .dayfold__s{grid-template-columns:1fr;gap:6px}
}

/* == 홈 — 연출 (motion) ============================================== */

/* 스크롤 진행 바 */
#yr-root .scroll-bar{
  position:fixed;top:0;left:0;z-index:120;
  width:100%;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* 히어로 — 포스터 슬로 줌 */
#yr-root.is-home .hero__poster{
  transform:scale(1.08);
  transition:transform 14s cubic-bezier(.16,.62,.34,1);
}
#yr-root.is-home.is-ready .hero__poster{transform:scale(1)}

/* 히어로 — 단계 등장 */
#yr-root .hi{opacity:0;transform:translateY(20px)}
#yr-root.is-ready .hi{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
#yr-root.is-ready .hi1{transition-delay:.10s}
#yr-root.is-ready .hi2{transition-delay:.26s}
#yr-root.is-ready .hi3{transition-delay:.40s}
#yr-root.is-ready .hi4{transition-delay:.54s}

/* 히어로 — 스크롤 큐 */
#yr-root .hero__cue{
  position:absolute;left:50%;bottom:26px;z-index:3;
  width:1px;height:56px;overflow:hidden;
  background:rgba(255,255,255,.16);
}
#yr-root .hero__cue::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,#fff);
  animation:cueRun 2.2s var(--ease) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* 아이브로우 — 오렌지 틱 */
#yr-root.is-home .eyebrow{display:flex;align-items:center;gap:10px}
#yr-root.is-home .eyebrow::before{
  content:"";width:0;height:2px;background:var(--orange);
  transition:width .7s var(--ease) .12s;
}
#yr-root.is-home .reveal.is-in .eyebrow::before,
#yr-root.is-home .reveal.is-in.eyebrow::before,
#yr-root.is-home .is-in .eyebrow::before{width:22px}
#yr-root.is-home.is-ready .hero__in .eyebrow::before{width:22px}

/* Statement — 오렌지 세로 바 */
#yr-root .statement__h{position:relative;padding-left:26px}
#yr-root .statement__h::before{
  content:"";position:absolute;left:0;top:.24em;bottom:.24em;
  width:3px;background:var(--orange);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .8s var(--ease) .1s;
}
#yr-root .statement__h.is-in::before{transform:scaleY(1)}

/* 파트너 배너 — 항목 등장 */
#yr-root .pbanner__list li.reveal{opacity:0;transform:translateY(10px)}
#yr-root .pbanner__list li.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}

/* 숫자 — 라인 드로우 */
#yr-root .numbers__cell{position:relative;border-top:0}
#yr-root .numbers__cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--on-dark-line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease);
}
#yr-root .numbers__cell.is-in::before{transform:scaleX(1)}
#yr-root .numbers__n{
  font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
#yr-root .numbers__cell:hover .numbers__n{color:var(--orange)}

/* 프로그램 카드 — 호버 */
#yr-root .prog-card .media-cap{transition:transform .5s var(--ease)}
#yr-root .prog-card:hover .media-cap{transform:translateY(-4px)}
#yr-root .prog-card .tlink{transition:color .25s var(--ease),border-color .25s var(--ease),gap .25s var(--ease)}
#yr-root .prog-card:hover .tlink{color:var(--orange);border-color:var(--orange);gap:12px}

@media (prefers-reduced-motion:reduce){
  #yr-root .scroll-bar,
#yr-root .hero__cue{display:none!important}
  #yr-root .hi{opacity:1!important;transform:none!important}
  #yr-root.is-home .hero__poster{transform:none!important}
  #yr-root .statement__h::before{transform:scaleY(1)!important}
  #yr-root .numbers__cell::before{transform:scaleX(1)!important}
  #yr-root.is-home .eyebrow::before{width:22px!important}
}


/* == 27 YWC 보강 — 밴드 가독성 · 밀도 =============================== */
/* 27a 글이 많은 밴드는 스크림을 더 두껍게 (오큘러스 사진의 밝은 면 대비) */
#yr-root .band--copy .band__scrim{
  background:linear-gradient(105deg,
    rgba(8,10,12,.94) 0%, rgba(8,10,12,.90) 42%,
    rgba(8,10,12,.72) 68%, rgba(8,10,12,.58) 100%);
}
#yr-root .band--copy .band__in{padding-block:clamp(76px,8.4vw,124px)}
#yr-root .band--copy .steps{max-width:1040px}

/* 27b 운영 책임 섹션 하단 바 — 좌 정보표 / 우 안내 */
#yr-root .duty-bar{align-items:start}
#yr-root .duty-bar .info--onDark{border-top-color:rgba(255,255,255,.22)}
#yr-root .duty-bar .info__row{padding-block:14px}
#yr-root .duty-bar .info__v a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
#yr-root .duty-bar .btn-row{margin-top:22px}
#yr-root .note--onDark strong{color:#fff;font-weight:700}

/* 27c 5일 흐름 카드 — 5열에서 문장이 한 줄로 눌리지 않게 */
#yr-root .flow .card__d{min-height:3.9em}
@media (max-width:1080px){ #yr-root .flow .card__d{min-height:0} }

/* 27d 운영 책임 안내문은 저채도 회색보다 한 단계 밝게 (중요 정보) */
#yr-root .duty-bar .note--onDark{color:var(--on-dark-mid)}

/* == 유튜브 채널 링크 ================================================ */
#yr-root .hero__caption-sep{color:rgba(255,255,255,.32);margin:0 4px}

#yr-root .yt-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:13px;font-weight:700;color:var(--body);
  transition:color .22s var(--ease);
}
#yr-root .yt-link svg{width:19px;height:19px;fill:currentColor;flex:0 0 19px;opacity:.72;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
#yr-root .yt-link span{border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .22s var(--ease)}
#yr-root .yt-link:hover{color:#FF0033}
#yr-root .yt-link:hover svg{opacity:1;transform:scale(1.06)}
#yr-root .yt-link:hover span{border-color:currentColor}


/* == 28 YWC 모션 레이어 ============================================== */
/* 홈(.is-home)에만 있던 연출을 YWC(.is-ywc)까지 편다.
   건드리는 속성은 transform · scale · opacity뿐이고,
   저모션 설정이면 28j에서 전부 정지한다. */

/* 28a 배경 사진 — 패럴랙스로 밀려도 빈 곳이 생기지 않게 위아래로 키운다.
   inset:0의 bottom은 height가 지정되면 무시되므로 top만 당기면 된다. */
#yr-root.is-ywc .pagehead__bg,
#yr-root.is-ywc .band__bg{
  height:124%;top:-12%;
  will-change:transform;
}

/* 28b 페이지헤드 — 배경 슬로 줌.
   scale은 transform과 별개 속성이라 JS가 쓰는 패럴랙스 translate와
   서로 덮어쓰지 않고 합성된다. */
#yr-root.is-ywc .pagehead__bg{
  scale:1.09;
  transition:scale 16s cubic-bezier(.16,.62,.34,1);
}
#yr-root.is-ywc.is-ready .pagehead__bg{scale:1}

/* 28c 페이지헤드 — 문구가 단계로 올라온다 (hi1~hi5) */
#yr-root.is-ready .hi5{transition-delay:.68s}

/* 28d 페이지헤드 — 아래로 흐르는 스크롤 큐 */
#yr-root .pagehead__cue{
  position:absolute;left:50%;bottom:26px;z-index:3;
  width:1px;height:48px;overflow:hidden;
  background:rgba(255,255,255,.16);
}
#yr-root .pagehead__cue::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,#fff);
  animation:cueRun 2.2s var(--ease) infinite;
}
@media (max-width:900px){ #yr-root .pagehead__cue{display:none} }

/* 28e 아이브로우 — 오렌지 틱이 그어진다 (홈과 같은 문법) */
#yr-root.is-ywc .eyebrow{display:flex;align-items:center;gap:10px}
#yr-root.is-ywc .eyebrow::before{
  content:"";flex:0 0 auto;width:0;height:2px;background:var(--orange);
  transition:width .7s var(--ease) .12s;
}
#yr-root.is-ywc .is-in .eyebrow::before,
#yr-root.is-ywc .reveal.is-in.eyebrow::before{width:22px}
#yr-root.is-ywc.is-ready .pagehead__in .eyebrow::before{width:22px}

/* 28f 모자이크 타일 — 올라오는 동안 사진이 제자리를 잡는다 */
#yr-root.is-ywc .tile.reveal:not(.is-in) img{transform:scale(1.07)}
#yr-root.is-ywc .tile.reveal.is-in img{transform:scale(1);transition:transform 1.5s var(--ease)}
#yr-root.is-ywc .tile.reveal.is-in:hover img{transform:scale(1.05)}
#yr-root.is-ywc .tile__body{transition:transform .55s var(--ease)}
#yr-root.is-ywc .tile:hover .tile__body{transform:translateY(-4px)}

/* 28g 카드 — 살짝 떠오른다 */
#yr-root.is-ywc .card{transition:border-color .3s var(--ease),transform .35s var(--ease)}
#yr-root.is-ywc .card:hover{transform:translateY(-3px)}

/* 28h 날짜 아코디언 — 펼치면 내용이 위에서 흘러 들어온다.
   <details>는 여는 순간에만 애니메이션이 걸린다. 닫을 때는 즉시 접힌다. */
#yr-root.is-ywc details.dayfold[open] > .day{animation:ywcFold .5s var(--ease) both}
#yr-root.is-ywc details.dayfold[open] .slot{animation:ywcFold .5s var(--ease) both}
#yr-root.is-ywc details.dayfold[open] .slot:nth-child(1){animation-delay:.12s}
#yr-root.is-ywc details.dayfold[open] .slot:nth-child(2){animation-delay:.19s}
#yr-root.is-ywc details.dayfold[open] .slot:nth-child(3){animation-delay:.26s}
@keyframes ywcFold{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:none}
}
#yr-root.is-ywc details.dayfold > .dayfold__s{
  transition:background .25s var(--ease),padding-left .25s var(--ease);
  margin-inline:-14px;padding-inline:14px;
}
#yr-root.is-ywc details.dayfold > .dayfold__s:hover{background:var(--line-soft)}

/* 28i 텍스트 링크 — 화살표가 밀린다 */
#yr-root.is-ywc .tlink{transition:color .2s,border-color .2s,gap .25s var(--ease)}
#yr-root.is-ywc .tlink:hover{gap:12px}

/* 28j 저모션 설정 — 전부 정지 */
@media (prefers-reduced-motion:reduce){
  #yr-root .pagehead__cue{display:none!important}
  #yr-root.is-ywc .pagehead__bg{scale:1!important}
  #yr-root.is-ywc .pagehead__bg,
#yr-root.is-ywc .band__bg{height:100%!important;top:0!important;transform:none!important}
  #yr-root.is-ywc .eyebrow::before{width:22px!important}
  #yr-root.is-ywc .tile.reveal:not(.is-in) img{transform:none!important}
  #yr-root.is-ywc details.dayfold[open] > .day,
#yr-root.is-ywc details.dayfold[open] .slot{animation:none!important}
}


/* == 29 NFTE 모션 레이어 ============================================== */
/* 홈(.is-home)·YWC(.is-ywc)의 연출 문법을 NFTE(.is-nfte)까지 편다.
   건드리는 속성은 transform · scale · opacity · width뿐이고,
   저모션 설정이면 29i에서 전부 정지한다. */

/* 29a 배경 사진 — 패럴랙스로 밀려도 빈 곳이 생기지 않게 위아래로 키운다 */
#yr-root.is-nfte .pagehead__bg,
#yr-root.is-nfte .band__bg,
#yr-root.is-nfte .cta__bg img{
  height:124%;top:-12%;
  will-change:transform;
}
#yr-root.is-nfte .cta__bg img{position:absolute;left:0;width:100%;object-fit:cover}

/* 29b 페이지헤드 — 배경 슬로 줌 (scale은 JS의 translate와 합성된다) */
#yr-root.is-nfte .pagehead__bg{
  scale:1.09;
  transition:scale 16s cubic-bezier(.16,.62,.34,1);
}
#yr-root.is-nfte.is-ready .pagehead__bg{scale:1}

/* 29c 아이브로우 — 오렌지 틱이 그어진다 */
#yr-root.is-nfte .eyebrow{display:flex;align-items:center;gap:10px}
#yr-root.is-nfte .eyebrow::before{
  content:"";flex:0 0 auto;width:0;height:2px;background:var(--orange);
  transition:width .7s var(--ease) .12s;
}
#yr-root.is-nfte .is-in .eyebrow::before,
#yr-root.is-nfte .reveal.is-in.eyebrow::before{width:22px}
#yr-root.is-nfte.is-ready .pagehead__in .eyebrow::before{width:22px}

/* 29d 숫자 — 윗선이 그어지고 숫자가 올라온다 */
#yr-root.is-nfte .stat{position:relative;border-top:0}
#yr-root.is-nfte .stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease);
}
#yr-root.is-nfte .stat.is-in::before{transform:scaleX(1)}
#yr-root.is-nfte .stat__n{display:inline-block}

/* 29e 스텝·카드 — 윗선이 그어진다 (숫자와 같은 문법) */
#yr-root.is-nfte .step,
#yr-root.is-nfte .grid > .card{position:relative;border-top-color:transparent}
#yr-root.is-nfte .step::before,
#yr-root.is-nfte .grid > .card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease);
}
#yr-root.is-nfte .sec--ink .grid > .card::before{background:var(--on-dark-line)}
#yr-root.is-nfte .step.is-in::before,
#yr-root.is-nfte .grid > .card.is-in::before{transform:scaleX(1)}

/* 29f 카드 hover는 두지 않는다.
   NFTE에서는 카드 자체가 stagger 대상(.reveal)이라,
   여기에 transform transition을 덧쓰면 등장 애니메이션을 덮어쓴다.
   대신 29e의 윗선 드로우가 카드의 등장 연출을 맡는다. */

/* 29g 사진·영상 — 올라오는 동안 제자리를 잡는다 */
#yr-root.is-nfte .media.reveal:not(.is-in) img,
#yr-root.is-nfte .figure-wide.reveal:not(.is-in) img{transform:scale(1.07)}
#yr-root.is-nfte .media.reveal.is-in img,
#yr-root.is-nfte .figure-wide.reveal.is-in img{transform:scale(1);transition:transform 1.5s var(--ease)}
#yr-root.is-nfte .figure-wide.reveal:not(.is-in) iframe{opacity:0}
#yr-root.is-nfte .figure-wide.reveal.is-in iframe{opacity:1;transition:opacity 1s var(--ease) .1s}

/* 29h 버튼·링크 — 화살표가 밀린다 */
#yr-root.is-nfte .btn{transition:background .22s,color .22s,border-color .22s,transform .3s var(--ease)}
#yr-root.is-nfte .btn:hover{transform:translateY(-2px)}
#yr-root.is-nfte .info__v a{transition:color .2s,border-color .2s}

/* 29i 저모션 설정 — 전부 정지 */
@media (prefers-reduced-motion:reduce){
  #yr-root.is-nfte .pagehead__bg{scale:1!important}
  #yr-root.is-nfte .pagehead__bg,
#yr-root.is-nfte .band__bg,
#yr-root.is-nfte .cta__bg img{height:100%!important;top:0!important;transform:none!important}
  #yr-root.is-nfte .eyebrow::before{width:22px!important}
  #yr-root.is-nfte .stat::before,
#yr-root.is-nfte .step::before,
#yr-root.is-nfte .grid > .card::before{transform:scaleX(1)!important}
  #yr-root.is-nfte .step,
#yr-root.is-nfte .grid > .card{border-top-color:var(--line)}
  #yr-root.is-nfte .media.reveal:not(.is-in) img,
#yr-root.is-nfte .figure-wide.reveal:not(.is-in) img{transform:none!important}
  #yr-root.is-nfte .figure-wide.reveal:not(.is-in) iframe{opacity:1!important}
}


/* ===== about 전용 ===== */

/* =====================================================================
   유스라운드 소개 페이지 전용 — 여백과 침묵, 그리고 큰 움직임
   ---------------------------------------------------------------------
   원칙 (09.md 6장)
   1. 선을 그리지 않는다. 여백으로 나눈다.
      — 「주제를 주지 않습니다」라고 말하는 회사가 칸을 그어 건네면 안 된다.
   2. 배경이 바뀌는 곳은 마지막 잉크 섹션 한 곳뿐이다.
   3. 대비를 벌린다. 큰 것은 더 크게, 작은 것은 더 작게.
   4. 모션은 「크게」이지 「많이」가 아니다. 섹션당 주인공 하나.
   ---------------------------------------------------------------------
   전역 site.css 는 건드리지 않는다. 모두 .is-about 스코프.
   ===================================================================== */

#yr-root.is-about{
  --sec-y: clamp(104px, 12vw, 180px);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* == 1. 섹션 사이 가로선 제거 — 여백만으로 나눈다 ====================
   site.css:121 은 인접한 밝은 섹션의 padding-top 을 0 으로 만들고,
   ::before 로 얇은 가로선을 그은 뒤 그 아래에 --sec-y 만큼 띄운다.
   여기서는 «선»만 없애고 padding-top:0 은 그대로 둔다.

   ※ padding-top 을 되살리면 안 된다. 앞 섹션의 padding-bottom(180) 과 더해져
     섹션 사이가 360px 이 되고, 한 화면이 통째로 비어 «여유»가 아니라 «구멍»이 된다.
     간격은 앞 섹션의 아래 여백 하나로 충분하다.
   ※ 선택자 형태를 줄이면 안 된다. site.css 쪽이 :not() 3개(특정성 0,6,0)라
     :not(.sec--blue) 를 빼면 이 규칙이 조용히 무시된다. */
#yr-root.is-about .sec:not(.sec--ink):not(.sec--blue) + .sec:not(.sec--ink):not(.sec--blue) > .wrap:first-child::before{
  display:none;
}

/* == 2. 페이지 헤드 — 조금 더 숨 쉬게 =============================== */
#yr-root.is-about .pagehead__in{ padding-block: 172px 72px }
#yr-root.is-about .pagehead .lead{ max-width: 56ch }   /* 한글은 ch 폭이 좁다. 한 줄로 떨어지는 값 */

/* == 3. 자격 — 선 없는 원장, 한 화면을 통째로 ======================= */
#yr-root.is-about .sec--credentials{ min-height:78vh; display:grid; align-items:center }

#yr-root.is-about .ledger{ border-top:0 }
#yr-root.is-about .ledger__row{
  border-bottom:0;
  padding-block: clamp(44px, 5vw, 72px);
  grid-template-columns: minmax(150px, .26fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 88px);
}
#yr-root.is-about .ledger__row:first-child{ padding-top:0 }
#yr-root.is-about .ledger__row:last-child{ padding-bottom:0 }
#yr-root.is-about .ledger__k{ font-size:12px; letter-spacing:.06em; font-weight:800; padding-top:6px }
#yr-root.is-about .ledger__v{ max-width:56ch }
#yr-root.is-about .ledger__more{ margin:20px 0 0 }

/* == 4. 원칙 — 선 없는 목록 ========================================= */
#yr-root.is-about .principles{ border-top:0 }
#yr-root.is-about .principle{
  border-bottom:0;
  padding-block: clamp(34px, 3.4vw, 52px);
  grid-template-columns: 64px 1fr;
  gap:20px;
}
#yr-root.is-about .principle:first-child{ padding-top:0 }
#yr-root.is-about .principle:last-child{ padding-bottom:0 }
#yr-root.is-about .principle__n{ font-size:15px; letter-spacing:.06em; color:var(--faint); padding-top:4px }
#yr-root.is-about .principle__t{ font-size:20px; margin-bottom:12px }
#yr-root.is-about .principle__d{ font-size:15px; max-width:46ch }

/* == 5. 타이포 — 대비를 벌린다 ====================================== */
#yr-root.is-about .h2{ font-size:clamp(26px, 2.9vw, 40px); letter-spacing:-.03em }
#yr-root.is-about .eyebrow{ font-size:10px; letter-spacing:.24em; margin-bottom:34px }
#yr-root.is-about .checks li{ max-width:44ch }

/* == 6. 증거 — 사진이 벽처럼 서고, 막을 씌우지 않는다 =============== */
#yr-root.is-about .mosaic--record{
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(84px, 7.6vw, 128px);
  gap:6px;
}
#yr-root.is-about .mosaic--record .tile::after{ display:none }   /* 어두운 막 제거 */
#yr-root.is-about .mosaic--record .r1{ grid-column:1 / 3; grid-row:1 / 4 }
#yr-root.is-about .mosaic--record .r2{ grid-column:3 / 5; grid-row:1 / 3 }
#yr-root.is-about .mosaic--record .r3{ grid-column:3 / 5; grid-row:3 / 6 }
#yr-root.is-about .mosaic--record .r4{ grid-column:1 / 3; grid-row:4 / 6 }
/* 열리는 순서 — DOM 순서가 아니라 화면에서 보이는 위치 기준 대각선 */
#yr-root.is-about .mosaic--record .r1{ --d:   0ms }
#yr-root.is-about .mosaic--record .r2{ --d:  90ms }
#yr-root.is-about .mosaic--record .r4{ --d: 140ms }
#yr-root.is-about .mosaic--record .r3{ --d: 220ms }
#yr-root.is-about .mosaic-cap{ margin-top:14px }

/* == 7. 사람 — 인물 사진은 상자에 넣지 않는다 ======================= */
#yr-root.is-about .staff{ align-items:start }   /* 안전 4줄의 첫 줄을 사진 윗선에 맞춘다 */
#yr-root.is-about .staff-photo{
  aspect-ratio:1/1; background:transparent;
  max-width:300px;                 /* 인물 사진은 크게 쓰지 않는다. 얼굴만 확인되면 된다 */
}
#yr-root.is-about .staff-photo img{ object-fit:contain; object-position:center bottom }
#yr-root.is-about .staff__name{ margin:26px 0 0; font-size:23px; font-weight:800;
  letter-spacing:-.035em; color:var(--ink); line-height:1.35 }
#yr-root.is-about .staff__role{ margin:0 0 4px; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
#yr-root.is-about .staff__mail{ display:inline-block; margin-top:14px; font-size:15px;
  font-weight:700; color:var(--blue) }
#yr-root.is-about .staff__note{ margin-top:10px }

/* == 8. 운영 주체 — 사업자등록번호의 대비를 한 단계 올린다 ========== */
#yr-root.is-about .sec--ink .checks li strong{ color:#fff }
#yr-root.is-about .biznum{ color:#fff; font-variant-numeric:tabular-nums }

/* =====================================================================
   9. 모션 — 사이트 기본 .reveal 을 그대로 쓴다.
      크게 움직이는 연출(마스크 리빌·패럴랙스)은 넣지 않는다.
      섹션이 크고 여백이 넓어서, 조용히 떠오르는 편이 오히려 안정적이다.
   ===================================================================== */
#yr-root.is-about .media img,
#yr-root.is-about .tile img{ transition: transform 1.2s var(--ease-out-expo) }
#yr-root.is-about .tile:hover img{ transform:scale(1.04) }
#yr-root.is-about .staff-photo:hover img{ transform:none }   /* 인물은 움직이지 않는다 */

/* =====================================================================
   10. 반응형 — 모바일에서는 여백을 되돌린다
   ===================================================================== */
@media (max-width:980px){
  #yr-root.is-about .mosaic--record{ grid-auto-rows: clamp(72px, 9vw, 110px) }
}

@media (max-width:720px){
  #yr-root.is-about{ --sec-y: clamp(64px, 14vw, 104px) }
  #yr-root.is-about .pagehead__in{ padding-block:132px 48px }
  #yr-root.is-about .sec--credentials{ min-height:auto }

  #yr-root.is-about .ledger__row{ grid-template-columns:1fr; gap:12px; padding-block:40px }
  #yr-root.is-about .ledger__k{ padding-top:0 }

  #yr-root.is-about .principle{ grid-template-columns:1fr; gap:6px; padding-block:32px }
  #yr-root.is-about .principle__n{ padding-top:0 }

  /* 모자이크 2열 — 세로로 5장 쌓지 않는다 */
  #yr-root.is-about .mosaic--record{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(92px, 22vw, 132px);
  }
  #yr-root.is-about .mosaic--record .r1{ grid-column:1 / 3; grid-row:1 / 3 }
  #yr-root.is-about .mosaic--record .r2{ grid-column:1 / 2; grid-row:3 / 5 }
  #yr-root.is-about .mosaic--record .r3{ grid-column:2 / 3; grid-row:3 / 5 }
  #yr-root.is-about .mosaic--record .r4{ grid-column:1 / 3; grid-row:5 / 7 }

  #yr-root.is-about .staff-photo{ max-width:min(62%, 240px) }
  #yr-root.is-about .staff__name{ font-size:21px }
  #yr-root.is-about .pagehead__bg{ height:118%; top:-9% }
}

/* =====================================================================
   11. 접근성 — 여기는 타협하지 않는다
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  #yr-root.is-about *,
#yr-root.is-about *::before,
#yr-root.is-about *::after{ transition:none !important; animation:none !important }
  #yr-root.is-about .reveal{ opacity:1; transform:none }
}


/* =====================================================================
   아임웹 전용 보정 — 자동 생성 아님. 이 파일 재생성 시 함께 유지할 것.
   ===================================================================== */

/* 1) 폭 탈출 — 아임웹은 콘텐츠를 max-width 컨테이너에 넣는다.
      히어로와 사진 모자이크는 화면 가로를 꽉 채워야 의도대로 보인다. */
#yr-root .pagehead,
#yr-root .band,
#yr-root .cta,
#yr-root .sec--ink,
#yr-root .sec--blue{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#yr-root .wrap--wide{ max-width:min(1680px, 96vw) }

/* 1-b) 100vw 는 스크롤바 폭까지 포함해서 가로 넘침을 만든다.
       overflow-x:clip 으로 잘라낸다. hidden 을 쓰면 스크롤 컨테이너가 생겨
       원칙 섹션의 sticky 사진이 죽으므로 clip 이어야 한다. */
#yr-root{ overflow-x:clip }

/* 2) 아임웹 편집기에서 위젯 위아래로 붙는 기본 여백 상쇄 */
#yr-root{ margin:0 }
#yr-root > section:first-child{ margin-top:0 }
#yr-root > section:last-child{ margin-bottom:0 }

/* 3) 아임웹 헤더가 고정(fixed)일 때 첫 화면이 가려지지 않도록 */
#yr-root .pagehead__in{ padding-top:max(172px, 12vh) }

/* =====================================================================
   안전장치 — 스크립트가 막혀도 내용은 반드시 보인다
   ---------------------------------------------------------------------
   카카오톡·라인 같은 인앱 브라우저는 보안 정책으로 외부 스크립트를
   차단하는 경우가 있다. 우리 콘텐츠는 .reveal / .hi 가 opacity:0 으로
   시작해 JS가 켜 주는 구조라, 스크립트가 막히면 화면이 통째로 백지가 된다.

   yr-embed.js 는 실행되자마자 #yr-root 에 .yr-js 를 붙인다.
   그 클래스가 «없을 때만» 아래 안전장치가 작동한다.
   (모든 경우에 걸면 JS가 정상일 때도 2.5초 뒤 스크롤 등장 효과가 죽는다)
   ===================================================================== */
@keyframes yr-failsafe-show{ to{ opacity:1; transform:none; clip-path:none } }

#yr-root:not(.yr-js) .reveal,
#yr-root:not(.yr-js) .hi,
#yr-root:not(.yr-js) .mask{
  animation: yr-failsafe-show 0.01s linear 2.5s forwards;
}

/* 히어로 포스터는 영상이 안 들어와도 보이게 */
#yr-root .hero__poster{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  #yr-root:not(.yr-js) .reveal,
  #yr-root:not(.yr-js) .hi,
  #yr-root:not(.yr-js) .mask{ opacity:1; transform:none; animation:none }
}