/* =========================================================================
 * Weverse 알기 쉬운 개인정보 처리방침 — 공통 스타일
 * 사용처: union/easy_privacy_policy_{ko,en,es,ja}.html
 * ========================================================================= */

  :root{
    --navy:#0E1C36;
    --navy-2:#15264a;
    --mint:#00B8C1;
    --mint-deep:#018A91;
    --mint-tint:#EAFCFE;
    --blue:#0E9EFF;
    --white:#FFFFFF;
    --page:#F4F6FA;
    --page-alt:#FAFBFD;
    --ink:#212121;
    --muted:#6B7999;
    --line:#E6EAF2;
    --line-strong:#D5DBE7;
    --radius:18px;
    --radius-sm:12px;
    --shadow-sm:0 1px 2px rgba(14,28,54,.04), 0 4px 16px rgba(14,28,54,.04);
    --shadow-md:0 2px 4px rgba(14,28,54,.05), 0 18px 40px rgba(14,28,54,.08);
    --shadow-lg:0 4px 8px rgba(14,28,54,.06), 0 24px 56px rgba(14,28,54,.12);
    --font:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Hiragino Kaku Gothic Pro", "Malgun Gothic", "맑은 고딕", sans-serif;
    --nav-h:60px;
    --ease-out:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    scroll-padding-top:var(--nav-h);
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition:none !important;animation:none !important;}
    .brand,.pill,.hero h1,.hero-sub{opacity:1 !important;transform:none !important;}
  }
  body{
    margin:0;
    font-family:var(--font);
    background:var(--page);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:900px;margin:0 auto;padding:0 30px;}
  section{position:relative;}
  .cc-body, .sf-body, .pv-status, .acc-body, .disposal-value,
  .desc, .hero-sub{
    text-rendering:optimizeLegibility;
  }
  /* ===== 상단 스티키 섹션 네비 =====
     기본 상태:
       - height/border/box-shadow/background/backdrop-filter 모두 0/none → 0px 도 차지 안 함
       - visibility:hidden + opacity:0
     JS가 [data-visible="1"] 부여 시:
       - 높이/배경/보더/그림자 복귀 + visible */
  .sec-nav{
    position:sticky;
    top:0;
    z-index:50;
    height:0;                       /* 기본: 공간 없음 */
    overflow:hidden;                /* 자식이 음수 transform 으로 새어나오지 않도록 */
    background:transparent;         /* 숨김 시 흰 배경 X */
    border-bottom:0;                /* 숨김 시 1px 보더 X */
    box-shadow:none;                /* 숨김 시 1px 그림자 줄 X */
    -webkit-backdrop-filter:none;   /* 숨김 시 blur 레이어 X */
            backdrop-filter:none;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .22s linear, transform .22s var(--ease-out), box-shadow .25s ease, visibility 0s linear .22s;
    will-change:opacity, transform;
  }
  .sec-nav.is-visible{
    box-shadow:0 1px 0 rgba(14,28,54,0.04), 0 8px 24px rgba(14,28,54,0.06);
  }
  /* visible 상태: 높이/배경/blur/보더 모두 복귀. */
  .sec-nav[data-visible="1"]{
    height:var(--nav-h);
    background:rgba(255,255,255,0.92);
    border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
            backdrop-filter:saturate(180%) blur(14px);
    box-shadow:0 1px 0 rgba(14,28,54,0.02), 0 8px 24px rgba(14,28,54,0);
    visibility:visible;
    transition:opacity .22s linear, transform .22s var(--ease-out), box-shadow .25s ease, visibility 0s linear 0s;
  }
  .sec-nav-inner{
    position:relative;
    width:100%;height:100%;
    padding:0 20px;
    display:flex;align-items:stretch;
    justify-content:safe center; /* 가능하면 가로 중앙, 넘치면 자동 시작 정렬 */
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .sec-nav-inner::-webkit-scrollbar{display:none;}
  .sec-nav-item{
    flex:none;display:inline-flex;align-items:center;gap:6px;
    padding:0 14px;height:100%;
    color:var(--muted);font-size:13.5px;font-weight:700;text-decoration:none;
    white-space:nowrap;letter-spacing:-.01em;
    transition:color .18s ease, opacity .22s ease, filter .22s ease;
    position:relative;
    opacity:.55; /* 비활성 탭은 살짝 흐리게 */
  }
  .sec-nav-item .nv-idx{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 5px;border-radius:6px;
    background:#EEF1F7;color:var(--muted);
    font-size:11px;font-weight:800;letter-spacing:0;
    transition:background-color .18s ease, color .18s ease;
  }
  .sec-nav-item:hover{color:var(--navy);opacity:1;}
  .sec-nav-item:hover .nv-idx{background:#E1E6F0;color:var(--navy);}
  .sec-nav-item:focus-visible{outline:2px solid var(--mint);outline-offset:-4px;border-radius:6px;opacity:1;}
  .sec-nav-item.is-active{color:var(--mint-deep);opacity:1;}
  .sec-nav-item.is-active .nv-idx{background:var(--mint);color:#fff;}
  /* 슬라이딩 밑줄 인디케이터 (JS가 left/width 제어) */
  .sec-nav-indicator{
    position:absolute;
    left:0;bottom:0;
    height:3px;width:0;
    background:var(--mint);
    border-radius:3px 3px 0 0;
    transform:translateX(0);
    transition:transform .32s var(--ease-out), width .32s var(--ease-out), opacity .2s ease;
    pointer-events:none;
    opacity:0;
  }
  .sec-nav-indicator.is-ready{opacity:1;}

  /* ===== INTRO = HERO + LIFECYCLE 통합 한 화면 =====
     .intro 자체가 한 뷰포트(100dvh)를 차지하며, 내부에 hero(상단)와
     lifecycle(하단)이 flex로 함께 배치된다.
     배경: 비디오 (.intro-bg-video) + 어두운 오버레이(.intro::before)
           + 메시 그라데이션 베이스(.intro background) + 떠다니는 블롭(.intro::after) */
  .intro{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(0,184,193,.18), transparent 60%),
      radial-gradient(900px 500px at 10% 110%, rgba(14,158,255,.12), transparent 60%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color:#fff;
  }
  /* 배경 비디오 */
  .intro-bg-video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center;
    z-index:0;
    pointer-events:none;
    /* 디코딩 중에는 자연스럽게 페이드인 */
    opacity:0;
    transition:opacity .8s ease;
  }
  .intro-bg-video.is-ready{opacity:1;}
  /* 비디오 위 톤다운 오버레이: 가독성 + 메시 톤 유지 (비디오 없으면 fallback 메시도 함께 받쳐줌)
     → 답답해 보이지 않도록 어두운 베이스를 대폭 낮추고 컬러 액센트도 은은하게 */
  .intro::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(900px 500px at 80% -10%, rgba(0,184,193,.10), transparent 60%),
      radial-gradient(700px 400px at 10% 110%, rgba(14,158,255,.07), transparent 60%),
      linear-gradient(160deg, rgba(14,28,54,.28) 0%, rgba(21,38,74,.34) 100%);
    pointer-events:none;
    z-index:1;
  }
  /* 떠다니는 그라데이션 블롭 컨테이너 — JS가 .intro 직계 자식으로 4개 블롭 생성.
     .intro 전체를 덮으므로 hero/lifecycle 어느 영역에서도 잘리지 않음.
     기존 .intro::after 를 대체 (가상요소는 ::before 만 비디오 톤다운에 사용).
     큰 폭의 이동(±50~70%)을 자연스럽게 수용하기 위해 inset 을 넉넉히 음수로 확장.
     z-index:2 → 비디오 톤다운(::before, z=1) 위에 얹혀, 밝은 블롭이 우주 위에 은은하게 번지도록.
     mix-blend-mode:screen → 밝은 색이 어두운 배경 위에서 더해지듯 합성되어,
     별빛/메시 그라데이션과 자연스럽게 녹아들어 "있는 듯 없는 듯" 은은한 빛 번짐만 남김. */
  .intro-blobs{
    position:absolute;inset:-40%;
    overflow:hidden;
    pointer-events:none;
    z-index:2;
    mix-blend-mode:screen;
    opacity:.7;
  }
  .intro-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(72px) saturate(110%);
    opacity:1;
  }
  /* 4가지 곡선 경로 — 각 블롭이 무작위로 하나를 선택. 0% == 100% 로 닫힘 → 점프 없이 무한 반복.
     X(좌우): 화면 전체(±55~65%)를 가로지름.
     Y(상하): 별이 보이는 화면 상단 위주로 떠다니도록 음수 쪽으로 편향(-80% ~ +20% 범위).
     → 블롭이 hero(별빛) 영역에 머무는 시간이 길고, 가끔만 중앙 부근까지 내려옴. */
  @keyframes blobDrift1{
    0%   {transform:translate3d(-55%,-65%,0) scale(1.00) rotate(-6deg);}
    25%  {transform:translate3d( 50%,-75%,0) scale(1.12) rotate( 4deg);}
    50%  {transform:translate3d( 65%,-15%,0) scale(1.05) rotate( 8deg);}
    75%  {transform:translate3d(-30%, 10%,0) scale(1.15) rotate(-4deg);}
    100% {transform:translate3d(-55%,-65%,0) scale(1.00) rotate(-6deg);}
  }
  @keyframes blobDrift2{
    0%   {transform:translate3d( 60%,  0%,0) scale(1.08) rotate( 5deg);}
    25%  {transform:translate3d(-40%,-30%,0) scale(1.00) rotate(-7deg);}
    50%  {transform:translate3d(-65%,-75%,0) scale(1.12) rotate( 0deg);}
    75%  {transform:translate3d( 45%,-80%,0) scale(1.04) rotate( 8deg);}
    100% {transform:translate3d( 60%,  0%,0) scale(1.08) rotate( 5deg);}
  }
  @keyframes blobDrift3{
    0%   {transform:translate3d(-60%,-20%,0) scale(1.03) rotate( 3deg);}
    33%  {transform:translate3d( 50%, 15%,0) scale(1.14) rotate(-5deg);}
    66%  {transform:translate3d( 65%,-70%,0) scale(1.00) rotate( 7deg);}
    100% {transform:translate3d(-60%,-20%,0) scale(1.03) rotate( 3deg);}
  }
  @keyframes blobDrift4{
    0%   {transform:translate3d( 45%,-75%,0) scale(1.08) rotate(-3deg);}
    33%  {transform:translate3d(-55%,-50%,0) scale(1.00) rotate( 6deg);}
    66%  {transform:translate3d(-35%, 20%,0) scale(1.12) rotate(-5deg);}
    100% {transform:translate3d( 45%,-75%,0) scale(1.08) rotate(-3deg);}
  }
  /* reduced-motion: 영상/블롭 정지 (메시 그라데이션 자체는 정적이라 그대로 표시) */
  @media (prefers-reduced-motion: reduce){
    .intro-bg-video{animation:none !important;}
    .intro-blob   {animation:none !important;}
  }
  .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);}

  /* HERO: 상단 영역(flex:1).
     남는 빈 공간이 위쪽으로 가도록 콘텐츠를 아래쪽 정렬 → lifecycle과 자연스럽게 붙음
     z-index:3 → 떠다니는 블롭(.intro-blobs, z=2) 위에 위치해 별빛/텍스트가 가려지지 않음 */
  .hero{
    position:relative;z-index:3;
    flex:1 1 auto;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    min-height:0; /* flex item overflow 방지 */
  }
  /* 별빛(반짝임) 레이어 — hero 콘텐츠 뒤, 배경 그라데이션 앞.
     screen 블렌딩으로 컬러 후광이 어두운 배경 위에서 자연스럽게 가산 합성되어 더 환하게 보임. */
  .hero-stars{
    position:absolute;inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    mix-blend-mode:screen;
  }
  .hero-star{
    position:absolute;
    display:block;
    background:#fff;
    border-radius:50%;
    opacity:0;
    animation:starTwinkle var(--dur,3s) ease-in-out var(--delay,0s) 1 both;
    /* 모든 별의 기본 후광 — 반경/알파 추가 강화 */
    box-shadow:
      0 0 18px  rgba(255,255,255,1),
      0 0 46px  rgba(255,255,255,.90),
      0 0 88px  rgba(255,255,255,.62),
      0 0 140px rgba(255,255,255,.36);
  }
  /* 민트 톤 별 — 살짝 푸른 후광 */
  .hero-star.is-mint{
    background:var(--mint);
    box-shadow:
      0 0 22px  rgba(0,184,193,1),
      0 0 56px  rgba(0,184,193,.95),
      0 0 110px rgba(0,184,193,.70),
      0 0 170px rgba(0,184,193,.42);
  }
  /* 블루 톤 별 — 뜨거운 별의 푸른 후광 */
  .hero-star.is-blue{
    background:#bcdcff;
    box-shadow:
      0 0 22px  rgba(14,158,255,1),
      0 0 56px  rgba(14,158,255,.95),
      0 0 110px rgba(14,158,255,.70),
      0 0 170px rgba(14,158,255,.42);
  }
  /* 노랑 톤 별 — 황색 거성 느낌의 따뜻한 후광 */
  .hero-star.is-yellow{
    background:#fff5b0;
    box-shadow:
      0 0 22px  rgba(255,210,80,1),
      0 0 56px  rgba(255,210,80,.95),
      0 0 110px rgba(255,210,80,.70),
      0 0 170px rgba(255,210,80,.42);
  }
  /* 주황 톤 별 — 따뜻한 살구빛 후광 */
  .hero-star.is-orange{
    background:#ffd6c2;
    box-shadow:
      0 0 22px  rgba(255,138,90,1),
      0 0 56px  rgba(255,138,90,.92),
      0 0 110px rgba(255,138,90,.66),
      0 0 170px rgba(255,138,90,.40);
  }
  /* 레드 톤 별 — 차가운 적색 거성의 진한 붉은 후광 */
  .hero-star.is-red{
    background:#ffb8b8;
    box-shadow:
      0 0 22px  rgba(235,70,70,1),
      0 0 56px  rgba(235,70,70,.92),
      0 0 110px rgba(235,70,70,.66),
      0 0 170px rgba(235,70,70,.40);
  }
  /* 큰 별: 한층 풍성하게 번지는 후광 */
  .hero-star.is-glow{
    box-shadow:
      0 0 28px  rgba(255,255,255,1),
      0 0 70px  rgba(255,255,255,1),
      0 0 130px rgba(255,255,255,.78),
      0 0 200px rgba(255,255,255,.50);
  }
  .hero-star.is-mint.is-glow{
    box-shadow:
      0 0 32px  rgba(0,184,193,1),
      0 0 78px  rgba(0,184,193,1),
      0 0 150px rgba(0,184,193,.82),
      0 0 230px rgba(0,184,193,.52);
  }
  .hero-star.is-blue.is-glow{
    box-shadow:
      0 0 32px  rgba(14,158,255,1),
      0 0 78px  rgba(14,158,255,1),
      0 0 150px rgba(14,158,255,.80),
      0 0 230px rgba(14,158,255,.50);
  }
  .hero-star.is-yellow.is-glow{
    box-shadow:
      0 0 32px  rgba(255,210,80,1),
      0 0 78px  rgba(255,210,80,1),
      0 0 150px rgba(255,210,80,.80),
      0 0 230px rgba(255,210,80,.50);
  }
  .hero-star.is-orange.is-glow{
    box-shadow:
      0 0 32px  rgba(255,138,90,1),
      0 0 78px  rgba(255,138,90,1),
      0 0 150px rgba(255,138,90,.76),
      0 0 230px rgba(255,138,90,.46);
  }
  .hero-star.is-red.is-glow{
    box-shadow:
      0 0 32px  rgba(235,70,70,1),
      0 0 78px  rgba(235,70,70,1),
      0 0 150px rgba(235,70,70,.76),
      0 0 230px rgba(235,70,70,.46);
  }
  /* 한 사이클 동안 별이 비스듬히(좌상 방향) 흐름.
     --flow-x / --flow-y 는 JS 가 별마다 다르게 주입 (크기·랜덤 편차에 비례).
     0%   : 시작 위치에서 약간 우하쪽에 미리 와 있음
     50%  : 정점(가장 밝음) — 가운데
     100% : 좌상쪽으로 흘러가며 사라짐 */
  @keyframes starTwinkle{
    0%   { opacity:0; transform:translate3d(calc(var(--flow-x, -30px) * -0.5), calc(var(--flow-y, -18px) * -0.5), 0) scale(.6); }
    50%  { opacity:var(--peak,.95); transform:translate3d(0, 0, 0) scale(1.05); }
    100% { opacity:0; transform:translate3d(calc(var(--flow-x, -30px) *  0.5), calc(var(--flow-y, -18px) *  0.5), 0) scale(.6); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-star{ animation:none !important; opacity:.7 !important; transform:none !important; }
  }
  .hero-inner{
    position:relative;z-index:1;
    padding:0 32px 28px;max-width:900px;margin:0 auto;width:100%;
  }
  .brand{display:flex;align-items:center;gap:11px;margin-bottom:clamp(16px,3vh,32px);opacity:0;transform:translateY(20px);}
  .brand-logo{width:95px;height:20px;color:#fff;display:block;}
  .pill{
    display:inline-flex;align-items:center;gap:9px;
    padding:4px 12px;border-radius:999px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
    font-size:12px;color:#cfd6e6; margin-left: 5px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;transform:translateY(20px);
  }
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(0,184,193,.25);}
  .hero h1{
    font-size:clamp(28px,4.6vw,46px);font-weight:800;line-height:1.2;margin:clamp(14px,2.2vh,22px) 0 0;
    letter-spacing:-.02em;
    opacity:0;transform:translateY(20px);
  }
  .hero h1 .hl{color:var(--mint);}
  .hero-sub{
    margin-top:clamp(10px,1.6vh,18px);
    font-size:clamp(14px,1.6vw,17px);line-height:1.65;color:#aeb9cf;max-width:none;
    opacity:0;transform:translateY(20px);
  }
  .hero-sub-line{display:block;white-space:nowrap;}
  .brand{display:flex;align-items:center;gap:11px;margin-bottom:clamp(16px,3vh,32px);
    opacity:0;transform:translateY(20px);
    animation:heroIn .7s var(--ease-out) .05s both;
  }
  .pill{
    /* 기존 속성 동일 */
    opacity:0;transform:translateY(20px);
    animation:heroIn .7s var(--ease-out) .2s both;
  }
  .hero h1{
    /* 기존 속성 동일 */
    opacity:0;transform:translateY(20px);
    animation:heroIn .7s var(--ease-out) .35s both;
  }
  .hero-sub{
    /* 기존 속성 동일 */
    opacity:0;transform:translateY(20px);
    animation:heroIn .7s var(--ease-out) .5s both;
  }
  /* 아래 4줄은 삭제 */
  /* .intro.is-loaded .brand {...} .pill {...} h1 {...} .hero-sub {...} */
  @keyframes heroIn{
    to{opacity:1;transform:translateY(0);}
  }

  /* LIFECYCLE: 하단 영역(고정 자연 높이) — hero 바로 아래 붙음
     z-index:3 → 떠다니는 블롭(.intro-blobs, z=2) 위에 위치해 카드/아이콘이 가려지지 않음 */
  .lifecycle{
    position:relative;z-index:3;
    flex:1 1 auto;
    padding:clamp(14px,2.4vh,24px) 0 clamp(16px,3vh,32px);
  }
  .wrap-icons{
    display:grid;grid-template-columns:repeat(6,1fr);
    gap:20px;
    margin:0;
    max-width:800px;
    padding:clamp(16px,2.4vh,24px) 24px;
    background:rgba(14,28,54,.5);
    border:1px solid rgba(255,255,255,.10);border-radius:20px;
    box-shadow:0 12px 40px rgba(0,0,0,.20);
    position:relative;
    isolation:isolate;
    -webkit-backdrop-filter:blur(8px) saturate(120%);
    backdrop-filter:blur(8px) saturate(120%);
  }
  .item-icon{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding: 24px 6px 6px 6px;
    text-decoration:none;color:#fff;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;
    font-size:12.5px;font-weight:700;text-align:center;line-height:1.35;
    /* item-icon & lc-ico가 동시에 시작/종료되도록 동일한 duration/ease 사용 */
    transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out), background-color .22s var(--ease-out);
    cursor:pointer;
    transform:translateY(0) scale(1);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .item-icon:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  .lc-ico{
    width:50px;height:50px;border-radius:12px;
    display:grid;place-items:center;
    background:linear-gradient(140deg, rgba(0,184,193,.22), rgba(0,184,193,.08));
    color:var(--mint);
    /* item-icon hover 시 함께 호출되므로 동일한 duration/ease로 동기화 */
    transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s var(--ease-out);
    transform: scale(1);
  }  .lc-ico svg{width:22px;height:22px;}
  /* 스크롤 힌트(인트로 하단) */
  .hero-scroll-hint{
    position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
    display:inline-flex;flex-direction:column;align-items:center;gap:4px;
    color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    opacity:0;animation:hintIn .7s var(--ease-out) 1s forwards;
    pointer-events:none;z-index:2;
  }
  .hero-scroll-hint svg{width:16px;height:16px;animation:hintBounce 2s ease-in-out infinite;}
  @keyframes hintIn  {to{opacity:.7;}}
  @keyframes hintBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

  /* ===== 본문 섹션 공통 ===== */
  .sec,.intro{
    transition:opacity .6s ease, filter .6s ease;
  }
  /* .sec padding: 뷰포트 높이에 따라 가변 (최대 150px, 최소 56px).
     큰 화면에서는 여백이 풍성하고, 짧은 화면에서는 다음 섹션의 가장자리가 살짝 보임. */
  .sec{padding:clamp(56px, 12vh, 150px) 0;position:relative;}
  /* 활성이 아닌 모든 섹션(이전·이후 모두)은 흐리게 가라앉음.
     활성 섹션은 .is-active 가 부여되어 선명하게 표시됨.
     intro 도 동일한 규칙으로 첫 섹션 active 시 가라앉도록 처리. */
  .sec.is-dimmed,
  .intro.is-dimmed{
    opacity:.3;
    filter:blur(.5px) saturate(.85);
  }
  .sec.is-active,
  .intro.is-active{
    opacity:1;
    filter:none;
  }
  @media (prefers-reduced-motion: reduce){
    .sec,.intro{transition:opacity .3s ease !important;filter:none !important;}
    .sec.is-dimmed,.intro.is-dimmed{filter:none !important;}
  }
  .sec:nth-of-type(even){background:var(--page-alt);}
  .sec:nth-of-type(odd){background:var(--white);}
  .sec-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:40px;}
  .sec-num{
    flex:none;width:64px;height:64px;
    border-radius:20px;
    background:linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 2px 6px rgba(14,28,54,.18), 0 10px 24px rgba(14,28,54,.18);
    display:grid;grid-template-columns:1fr;place-items:center;
    padding:4px;position:relative;
    /* overflow:hidden 제거 → idx 태그가 우상단 밖으로 살짝 튀어나옴 */
  }
  /* 내부 글로우는 별도 레이어로 분리하여 overflow 없이도 둥근 영역에만 표시 */
  .sec-num::after{
    content:"";position:absolute;inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at 30% 20%, rgba(0,184,193,.22), transparent 60%);
    pointer-events:none;
  }
  /* 숫자 태그: sec-num 우상단 모서리 밖에 둥근 알약 형태 */
  .sec-num .idx{
    position:absolute;
    top:-8px;right:-10px;
    min-width:28px;height:16px;
    padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--mint);color:#fff;
    font-size:10px;font-weight:800;letter-spacing:.04em;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(0,184,193,.45), 0 0 0 2px #fff;
    z-index:2;
  }
  /* 짝수 섹션(연한 회색 배경)에서 흰 보더가 보이도록 보더 색을 페이지-alt와 매치 */
  .sec:nth-of-type(even) .sec-num .idx{
    box-shadow:0 4px 10px rgba(0,184,193,.45), 0 0 0 2px var(--page-alt);
  }
  .sec-num svg{
    width:48px;height:48px;position:relative;z-index:1;
    /* 다크 배경 위 흰색 아이콘의 가독성을 살짝 더 끌어올리는 미세 글로우 */
    filter:drop-shadow(0 0 6px rgba(0,184,193,.40));
  }
  .sec-head-text{padding-top:3px;flex:1;min-width:0;}
  .sec-head h2{margin:0;font-size:26px;line-height:1.3;color:var(--navy);letter-spacing:-.02em;font-weight:800;}
  .sec-head .desc{
    margin:9px 0 0;font-size:15.5px;color:#4d586f;line-height:1.7;
    max-width:64ch;
  }

  /* ----- 01 수집: 아이콘+텍스트 가로 카드 그리드 (05 개인정보 보호 동일 패턴) ----- */
  .collect-cards{display:grid;grid-template-columns:repeat(1,1fr);gap:14px;margin-bottom:22px;}
  .cc-card{
    display:flex;align-items:center;gap:16px;
    padding:20px 22px;border-radius:var(--radius-sm);
    background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease;
  }
  .cc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
  .cc-text{flex:1;min-width:0;}
  .cc-title{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 6px;}
  .cc-body{font-size:14px;color:#2c3445;line-height:1.65;}

  /* ----- 02 이용: 01 수집과 동일한 카드 그리드(.collect-cards / .cc-*) 재사용 ----- */

  /* ----- 03 제공·위탁: 강조된 카드 ----- */
  .provide-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;}
  .pv-card{
    padding:24px;border-radius:var(--radius-sm);
    background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;gap:14px;
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease;
  }
  .pv-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(0,184,193,.35);}
  .pv-head{display:flex;align-items:center;gap:12px;}
  .pv-title{font-size:17px;font-weight:800;color:var(--navy);}
  .pv-rule{
    background:var(--mint-tint);border-left:3px solid var(--mint);
    padding:12px 14px;border-radius:0 10px 10px 0;
    font-size:14px;line-height:1.6;color:var(--navy);
  }
  .pv-rule strong{color:var(--navy);}
  .pv-rule .sub{display:block;color:var(--muted);font-size:13px;margin-top:4px;font-weight:500;}
  .pv-status-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
  .pv-status{font-size:14.5px;color:#2c3445;line-height:1.7;}

  /* ----- 04 파기: 보유기간·파기 방법 정의 표 ----- */
  .disposal-table{
    margin-top:6px;margin-bottom:22px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  .disposal-row{
    display:grid;grid-template-columns:160px 1fr;
    align-items:stretch;
  }
  .disposal-row + .disposal-row{border-top:1px solid var(--line);}
  .disposal-label{
    display:flex;align-items:center;
    padding:18px 22px;
    background:var(--mint-tint);
    color:var(--mint-deep);
    font-size:14px;font-weight:800;letter-spacing:.01em;
  }
  .disposal-value{
    padding:18px 22px;
    color:#2c3445;font-size:14.5px;line-height:1.7;
  }

  /* ----- 06 이용자 권리: 아코디언 ----- */
  .accordion{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
  .acc{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .acc.is-open{border-color:rgba(0,184,193,.45);box-shadow:var(--shadow-md);}
  .acc-btn{
    display:flex;align-items:center;gap:14px;
    width:100%;padding:18px 20px;
    background:transparent;border:0;
    text-align:left;cursor:pointer;
    font-family:inherit;
  }
  .acc-btn:focus-visible{outline:2px solid var(--mint);outline-offset:-4px;}
  .acc-tag{
    flex:none;font-size:11px;font-weight:800;color:#fff;
    padding:4px 9px;border-radius:6px;
    background:var(--navy-2);letter-spacing:.06em;text-align:center;
  }
  .acc.is-open .acc-tag{background:var(--mint);}
  .acc-title{flex:1;font-size:15.5px;font-weight:800;color:var(--navy);}
  .acc-caret{
    flex:none;width:24px;height:24px;
    display:grid;place-items:center;color:var(--muted);
    transition:transform .25s var(--ease-out), color .2s ease;
  }
  .acc.is-open .acc-caret{transform:rotate(180deg);color:var(--mint-deep);}
  .acc-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height .35s var(--ease-out);
  }
  .acc-body{
    padding:0 20px 18px 70px;
    font-size:14.5px;color:#2c3445;line-height:1.7;
  }
  .howto{
    margin-bottom:18px;
  }
  .howto .ht{color:var(--navy);font-size:14.5px;}
  .howto .ht p{margin:0;}
  /* 권리 행사 안내 리스트 (이용자의 권리 섹션) */
  .rights-list{
    list-style:none;margin:0 0 18px;padding:0;
    display:flex;flex-direction:column;gap:10px;
  }
  .rights-list li{
    position:relative;padding:0 0 0 18px;
    font-size:14.5px;color:#2c3445;line-height:1.7;
  }
  .rights-list li::before{
    content:"";position:absolute;left:0;top:.65em;
    width:6px;height:6px;border-radius:50%;
    background:var(--mint-deep);
  }
  .rights-list li strong{color:var(--navy);font-weight:800;}
  /* 권리 행사 연락 채널 리스트 (이용자의 권리 섹션 전용) */
  .howto .ht-channels{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:8px;
  }
  .howto .ht-channels li{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;background:#fff;border-radius:10px;
    box-shadow:0 1px 2px rgba(13,30,69,.04);
    font-size:14px;color:var(--navy);line-height:1.55;
  }
  .howto .ht-channels li > svg{
    flex:none;width:18px;height:18px;
    color:var(--mint-deep);
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  .howto .ht-channels .ch-text{flex:1;min-width:0;}
  .howto .ht-channels .ch-label{display:block;font-size:12.5px;color:#6a7592;letter-spacing:.01em;}
  .howto .ht-channels .ch-value{
    display:inline-block;font-weight:700;color:var(--mint-deep);
    word-break:break-all;
  }
  .howto .ht-channels a.ch-value{text-decoration:none;}
  .howto .ht-channels a.ch-value:hover{text-decoration:underline;}

  /* ----- 05 개인정보 보호: 아이콘+텍스트 가로 카드 그리드 ----- */
  .safe-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:14px;margin-bottom:22px;}
  .sf-card{
    display:flex;align-items:center;gap:16px;
    padding:20px 22px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease;
  }
  .sf-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(0,184,193,.35);}
  .sf-text{flex:1;min-width:0;}
  .sf-title{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 6px;}
  .sf-body{font-size:14px;color:#2c3445;line-height:1.65;}

  /* ----- 07 문의 ----- */
  .contact{
    background:linear-gradient(180deg, var(--white), var(--page));
    border:1px solid var(--line);border-radius:var(--radius);
    padding:28px;box-shadow:var(--shadow-sm);margin-bottom:22px;
  }
  .contact-panel{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:stretch;}
  .contact-primary{
    position:relative;overflow:hidden;
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color:#fff;border-radius:var(--radius-sm);
    padding:30px 28px;
    display:flex;flex-direction:column;justify-content:space-between;gap:24px;
    min-height:240px;
  }
  .contact-primary::after{
    content:"";position:absolute;right:-40px;bottom:-40px;
    width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle, rgba(0,184,193,.20), transparent 70%);
    pointer-events:none;
  }
  .contact-primary-top{position:relative;z-index:1;display:flex;align-items:flex-start;gap:18px;}
  .contact-icon{
    flex:none;width:48px;height:48px;border-radius:13px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
    display:grid;place-items:center;color:var(--mint);
  }
  .contact-icon svg{width:24px;height:24px;stroke:currentColor;}
  .contact-label{font-size:12px;font-weight:850;color:var(--mint-deep);letter-spacing:.04em;}
  .contact-primary .contact-label{color:rgba(255,255,255,.78);}
  .contact-primary h3{margin:6px 0 10px;font-size:18px;line-height:1.45;color:#fff;font-weight:800;letter-spacing:-.01em;}
  .contact-primary p{margin:0;color:#aab6ce;font-size:13.5px;line-height:1.65;}
  .contact-email{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 18px;border-radius:11px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
    color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .contact-email:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);transform:translateY(-1px);}
  .contact-email svg{width:18px;height:18px;stroke:currentColor;fill:none;}
  .contact-side{display:grid;gap:12px;}
  .contact-mini{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:18px 20px;display:flex;flex-direction:column;gap:4px;
    box-shadow:var(--shadow-sm);
  }
  .contact-mini strong{font-size:15px;color:var(--navy);font-weight:800;}
  .contact-mini span{font-size:13px;color:var(--muted);}
  .contact-mini a{font-size:13.5px;color:var(--mint-deep);font-weight:700;margin-top:4px;text-decoration:none;}
  .contact-mini a:hover{text-decoration:underline;}
  .contact-subgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px;}
  .contact-channel{
    display:flex;flex-direction:column;gap:6px;
    padding:18px 20px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    text-decoration:none;box-shadow:var(--shadow-sm);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .contact-channel:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px);}
  .contact-channel-muted{background:#F7F9FC;}
  .contact-channel .ctitle{font-size:13px;font-weight:850;color:var(--navy);}
  .contact-channel .cdesc{font-size:12.5px;color:var(--muted);line-height:1.45;}
  .contact-channel .caddr{font-size:13px;font-weight:850;color:var(--mint-deep);word-break:break-all;}
  .contact-channel-muted .caddr{color:var(--muted);}
  .agency-title{margin:6px 0 12px;font-size:13px;font-weight:850;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
  .agencies{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;}
  .agency{
    display:flex;flex-direction:column;gap:4px;padding:18px 20px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    text-decoration:none;box-shadow:var(--shadow-sm);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .agency:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px);}
  .agency .an{font-size:14.5px;font-weight:700;color:var(--navy);}
  .agency .ap{font-size:13px;color:var(--mint-deep);font-weight:700;}
  .agency .ad{font-size:12.5px;color:var(--muted);}

  /* ----- 공통 ----- */
  /* "이 항목 전체 내용 확인하기" 링크
     - 평소: 배경 없는 깔끔한 텍스트 링크 (보더/배경 없음)
     - hover: 은은한 배경 물결 + 화살표 무한 슬라이드 (글자 색상은 변하지 않음) */
  .full-link{
    position:relative;
    display:inline-flex;align-items:center;gap:8px;
    margin-top:14px;
    padding:6px 18px;
    color:var(--mint-deep);font-weight:700;font-size:14.5px;text-decoration:none;
    background:transparent;
    border:1px solid transparent;
    border-radius:999px;
    overflow:hidden;
    isolation:isolate; /* z-index 컨텍스트 격리 */
    transition:border-color .25s ease, box-shadow .25s ease, transform .2s var(--ease-out);
  }
  /* 배경 물결: ::before 가 좌→우 슬라이드인 + 은은한 그라데이션, hover 시 등장 */
  .full-link::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg,
      rgba(0,184,193,.04) 0%,
      rgba(0,184,193,.10) 40%,
      rgba(0,184,193,.16) 60%,
      rgba(0,184,193,.10) 80%,
      rgba(0,184,193,.04) 100%);
    background-size:200% 100%;
    background-position:200% 0;
    opacity:0;
    transition:opacity .35s ease;
    z-index:-1;
    pointer-events:none;
  }
  /* hover 시 물결이 계속 흐름 (은은하게) */
  @keyframes fullLinkWave{
    0%   {background-position:100% 0;}
    100% {background-position:-100% 0;}
  }
  /* 화살표 SVG: hover 시 무한 슬라이드 */
  .full-link svg{
    width:18px;height:18px;
    transition:transform .25s var(--ease-out);
  }
  @keyframes fullLinkArrow{
    0%   {transform:translateX(0);   opacity:1;}
    40%  {transform:translateX(8px); opacity:.2;}
    41%  {transform:translateX(-8px);opacity:0;}
    60%  {transform:translateX(-8px);opacity:0;}
    61%  {transform:translateX(-6px);opacity:.4;}
    100% {transform:translateX(0);   opacity:1;}
  }

  /* ===== Footer ===== */
  footer{
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color:#cdd5e6;
    position:relative;overflow:hidden;
  }
  footer::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(800px 400px at 80% -10%, rgba(0,184,193,.15), transparent 60%);
    pointer-events:none;
  }
  .footer-inner{position:relative;z-index:1;padding:64px 24px 56px;max-width:900px;margin:0 auto;}
  .footer-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  .footer-top h3{margin:0;color:#fff;font-size:22px;font-weight:800;line-height:1.45;letter-spacing:-.01em;}
  .footer-cta{
    display:inline-flex;align-items:center;gap:9px;padding:14px 24px;
    border-radius:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    color:#fff;font-weight:700;font-size:15px;text-decoration:none;
    transition:background .18s, transform .2s ease;
  }
  .footer-cta:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);}
  .footer-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;}
  .footer-meta{
    margin-top:44px;padding-top:26px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    color:#8493b0;font-size:13.5px;
  }
  .footer-meta .ver{display:inline-flex;align-items:center;gap:9px;}
  .footer-meta .verpill{padding:4px 11px;border-radius:999px;background:rgba(0,184,193,.14);color:var(--mint);font-weight:700;font-size:12.5px;}
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  .footer-links a{color:#cdd5e6;text-decoration:none;}
  .footer-links a:hover{color:#fff;text-decoration:underline;}

  /* ===== 플로팅 네비 버튼 (우측 하단) ===== */
  .floating-nav{
    position:fixed;right:22px;bottom:22px;z-index:60;
    display:flex;flex-direction:column;gap:8px;
    opacity:0;pointer-events:none;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s var(--ease-out);
  }
  .floating-nav.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .fn-btn{
    width:44px;height:44px;border-radius:12px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
            backdrop-filter:saturate(180%) blur(10px);
    border:1px solid var(--line);
    color:var(--navy);
    display:grid;place-items:center;cursor:pointer;
    box-shadow:0 4px 14px rgba(14,28,54,.08);
    transition:background .18s ease, color .18s ease, transform .15s ease, box-shadow .2s ease, border-color .18s ease;
    padding:0;font-family:inherit;
  }
  .fn-btn:hover:not(:disabled){background:var(--mint);color:#fff;border-color:var(--mint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,184,193,.30);}
  .fn-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  .fn-btn:disabled{opacity:.4;cursor:default;}
  .fn-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .fn-top{font-size:10px;font-weight:800;letter-spacing:.06em;}

  /* ===== 스크롤 트리거(공통) — 양방향 등장/퇴장 =====
     - 기본(미관찰): 안 보이게 (opacity:0 + 살짝 아래)
     - is-in: 등장 (opacity:1 + 원위치)
     - is-out-up: 위쪽으로 빠져나감(아래로 스크롤하다 위로 사라진 상태)
     - is-out-down: 아래쪽으로 들어오기 직전(위로 스크롤하다 아래로 사라진 상태) */
  .reveal{
    opacity:0;transform:translateY(30px);
    transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
    will-change:opacity, transform;
  }
  /* intro 내부의 reveal 요소는 초기 로드 시 깜빡임 방지를 위해 기본적으로 보이게 설정 */
  .intro .reveal{
    opacity:1;transform:translateY(0);
  }
  .reveal.is-in{opacity:1;transform:translateY(0);}
  .reveal.is-out-up   {opacity:0;transform:translateY(-24px);}
  .reveal.is-out-down {opacity:0;transform:translateY(30px);}

  .stagger > *{
    opacity:0;transform:translateY(20px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  /* intro 내부의 stagger 자식 요소는 초기 로드 시 깜빡임 방지를 위해 기본적으로 보이게 설정 */
  .intro .stagger > *{
    opacity:1;transform:translateY(0);
  }
  .stagger.is-in > *{opacity:1;transform:translateY(0);}
  .stagger.is-out-up   > *{opacity:0;transform:translateY(-16px);transition-delay:0s !important;}
  .stagger.is-out-down > *{opacity:0;transform:translateY(20px);transition-delay:0s !important;}
  /* 진입 시 stagger 딜레이 (퇴장에는 적용 X) */
  .stagger.is-in > *:nth-child(1){transition-delay:.05s;}
  .stagger.is-in > *:nth-child(2){transition-delay:.13s;}
  .stagger.is-in > *:nth-child(3){transition-delay:.21s;}
  .stagger.is-in > *:nth-child(4){transition-delay:.29s;}
  .stagger.is-in > *:nth-child(5){transition-delay:.37s;}
  .stagger.is-in > *:nth-child(6){transition-delay:.45s;}
  .stagger.is-in > *:nth-child(7){transition-delay:.53s;}
  .stagger.is-in > *:nth-child(8){transition-delay:.61s;}
  /* hover/focus 시에는 stagger 진입용 transition-delay를 무력화하여
     "커지는" 동작이 nth-child 위치와 무관하게 즉시 시작되도록 한다. */
  .stagger.is-in > .item-icon:hover,
  .stagger.is-in > .item-icon:focus-visible,
  .stagger.is-in > .item-icon:active,
  .stagger.is-in > .item-icon:hover .lc-ico{
    transition-delay:0s !important;
  }

  /* ===== 클릭 가능한 모든 요소: 기본 cursor 및 transition 토큰 ===== */
  a,button,[role="button"],.item-icon,.cc-card,.pv-card,.sf-card,
  .contact-channel,.agency,.acc-btn,.fn-btn,.contact-email,.footer-cta,.contact-mini a{
    cursor:pointer;
  }
  /* reduced-motion이 아닐 때 기본 transition (없으면 보강)
     * 주의: .item-icon / .lc-ico 는 hover 시 두 요소가 동시에 변하도록
     * 위쪽에서 동일 duration/ease 로 직접 정의했으므로 여기서는 제외한다. */
  .cc-card,.pv-card,.sf-card,
  .contact-channel,.agency,.contact-email,.footer-cta,.fn-btn,
  .full-link,.full-link svg,.footer-links a,.contact-mini a,
  .sec-nav-item,.sec-nav-item .nv-idx,
  .acc-btn,.acc-tag,.acc-caret{
    transition:
      transform .2s var(--ease-out),
      box-shadow .22s var(--ease-out),
      background-color .2s ease,
      border-color .2s ease,
      color .18s ease,
      opacity .2s ease;
  }

  /* ===== Hover (마우스 가능한 기기에서만) =====
     모바일 터치 sticky 방지를 위해 @media (hover: hover) 안에서만 정의 */
  @media (hover: hover) and (pointer: fine){

    /* ----- Lifecycle 아이콘 ----- */
    .item-icon:hover{
      transform:translateY(-5px) scale(1.05);
      background:rgba(255,255,255,.10);
      border-color:rgba(0,184,193,.55);
      box-shadow:0 14px 32px rgba(0,184,193,.30), 0 0 0 1px rgba(0,184,193,.20);
      /* stagger 진입용 transition-delay가 남아있어도 hover 반응은 즉시 시작 */
      transition-delay:0s !important;
    }
    .item-icon:hover .lc-ico{
      transform:scale(1.06);
      background:linear-gradient(140deg, rgba(0,184,193,.40), rgba(0,184,193,.18));
      box-shadow:0 4px 14px rgba(0,184,193,.30);
      transition-delay:0s !important;
    }
    .item-icon:active{transform:translateY(-2px) scale(1.02);transition-delay:0s !important;}

    /* ----- 카드(공통: 수집/제공·위탁/보호) ----- */
    .cc-card:hover,
    .pv-card:hover,
    .sf-card:hover,
    .contact-channel:hover,
    .agency:hover,
    .contact-mini:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-md);
      border-color:rgba(0,184,193,.40);
    }
    .cc-card:active,
    .pv-card:active,
    .sf-card:active,
    .contact-channel:active,
    .agency:active{
      transform:translateY(-1px);
      box-shadow:var(--shadow-sm);
    }

    /* ----- CTA 버튼: footer-cta / contact-email ----- */
    .footer-cta:hover,
    .contact-email:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.18);
      border-color:rgba(255,255,255,.34);
      box-shadow:0 12px 28px rgba(0,184,193,.25);
    }
    .footer-cta:active,
    .contact-email:active{
      transform:translateY(0);
      box-shadow:0 2px 6px rgba(0,0,0,.18);
    }

    /* ----- 텍스트 링크 ----- */
    /* full-link: 글자 색은 그대로, 배경(은은한 물결) + 화살표(무한 슬라이드)만 변화 */
    .full-link:hover{
      transform:translateY(-1px);
    }
    .full-link:hover::before{
      opacity:1;
      animation:fullLinkWave 5s linear infinite;
    }
    .full-link:hover svg{
      animation:fullLinkArrow 1.4s var(--ease-out) infinite;
    }
    .full-link:active{transform:translateY(0);}
    .footer-links a:hover{color:#fff;text-decoration:underline;}
    .contact-mini a:hover{color:var(--mint);text-decoration:underline;}
    .contact-mini:hover strong{color:var(--mint-deep);}

    /* ----- 플로팅 네비 버튼 ----- */
    .fn-btn:hover:not(:disabled){
      background:var(--mint);
      color:#fff;
      border-color:var(--mint);
      transform:scale(1.10);
      box-shadow:0 10px 24px rgba(0,184,193,.40);
    }
    .fn-btn:active:not(:disabled){
      transform:scale(.95);
      box-shadow:0 4px 10px rgba(0,184,193,.30);
    }

    /* ----- 네비 탭 ----- */
    .sec-nav-item:hover{color:var(--navy);opacity:1;}
    .sec-nav-item:hover .nv-idx{background:#D3D9E6;color:var(--navy);}
    .sec-nav-item.is-active:hover{color:var(--mint-deep);}
    .sec-nav-item.is-active:hover .nv-idx{background:var(--mint-deep);color:#fff;}

    /* ----- 아코디언 ----- */
    .acc:not(.is-open):hover{
      border-color:rgba(0,184,193,.35);
      box-shadow:var(--shadow-md);
      transform:translateY(-1px);
    }
    .acc:not(.is-open):hover .acc-tag{background:var(--navy);}
    .acc:not(.is-open):hover .acc-title{color:var(--mint-deep);}
    .acc:not(.is-open):hover .acc-caret{color:var(--mint-deep);}
  }

  /* ----- 클릭 직후 즉시 피드백 (모든 디바이스 공통) ----- */
  .item-icon:active{filter:brightness(1.05);}
  .fn-btn:active:not(:disabled){filter:brightness(.98);}

  /* reduced-motion: transform 제거 + 색상 변화만 유지 */
  @media (prefers-reduced-motion: reduce){
    .item-icon,.lc-ico,.cc-card,.pv-card,.sf-card,
    .contact-channel,.agency,.contact-email,.footer-cta,.fn-btn,
    .full-link,.full-link svg,.full-link::before,.acc{
      transition:background-color .18s ease, color .18s ease, border-color .18s ease !important;
      animation:none !important;
    }
    @media (hover: hover) and (pointer: fine){
      .item-icon:hover,.cc-card:hover,.pv-card:hover,
      .sf-card:hover,.contact-channel:hover,.agency:hover,
      .footer-cta:hover,.contact-email:hover,.fn-btn:hover:not(:disabled),
      .acc:not(.is-open):hover,.item-icon:hover .lc-ico,.full-link:hover svg,
      .full-link:hover,.full-link:hover::before{
        transform:none !important;
        scale:none;
        animation:none !important;
      }
      /* full-link: reduced-motion 시 애니메이션 없이 살짝 보더만 강조 */
      .full-link:hover{border-color:rgba(0,184,193,.25);background:rgba(0,184,193,.06);}
      .full-link:hover::before{opacity:0 !important;}
    }
  }

  /* ===== Responsive ===== */
  @media (max-width:900px){
    .wrap-icons{grid-template-columns:repeat(3,2fr);gap:10px;padding:18px 12px;max-width:680px;}
    .wrap-icons::before{display:none;}
    .collect-cards,.provide-grid,.safe-grid{grid-template-columns:1fr;}
    .disposal-row{grid-template-columns:1fr;}
    .disposal-label{padding:14px 18px 6px;background:transparent;}
    .disposal-value{padding:0 18px 16px;}
    .agencies{grid-template-columns:repeat(2,1fr);}
    .contact-panel,.contact-subgrid{grid-template-columns:1fr;}
    .sec{padding:56px 0;}
    .sec-head{gap:14px;margin-bottom:28px;}
    .sec-num{width:54px;height:54px;}
    .sec-num svg, .sec-num img{width:38px;height:38px;}
    .sec-num .idx{top:-7px;right:-9px;min-width:28px;height:20px;font-size:10.5px;padding:0 8px;}
    .sec-head h2{font-size:22px;}
    .acc-body{padding:0 18px 16px 78px;}
    .item-icon{font-size:12px;padding:10px 4px;gap:6px;}
    .lc-ico{width:38px;height:38px;}
    .lc-ico svg, .lc-ico img{width:20px;height:20px;}
    .hero-inner{padding:18px 22px 8px;}
    .brand{margin-bottom:18px;}
    /* 600~900px 중간 구간에서도 hero-sub-line 줄바꿈 활성화 (텍스트 잘림 방지) */
    .hero-sub{max-width:none;}
    .hero-sub-line{display:inline;white-space:normal;}
  }
  @media (max-width:600px){
    .hero-inner{padding:0 20px 6px;}
    .hero-sub{max-width:52ch;}
    .hero-sub-line{display:inline;white-space:normal;}
    .lifecycle{padding:8px 0 14px;}
    .wrap-icons{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 10px;}
    .item-icon{font-size:11.5px;padding:9px 4px;gap:6px;}
    .lc-ico{width:34px;height:34px;border-radius:10px;}
    .lc-ico svg, .lc-ico img{width:18px;height:18px;}
    .hero h1{font-size:clamp(22px,6vw,32px);}
    .hero-sub{font-size:13.5px;line-height:1.55;}
    .pill{font-size:12px;padding:6px 12px;}
    .sec{padding:clamp(32px, 6vh, 60px) 0;}
    .sec-head{flex-direction:column;}
    .contact{padding:22px;}
    .contact-primary{min-height:unset;padding:24px;}
    .contact-primary h3{font-size:17px;}
    /* ▼ 모바일 sec-nav: 활성 탭만 라벨 노출, 나머지는 번호 뱃지만 → 7개 모두 한 화면에 */
    .sec-nav-inner{padding:0 10px;gap:0;}
    .sec-nav-item{padding:0 6px;font-size:12.5px;gap:0;}
    .sec-nav-item .nv-idx{
      font-size:11px;min-width:24px;height:24px;border-radius:8px;padding:0;
    }
    .sec-nav-item .nv-label{
      /* 부드러운 너비/마진 트랜지션을 위해 max-width 사용 */
      display:inline-block;
      max-width:0;
      margin-left:0;
      overflow:hidden;white-space:nowrap;
      opacity:0;
      transition:max-width .28s var(--ease-out), margin-left .28s var(--ease-out), opacity .22s ease;
    }
    .sec-nav-item.is-active .nv-label{
      max-width:200px;        /* 한 화면 폭 내에서 충분히 표시될 수 있는 값 */
      margin-left:6px;
      opacity:1;
    }
    .floating-nav{right:14px;bottom:14px;}
    .fn-btn{width:40px;height:40px;border-radius:11px;}
    .fn-btn svg{width:16px;height:16px;}
    .footer-top h3{font-size:19px;}
    .hero-scroll-hint{display:none;}
    /* 모바일: 배경 비디오 비표시 + 별빛 레이어를 뷰포트 전체 높이(100vh)로 확장 */
    .intro-bg-video{display:none !important;}
    .hero-stars{
      /* hero 내부에서 절대 배치된 상태를 유지하되, 높이를 화면 전체로 늘림
         (부모 hero 가 flex 컬럼이라 height 가 콘텐츠 높이로 줄어들 수 있으므로
          별빛 레이어 자체 높이를 100vh/100dvh 로 명시) */
      height:100vh;
      height:100dvh; /* iOS 사파리 등 동적 UI 대응 */
      bottom:auto;   /* inset:0 의 bottom 무효화 → height 우선 적용 */
    }
  }
  @media (max-width:480px){
    .wrap-icons{grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 8px;}
    .item-icon{font-size:11px;padding:8px 3px;gap:5px;}
    .item-icon p{display:none;} /* 모바일에서는 아이콘만 노출하여 한 화면 유지 */
    .lc-ico{width:32px;height:32px;}
    .lc-ico svg, .lc-ico img{width:18px;height:18px;}
    .agencies{grid-template-columns:1fr;}
    .contact-email{width:100%;justify-content:center;}
    .acc-body{padding:0 16px 14px 16px;}
    /* 매우 좁은 화면에서도 7개 모두 들어가도록 패딩/사이즈 조정 */
    .sec-nav-inner{padding:0 8px;}
    .sec-nav-item{padding:0 4px;font-size:12px;}
    .sec-nav-item .nv-idx{min-width:22px;height:22px;font-size:10.5px;}
    .sec-nav-item.is-active .nv-label{margin-left:5px;}
    .accordion .acc-btn{padding:14px 16px;}
  }
  @media (max-width:360px){
    .wrap-icons{grid-template-columns:repeat(3,1fr);}
  }
  /* 짧은 뷰포트 보호: 매우 낮은 화면에서는 hero 콘텐츠 축소 */
  @media (max-height:640px){
    .brand{margin-bottom:14px;}
    .hero h1{font-size:clamp(22px,3.6vw,32px);margin-top:14px;}
    .hero-sub{margin-top:10px;font-size:13.5px;line-height:1.5;}
    .hero-inner{padding-top:0;padding-bottom:6px;}
    .lifecycle{padding-top:10px;}
    .wrap-icons{padding:12px 12px;gap:8px;}
    .item-icon{padding:10px 4px;gap:6px;font-size:12px;}
    .lc-ico{width:34px;height:34px;}
    .lc-ico svg, .lc-ico img{width:18px;height:18px;}
    .hero-scroll-hint{display:none;}

  }