:root{
  --green:#4AA63A;
  --green-dark:#3c8a2f;
  --ink:#1d1d1f;
  --gray:#6e6e73;
  --bg-soft:#f5f5f7;
  --radius-lg:28px;
  --radius-md:18px;
  /* ---- 전 사이트 글자 스케일 (통합 토큰, 같은 급 제목은 같은 단계만 사용. 2026-08-01 전체 +10%) ---- */
  --fs-display:clamp(48px,5.5vw,84px); /* 예비용 보존 (2026-08-05 부터 전 사이트 hero 는 --fs-h2 로 통일, 홈 포스터와 같은 단계) */
  --fs-h2:clamp(35px,3.7vw,57px);      /* 모든 구역 제목 */
  --fs-title:clamp(26px,2.6vw,37px);   /* feature-row 등 차상위 제목 */
  --fs-h3:clamp(23px,2.1vw,31px);      /* 카드 제목 */
  --fs-sub-lg:clamp(19px,1.65vw,23px); /* hero 부제 */
  --fs-sub:clamp(17px,1.4vw,21px);     /* 구역 부제 */
  --fs-stat:clamp(40px,3.5vw,55px);    /* 다크 구역 대형 숫자 */
  --fs-stat-sm:clamp(29px,2.2vw,37px); /* 글로벌 블록 소형 숫자 */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Pretendard","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  overflow-x:hidden;
  word-break:keep-all; /* 한국어 단어 단위 줄바꿈 — 단어 쪼개짐 방지 */
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* ---------- Nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:52px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-inner{
  max-width:1440px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(24px,2.5vw);
}
.nav-logo img{height:30px;} /* 신 CI 가로형 svg 는 투명 배경이라 multiply 불필요 (구 logo.jpg 흰 배경 시절 규칙) */
.nav-logo{display:flex;align-items:center;gap:9px;}
.nav-logo .nav-frog{height:30px;width:auto;mix-blend-mode:multiply;}
.nav-logo .nav-word{
  font-size:17.5px;font-weight:800;letter-spacing:.03em;color:#1d1d1f;
}
.nav-menu{display:flex;gap:34px;align-items:center;}
.nav-menu a{
  font-size:13.5px;color:#333336;font-weight:500;
  transition:color .2s;
}
.nav-menu a:hover{color:var(--green);}
.nav-menu a.active{color:var(--green);font-weight:600;}
.nav-cta{
  font-size:13px;font-weight:600;color:#fff!important;
  background:var(--green);
  padding:7px 16px;border-radius:980px;
  transition:background .2s;
}
.nav-cta:hover{background:var(--green-dark);color:#fff!important;}

/* ---------- Hero (home) ---------- */
.hero{
  padding:150px 24px 0;
  text-align:center;
}
.eyebrow{
  font-size:15px;font-weight:600;color:var(--green);
  margin-bottom:14px;letter-spacing:.02em;
}
.hero h1{
  font-size:var(--fs-display);
  font-weight:800;letter-spacing:-0.035em;line-height:1.08;
}
.hero p.sub{
  margin:22px auto 0;max-width:620px;
  font-size:var(--fs-sub-lg);color:var(--gray);
  font-weight:400;line-height:1.5;letter-spacing:-0.015em;
}
.hero-actions{
  margin-top:32px;display:flex;gap:26px;justify-content:center;align-items:center;
}
.btn-primary{
  background:var(--green);color:#fff;font-size:17px;font-weight:600;
  padding:14px 31px;border-radius:980px;
  transition:transform .2s,background .2s;
  display:inline-block;
}
.btn-primary:hover{background:var(--green-dark);transform:scale(1.02);}
.link-arrow{
  font-size:17px;font-weight:500;color:var(--green);
}
.link-arrow:after{content:" ›";font-weight:600;}
.hero-img{
  max-width:min(1500px,90vw);margin:64px auto 0;
}
.hero-img img{
  width:100%;mix-blend-mode:multiply;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  padding:150px 24px 80px;
  text-align:center;
}
.page-hero h1{
  font-size:var(--fs-h2); /* 홈/real 포스터 제목과 같은 단계 (2026-08-05 전 사이트 정렬) */
  font-weight:800;letter-spacing:-0.03em;line-height:1.1;
}
.page-hero p.sub{
  margin:20px auto 0;max-width:640px;
  font-size:var(--fs-sub);color:var(--gray);
  line-height:1.55;letter-spacing:-0.015em;
}

/* ---------- Dark section ---------- */
.tech{
  background:#000;color:#f5f5f7;
  padding:96px 24px;
  text-align:center;
  position:relative;overflow:hidden;
}
.tech:before{
  content:"";position:absolute;left:50%;top:-180px;
  width:1100px;height:600px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(74,166,58,.28),transparent 65%);
  pointer-events:none;
}
.tech .eyebrow{color:#7ed957;}
.tech h2{
  font-size:var(--fs-h2);font-weight:800;
  letter-spacing:-0.03em;line-height:1.12;
  position:relative;
}
.tech p.sub{
  margin:20px auto 0;max-width:600px;
  font-size:var(--fs-sub);color:#a1a1a6;line-height:1.55;
  position:relative;
}
.stats{
  margin:48px auto 0;max-width:min(1360px,92vw);
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  position:relative;
}
.stat b{
  display:block;
  font-size:var(--fs-stat);font-weight:800;letter-spacing:-0.03em;
  background:linear-gradient(135deg,#8be36f,#4AA63A);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat span{
  display:block;margin-top:8px;font-size:15px;color:#a1a1a6;font-weight:500;
}
.compare{
  margin:80px auto 0;max-width:760px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  position:relative;
}
.compare figure{
  background:#111113;border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);overflow:hidden;
}
.compare figure img{width:100%;aspect-ratio:1/1.05;object-fit:cover;}
.compare figcaption{
  padding:14px 0;font-size:14px;color:#a1a1a6;font-weight:500;
}
.compare .arrow{
  font-size:30px;color:#7ed957;font-weight:300;
}
/* 라이트 비교 구역 변형 (real 페이지 BEFORE&AFTER, 구 다크 구역 대체) */
.cmp-light{background:var(--bg-soft);}
.compare.light{margin-top:0;}
.compare.light figure{background:#fff;border:1px solid rgba(0,0,0,.05);}
.compare.light figcaption{color:var(--gray);}
.compare.light .arrow{color:var(--green);}
/* hero 부제 아래 회색 소주 (가격 등) */
.hero-note{display:inline-block;margin-top:12px;font-size:15px;color:#86868b;}
.tech-grid{
  margin:56px auto 0;max-width:min(1360px,92vw);
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  text-align:left;position:relative;
}
.tech-card{
  background:#111113;border:1px solid rgba(255,255,255,.09);
  border-radius:24px;padding:30px 32px;
}
.tech-card .tag{
  font-size:12.5px;font-weight:700;color:#7ed957;
  letter-spacing:.05em;text-transform:uppercase;
}
.tech-card h4{
  margin-top:10px;font-size:20px;font-weight:700;color:#f5f5f7;letter-spacing:-0.015em;
}
.tech-card p{
  margin-top:8px;font-size:14.5px;color:#a1a1a6;line-height:1.6;
}
.tech-foot{
  margin:56px auto 0;max-width:760px;position:relative;
  font-size:14px;color:#6e6e73;line-height:1.7;
}

/* ---------- Section shell ---------- */
section.block{padding:96px 24px;}
.container{max-width:min(1360px,94vw);margin:0 auto;}
.block-head{text-align:center;margin-bottom:56px;}
.block-head h2{
  font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em;
}
.block-head p{
  margin-top:14px;font-size:var(--fs-sub);color:var(--gray);
}

/* ---------- Business bento ---------- */
.bento{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.card{
  background:var(--bg-soft);border-radius:var(--radius-lg);
  overflow:hidden;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.10);}
.card.wide{grid-column:1/-1;}
.card .txt{padding:34px 36px 8px;}
.card .tag{
  font-size:13px;font-weight:700;color:var(--green);
  letter-spacing:.04em;text-transform:uppercase;
}
.card h3{
  margin-top:8px;font-size:var(--fs-h3);font-weight:800;letter-spacing:-0.02em;
}
.card p{
  margin-top:8px;font-size:15.5px;color:var(--gray);line-height:1.55;max-width:520px;
}
.card .img-wrap{padding:26px 26px 26px;}
.card.wide .img-wrap{padding:30px 40px 0;}
.card img{
  width:100%;border-radius:var(--radius-md);
  object-fit:cover;
}
.card.wide img{aspect-ratio:21/9;object-position:center 60%;border-radius:var(--radius-md) var(--radius-md) 0 0;}
.card:not(.wide) img{aspect-ratio:4/3;}
.bento.trio{grid-template-columns:repeat(3,1fr);}
.bento.trio .card .txt{padding:28px 30px 6px;}
.bento.trio .card h3{font-size:22px;}
.bento.trio .card p{font-size:14.5px;}
.bento.trio .card .img-wrap{padding:20px 20px 20px;}

/* ---------- Product grid ---------- */
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.prod-item{
  background:var(--bg-soft);border-radius:var(--radius-lg);
  overflow:hidden;text-align:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.prod-item:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.10);}
.prod-item .p-img{
  background:#fff;margin:18px 18px 0;border-radius:var(--radius-md);
  overflow:hidden;
}
.prod-item .p-img img{
  width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px;
}
.prod-item .p-txt{padding:20px 26px 26px;}
.prod-item h4{font-size:19px;font-weight:700;letter-spacing:-0.015em;}
.prod-item .p-desc{margin-top:4px;font-size:14px;color:var(--gray);}
.prod-item .p-price{
  margin-top:10px;font-size:15px;font-weight:600;color:var(--ink);
}
.prod-item .p-price small{font-weight:500;color:var(--gray);font-size:12.5px;margin-left:4px;}

/* ---------- Feature rows (technology page) ---------- */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  padding:70px 0;
}
.feature-row .f-txt .tag{
  font-size:13px;font-weight:700;color:var(--green);
  letter-spacing:.05em;text-transform:uppercase;
}
.feature-row .f-txt h3{
  margin-top:10px;font-size:var(--fs-title);font-weight:800;letter-spacing:-0.025em;line-height:1.18;
}
.feature-row .f-txt p{
  margin-top:14px;font-size:16px;color:var(--gray);line-height:1.65;
}
.feature-row .f-txt ul{
  margin-top:18px;list-style:none;
}
.feature-row .f-txt li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:15px;color:var(--ink);line-height:1.55;
}
.feature-row .f-txt li:before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;background:var(--green);
}
.feature-row .f-img img{
  width:100%;border-radius:var(--radius-lg);
}
.feature-row.flip .f-img{order:-1;}

/* ---------- Poster stream (Apple-style home) ---------- */
.poster{
  text-align:center;padding:76px 24px 52px;overflow:hidden;
  /* padding-bottom: 화면 간 전환 여백 — 이미지가 바닥에 붙지 않게 (2026-08-02 사용자 피드백). 여백을 줄여 이미지 크기 확보 (08-03) */
}
.poster:first-of-type{padding-top:112px;}
.poster.light{background:#fff;}
.poster.gray{background:var(--bg-soft);}
.poster.dark{background:#000;color:#f5f5f7;}
.poster.dark .eyebrow{color:#7ed957;}
.poster h2{
  font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em;line-height:1.08;
}
.poster .p-sub{
  margin:12px auto 0;max-width:620px;
  font-size:var(--fs-sub);color:var(--gray);line-height:1.5;
}
.poster.dark .p-sub{color:#a1a1a6;}
.poster .p-links{
  margin-top:22px;display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;
}
.poster .p-img{margin:32px auto 0;text-align:center;}
.poster .p-img img{width:100%;max-width:min(1360px,92vw);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
/* 데스크톱: 포스터 이미지 = 와이드 cover 캔버스 (애플식). 콘텐츠 폭을 채우고 뷰포트로 높이 역산, 인물은 중앙 상단 고정 */
@media (min-width:821px){
  .poster .p-img > img{
    width:min(1360px,92vw);max-width:86vw;display:inline-block;
    height:calc(100vh - 440px);min-height:340px;
    object-fit:cover;object-position:center 30%;
  }
}
.poster .p-img video{
  width:100%;display:block;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:#fff;
}
.poster.light .p-img video{mix-blend-mode:multiply;}
.poster.light .p-img img{mix-blend-mode:multiply;}
.poster .p-img img.contain{object-fit:contain;max-height:520px;width:auto;margin:0 auto;border-radius:0;}
.poster.dark .p-img img{border-radius:var(--radius-lg);margin-bottom:96px;}
/* 1,600만 컬러 화면: 그라데이션 대형 제목으로 색 다양성 표현 (애플 A칩 페이지 기법) */
/* 1,600만 컬러 화면: 이미지 아래 풀컬러 팔레트 띠 (RGB 색역 표현) */
.poster.splash .p-img:after{
  content:"";display:block;height:14px;max-width:min(520px,52vw);
  margin:26px auto 0;border-radius:7px;
  background:linear-gradient(90deg,#ff2d55,#ff9500,#ffcc00,#34c759,#00b4d8,#5e5ce6,#af52de,#ff2d92);
}
/* 이미지 아래 전문 스펙 배지 행 (RGB/CMYK/dpi 등) */
.p-foot{margin-top:20px;}
.spec-chip{
  display:inline-block;margin:0 5px;padding:7px 16px;
  border:1px solid rgba(0,0,0,.12);border-radius:980px;
  font-size:13px;font-weight:600;color:#6e6e73;letter-spacing:.02em;
}
.poster.splash h2{
  display:inline-block; /* 그라데이션을 전체 행이 아니라 글자 실제 폭에 분포 */
  background:linear-gradient(90deg,#ff2d55 0%,#ff9500 20%,#ffcc00 38%,#34c759 55%,#00b4d8 74%,#7b5bff 92%,#ff2d92 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em;
}

/* ---------- Photocard scene (카툰 화면: 큰 캐릭터 + 소형 폴라로이드) ---------- */
.photocard{
  position:relative;max-width:min(620px,42vw);margin:0 auto;
}
.photocard .pc-main{
  width:62%;margin:0 auto;mix-blend-mode:multiply;border-radius:0;
}
.photocard .pc-pol{
  position:absolute;left:4%;bottom:8%;width:27%;
  background:#fff;padding:2.5% 2.5% 4.5% 2.5%;
  border-radius:6px;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
  transform:rotate(-7deg);
}
.photocard .pc-pol img{width:100%;display:block;border-radius:2px;}
/* 데스크톱: photocard = ①화면과 같은 크기의 연회색 와이드 캔버스. 캐릭터는 중앙, 폴라로이드는 좌측 보조 */
@media (min-width:821px){
  .poster .p-img .photocard{
    max-width:none;width:min(1360px,92vw);
    height:calc(100vh - 440px);min-height:340px;
    background:var(--bg-soft);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;
  }
  .poster .p-img .photocard .pc-main{
    width:auto;height:96%;max-height:none;margin:0;
    /* 이미지의 스튜디오 회색 배경: 좌우+상단 가장자리를 페이드시켜 캔버스에 융합 (하단은 유지해 발이 바닥에 닿게) */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
      linear-gradient(to bottom,transparent,#000 10%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),
      linear-gradient(to bottom,transparent,#000 10%);
    mask-composite:intersect;
  }
  .photocard .pc-pol{
    left:21%;bottom:9%;width:clamp(120px,13%,175px);
    padding:12px 12px 22px;
  }
}

/* ---------- Split poster (①②화면: 좌측 글 + 우측 이미지 2단, 세로 이미지는 세로로) ---------- */
@media (min-width:821px){
  .poster.split{
    display:flex;align-items:center;justify-content:center;
    min-height:calc(100vh - 52px);padding:76px 24px 56px;
  }
  .poster.split:first-of-type{min-height:100vh;padding-top:112px;}
  .poster.split .ps-grid{
    width:min(1360px,92vw);
    display:grid;grid-template-columns:0.8fr 1.2fr;gap:64px;
    align-items:center;text-align:left;
  }
  .poster.split .p-sub{margin:16px 0 0;max-width:none;}
  .poster.split .p-links{justify-content:flex-start;margin-top:28px;}
  .poster.split .p-img{margin:0;}
  /* ①화면: 가로 구도 사진을 4:3 으로 가볍게 크롭 (양측 회색 벽만 잘리고 인물은 온전) */
  .poster.split .p-img > img{
    width:100%;height:auto;max-width:none;min-height:0;
    aspect-ratio:4/3;object-fit:cover;object-position:center 35%;
    border-radius:var(--radius-lg);
  }
  /* 정방형/세로 이미지 온전 표시 변형 (와이드 크롭 없음): split 내부 높이 확보, 중앙 포스터는 한 화면 기준 역산 */
  .poster.split .p-img > img.contain{
    aspect-ratio:auto;width:auto;height:auto;max-width:100%;
    max-height:calc(100vh - 240px);object-fit:contain;
    margin:0 auto;display:block;border-radius:var(--radius-lg);
  }
  .poster:not(.split) .p-img > img.contain{
    aspect-ratio:auto;width:auto;height:auto;max-width:86vw;
    max-height:calc(100vh - 440px);min-height:400px;object-fit:contain;
    margin:0 auto;display:inline-block;border-radius:var(--radius-lg);
  }
  /* 첫 화면은 글이 많고(가격 소주+버튼 2개), splash 화면은 팔레트+배지 행: 이미지 상한을 한 단계 줄여 한 화면 유지 */
  .poster:not(.split):first-of-type .p-img > img.contain,
  .poster.splash .p-img > img.contain{
    max-height:calc(100vh - 480px);
  }
  /* 와이드 경량 크롭 변형 (scan 화면 스캔 부스 등 가로 이미지: 2:1 로 상하만 소량 크롭, 폭을 좁혀 한 화면 내 유지) */
  .poster .p-img > img.wide{
    width:min(930px,72vw);height:auto;aspect-ratio:2/1;
    object-fit:cover;object-position:center 42%;
    max-height:none;min-height:0;border-radius:var(--radius-lg);
  }
  /* ②화면: 세로형 연회색 캔버스, 캐릭터 중앙 배치 (가로형 캔버스의 바탕색/융합 규칙 재사용) */
  .poster.split .p-img .photocard{
    width:100%;height:calc(100vh - 190px);min-height:460px;max-height:840px;
    border-radius:var(--radius-lg);
  }
  .poster.split .pc-pol{left:7%;bottom:7%;width:clamp(130px,24%,190px);}
}

/* ---------- Global map block (한 화면 한 블록: 좌측 글 + 우측 지도, 밝은 테마) ---------- */
.tech.global{
  padding:96px 24px;
  background:var(--bg-soft);color:var(--ink);
}
.tech.global:before{display:none;} /* 다크 구역 초록 광륜 제거 */
.tech.global .eyebrow{color:var(--green);}
.tech.global .sub{color:var(--gray);}
.tech.global .g-stats .stat b{
  background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);
}
.tech.global .g-stats .stat span{color:var(--gray);}
/* SVG 점자 지도는 투명 배경이라 반전 처리 불필요 */
.g-grid{
  max-width:min(1360px,92vw);margin:0 auto;
  display:grid;grid-template-columns:0.9fr 1.15fr;gap:56px;
  align-items:center;text-align:left;
}
.g-left .eyebrow{margin-bottom:12px;}
.g-left h2{font-size:var(--fs-h2);}
.g-left .sub{margin:16px 0 0;max-width:none;font-size:var(--fs-sub);}
.g-stats{
  display:flex;gap:40px;margin-top:36px;
}
.g-stats .stat b{font-size:var(--fs-stat-sm);}
.g-stats .stat span{font-size:13.5px;margin-top:5px;}
.g-links{
  margin-top:34px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.gmap{
  position:relative;margin:0;
}
.gmap img{width:100%;display:block;border-radius:18px;}
.gdot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:#4AA63A;transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(74,166,58,.9), 0 0 22px rgba(74,166,58,.5);
  transition:transform .25s;
}
.gdot:hover{transform:translate(-50%,-50%) scale(1.45);}
.gdot:hover .gdot-label{color:var(--ink);}
.gdot.big{
  width:14px;height:14px;background:#7ed957;
  animation:gpulse 2s ease-in-out infinite;
}
/* 광점 옆 국가명 라벨 (작은 회색 글자 무테, big=한국은 초록 굵게 강조) */
.gdot-label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:11.5px;font-weight:600;color:#6e6e73;
  white-space:nowrap;letter-spacing:0;
}
.gdot-label.left{left:auto;right:14px;}
.gdot-label.bottom{left:50%;top:15px;transform:translateX(-50%);}
.gdot.big .gdot-label{color:var(--green-dark);font-weight:800;font-size:13px;left:17px;}
/* 밀집구 라벨: 기본 숨김, 호버 시 표시 (호버 시 최상위로 올려 이웃 라벨에 가리지 않게) */
.gdot-label.hov{opacity:0;transition:opacity .25s;background:#fff;padding:2px 7px;border-radius:7px;box-shadow:0 4px 12px rgba(0,0,0,.12);}
.gdot:hover .gdot-label.hov{opacity:1;}
.gdot:hover{z-index:5;}
@keyframes gpulse{
  0%,100%{box-shadow:0 0 12px rgba(126,217,87,.9), 0 0 0 0 rgba(126,217,87,.5);}
  50%{box-shadow:0 0 18px rgba(126,217,87,1), 0 0 0 14px rgba(126,217,87,0);}
}
.stats.three{grid-template-columns:repeat(3,1fr);max-width:820px;}

/* ---------- Tech band image ---------- */
.t-img{max-width:min(1360px,92vw);margin:48px auto 0;position:relative;}
.t-img img{width:100%;max-height:54vh;object-fit:cover;border-radius:18px;display:block;}

/* ---------- Store page global photos ---------- */
.gphoto-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.gphoto-grid.trio{grid-template-columns:repeat(3,1fr);}
.gphoto{margin:0;}
.gphoto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);
}
.gphoto figcaption{
  margin-top:10px;font-size:14px;color:var(--gray);text-align:center;font-weight:500;
}

/* ---------- Ribbon (category promo bar) ---------- */
.ribbon{
  margin-top:52px;background:var(--bg-soft);
  text-align:center;font-size:14px;color:var(--ink);
  padding:14px 24px;
}
.ribbon a{color:var(--green);font-weight:600;}

/* ---------- Category hero + model strip ---------- */
.cat-hero{max-width:1100px;margin:0 auto;padding:64px 24px 8px;}
.cat-hero h1{
  font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em; /* 홈/real 포스터 제목과 같은 단계 */
}
.model-strip{
  display:flex;gap:38px;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  padding:34px 24px 46px;border-bottom:1px solid rgba(0,0,0,.08);
}
.model-strip a{
  text-align:center;font-size:12.5px;font-weight:500;color:var(--ink);
  width:84px;transition:color .2s;
}
.model-strip a:hover{color:var(--green);}
.model-strip img{
  height:60px;width:60px;object-fit:contain;margin:0 auto 8px;
  border-radius:14px;background:var(--bg-soft);padding:4px;
}
.model-strip .ms-ico{
  display:grid;place-items:center;height:60px;width:60px;margin:0 auto 8px;
  border-radius:14px;background:var(--bg-soft);font-size:22px;color:var(--green);
}
.model-strip span{display:block;}

/* ---------- Product detail hero ---------- */
.pd-hero{
  background:#000;color:#f5f5f7;text-align:center;
  padding:150px 24px 90px;position:relative;overflow:hidden;
}
.pd-hero:before{
  content:"";position:absolute;left:50%;top:-160px;
  width:1000px;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(74,166,58,.25),transparent 65%);
  pointer-events:none;
}
.pd-hero > *{position:relative;}
.pd-hero .eyebrow{color:#7ed957;letter-spacing:.08em;}
.pd-hero h1{
  font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em;line-height:1.05; /* 홈/real 포스터 제목과 같은 단계 */
}
.pd-hero .sub{
  margin:18px auto 0;max-width:560px;
  font-size:var(--fs-sub);color:#a1a1a6;line-height:1.55;
}
.pd-buy{margin-top:30px;}
.pd-buy .pd-price{
  margin-top:14px;font-size:15px;color:#a1a1a6;font-weight:500;
}
.pd-img{max-width:620px;margin:52px auto 0;}
.pd-img img{width:100%;border-radius:var(--radius-lg);}

/* ---------- Product points ---------- */
.points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;
}
.point{
  background:var(--bg-soft);border-radius:var(--radius-md);
  padding:22px 24px;font-size:15px;font-weight:600;line-height:1.5;text-align:center;
}

/* ---------- Compare / size table ---------- */
.table-wrap{overflow-x:auto;}
.cmp-table{
  width:100%;border-collapse:collapse;background:#fff;
  border-radius:var(--radius-md);overflow:hidden;
  font-size:15px;
}
.cmp-table th,.cmp-table td{
  padding:16px 20px;text-align:center;border-bottom:1px solid rgba(0,0,0,.06);
}
.cmp-table thead th{
  background:var(--bg-soft);font-weight:700;font-size:13.5px;color:var(--gray);
}
.cmp-table tbody th{
  text-align:left;font-weight:700;
}
.cmp-table tbody th a{color:var(--ink);}
.cmp-table tbody th a:hover{color:var(--green);}
.cmp-table tr.hot{background:rgba(74,166,58,.06);}
.hot-tag{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:980px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;vertical-align:2px;
}
/* 가격을 서버에서 못 받았을 때 표 대신 뜨는 안내 — js/prices.js 가 hidden 을 벗긴다.
   [hidden] 은 UA 기본값이 display:none 이지만 위 선택자에 밀릴 수 있어 못박아 둔다. */
[hidden]{display:none !important;}
.px-fallback{
  margin:0 auto;padding:8px 24px;max-width:560px;
  font-size:14px;color:var(--gray);text-align:center;
}
.px-fallback a{color:var(--green);font-weight:600;}
/* 이벤트 할인 표시 — js/prices.js 가 할인 중인 칸에만 .px-dc 를 붙이고
   `<s>정가</s> <b>할인가</b> <em class="px-badge">N%</em>` 를 넣는다(할인이 없으면 <b> 하나뿐이라
   겉보기는 종전과 같다). 크기는 em — 가격이 놓이는 자리마다 기본 글자크기가 다르다(표 15px, 히어로 15px,
   라인업 카드 15px). 배지 색은 브랜드 그린 하나로 통일한다(스튜디오는 accent, 여기는 --green).
   비교표 칸은 좁으므로 취소선·배지를 한 단계 줄인다 — 모바일에서 칸이 두 줄로 접히면 표가 무너진다. */
.px-dc{white-space:nowrap;}
.px-dc s{color:var(--gray);font-weight:500;font-size:.82em;text-decoration-thickness:1px;margin-right:.28em;}
.px-dc b{font-weight:inherit;color:inherit;}
.px-badge{
  display:inline-block;margin-left:.3em;padding:0 .5em;border-radius:980px;
  background:var(--green);color:#fff;font-style:normal;font-size:.72em;font-weight:700;
  line-height:1.7;vertical-align:1px;letter-spacing:-0.02em;
}
.cmp-table .px-dc{font-size:.94em;}
.cmp-table .px-dc s{font-size:.76em;}
.cmp-table .px-badge{font-size:.66em;padding:0 .42em;}
@media (max-width:560px){
  /* 좁은 화면의 비교표 — 취소선 정가는 줄을 바꿔 아래로 내린다(칸을 넓히는 것보다 표가 덜 무너진다). */
  .cmp-table .px-dc s{display:block;margin:0 0 1px;}
}
.hot-tag{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:980px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;vertical-align:2px;
}
.notice{
  max-width:700px;margin:0 auto;padding:0 24px 20px;
  font-size:12.5px;color:#86868b;text-align:center;line-height:1.7;
}
.prod-item .p-links{margin-top:10px;font-size:14px;}

/* ---------- 3카드 공정/신뢰 구역 (real 페이지 다듬기·신뢰의 장) ---------- */
.block.soft{background:var(--bg-soft);}
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.craft-card{
  background:var(--bg-soft);border-radius:var(--radius-lg);
  padding:36px 36px;text-align:left;
}
.craft-grid.on-soft .craft-card{background:#fff;}
.craft-card .c-img{margin-bottom:20px;}
.craft-card .c-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);
}
.craft-card .num{
  font-size:13.5px;font-weight:800;color:var(--green);letter-spacing:.08em;
}
.craft-card h4{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-0.015em;}
.craft-card p{margin-top:8px;font-size:15px;color:var(--gray);line-height:1.65;}

/* ---------- FAQ (support 페이지 네이티브 details 아코디언) ---------- */
.container.narrow{max-width:min(880px,92vw);}
.faq{border-top:1px solid rgba(0,0,0,.08);}
.faq-item{border-bottom:1px solid rgba(0,0,0,.08);}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font-size:18px;font-weight:700;letter-spacing:-0.015em;
  text-align:left;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:after{
  content:"+";flex-shrink:0;font-size:24px;font-weight:400;color:var(--green);
  transition:transform .25s;
}
.faq-item[open] summary:after{transform:rotate(45deg);}
.faq-item p{
  padding:0 4px 24px;font-size:15.5px;color:var(--gray);line-height:1.75;
  text-align:left;max-width:760px;
}

/* ---------- 여정 타임라인 (real 페이지 7~10일의 여정) ---------- */
.journey{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
  max-width:min(1360px,92vw);margin:0 auto;
}
.j-step{text-align:center;position:relative;padding-top:30px;}
.j-step:before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 5px rgba(74,166,58,.14);
}
.j-step:not(:last-child):after{
  content:"";position:absolute;top:13px;left:calc(50% + 14px);right:calc(-50% + 14px);
  height:2px;background:rgba(0,0,0,.08);
}
.j-step b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-0.01em;}
.j-step span{display:block;margin-top:6px;font-size:13px;color:var(--gray);line-height:1.5;}

/* ---------- Gallery strip ---------- */
.gallery{background:var(--bg-soft);}
.strip{
  display:flex;gap:16px;overflow-x:auto;
  padding:4px 24px 20px;
  scrollbar-width:none;
  max-width:1400px;margin:0 auto;
}
.strip::-webkit-scrollbar{display:none;}
.strip img{
  height:300px;border-radius:var(--radius-md);flex-shrink:0;
  aspect-ratio:3/4;object-fit:cover;
}

/* ---------- Stores ---------- */
.stores-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:min(1100px,90vw);margin:0 auto;
}
.store-card{
  background:var(--bg-soft);border-radius:var(--radius-lg);
  padding:38px 40px;text-align:left;
}
.store-card .tag{
  font-size:12.5px;font-weight:700;color:var(--green);
  letter-spacing:.05em;text-transform:uppercase;
}
.store-card h3{
  margin-top:10px;font-size:23px;font-weight:800;letter-spacing:-0.02em;
}
.store-card p{
  margin-top:10px;font-size:15px;color:var(--gray);line-height:1.65;
}
.store-card .link-arrow{display:inline-block;margin-top:16px;font-size:15px;}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;padding:96px 24px;
}
.cta-band h2{
  font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em;line-height:1.15;
}
.cta-band p{margin:16px 0 34px;font-size:var(--fs-sub);color:var(--gray);}

/* ---------- Footer ---------- */
footer{
  background:var(--bg-soft);border-top:1px solid rgba(0,0,0,.06);
  padding:44px 24px 60px;
  font-size:12.5px;color:#86868b;line-height:1.8;
}
footer .container{max-width:min(1360px,94vw);}
.foot-links{
  display:flex;gap:22px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-weight:500;color:#515154;
}
.foot-links a:hover{color:var(--green);}
.foot-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-bottom:24px;margin-bottom:20px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.foot-cols h5{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.foot-cols a{display:block;color:#515154;margin-bottom:8px;font-weight:500;}
.foot-cols a:hover{color:var(--green);}
.foot-legal{line-height:1.8;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);}
.reveal.on{opacity:1;transform:none;}

/* ---------- 포스터 입장: 요소 시차 페이드인 (eyebrow→제목→부제→버튼→이미지, split·중앙형 공용) ---------- */
.poster .reveal{transition-duration:1.1s;}
.poster .eyebrow.reveal{transition-delay:.1s;}
.poster h2.reveal{transition-delay:.28s;}
.poster .p-sub.reveal{transition-delay:.46s;}
.poster .p-links.reveal{transition-delay:.64s;}
.poster .p-img.reveal{
  transition-delay:.4s;transition-duration:1.4s;
  transform:translateY(34px) scale(.975);
}
.poster .p-img.reveal.on{transform:none;}

/* ---------- 모바일 햄버거 메뉴 (2026-08-05: ≤820px 에서 네비 링크를 드로어로 접음) ---------- */
.nav-burger{
  display:none;width:40px;height:40px;margin-left:2px;
  background:none;border:none;cursor:pointer;padding:0;
}
.nav-burger span{
  display:block;width:18px;height:2px;margin:3px auto;border-radius:1px;
  background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(4px) rotate(45deg);}
body.menu-open .nav-burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg);}
.nav-drawer{
  position:fixed;top:52px;left:0;right:0;bottom:0;z-index:99;
  display:none;flex-direction:column;
  padding:20px 32px 40px;overflow-y:auto;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.nav-drawer a{
  padding:17px 2px;font-size:19px;font-weight:600;color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-drawer a.nav-cta{
  margin-top:26px;text-align:center;font-size:15px;color:#fff;
  padding:13px 20px;border-bottom:none;
}
body.menu-open{overflow:hidden;}
/* 다크 페이지 드로어 */
body.dark-page .nav-burger span{background:#f5f5f7;}
body.dark-page .nav-drawer{background:rgba(18,18,19,.96);}
body.dark-page .nav-drawer a{color:#f5f5f7;border-bottom-color:rgba(255,255,255,.09);}
body.dark-page .nav-drawer a.nav-cta{color:#fff;}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .nav-menu a:not(.nav-cta){display:none;}
  .nav-burger{display:block;}
  body.menu-open .nav-drawer{display:flex;}
  .eyebrow{font-size:12px;letter-spacing:.04em;}
  .hero{padding-top:120px;}
  .hero-actions{flex-direction:column;gap:18px;}
  .page-hero{padding:120px 24px 60px;}
  .bento{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 16px;}
  .tech-grid{grid-template-columns:1fr;}
  .stores-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr;}
  .feature-row{grid-template-columns:1fr;gap:30px;padding:50px 0;}
  .feature-row.flip .f-img{order:0;}
  .compare{grid-template-columns:1fr;}
  .compare .arrow{transform:rotate(90deg);}
  .strip img{height:220px;}
  .poster:first-of-type{padding-top:120px;}
  .poster .p-links{flex-direction:column;gap:16px;}
  .bento.trio{grid-template-columns:1fr;}
  .foot-cols{grid-template-columns:repeat(2,1fr);}
  .stats.three{grid-template-columns:1fr;gap:36px;}
  .gphoto-grid{grid-template-columns:1fr;}
  .photocard{max-width:min(420px,84vw);}
  .photocard .pc-pol{width:30%;}
  .craft-grid{grid-template-columns:1fr;}
  .journey{grid-template-columns:1fr;gap:26px;}
  .j-step{text-align:left;padding-top:0;padding-left:30px;}
  .j-step:before{left:6px;top:4px;transform:none;}
  .j-step:not(:last-child):after{display:none;}
  .g-grid{grid-template-columns:1fr;gap:40px;text-align:center;}
  .g-stats{justify-content:center;gap:28px;}
  .g-links{justify-content:center;}
  .model-strip{gap:22px;}
  .points{grid-template-columns:1fr;}
  .pd-hero{padding-top:120px;}
}

/* ==========================================================
   Dark page theme (body.dark-page 스코프 — 2026-08-05 리얼 피규어 페이지)
   애플 Pro 제품 페이지식 다크 테마: 순흑 #000 / 스페이스그레이 #161617 교차,
   accent 는 밝은 초록 #7ed957. dark-page 클래스를 단 페이지에만 적용되며 나머지 페이지는 영향이 없다.
   ========================================================== */
body.dark-page{background:#000;color:#f5f5f7;}

/* 다크 반투명 네비 (흰 배경 jpg 로고는 흰 블록이 드러나므로 다크 전용 svg 로고를 쓴다) */
body.dark-page nav{
  background:rgba(22,22,23,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.dark-page .nav-logo-text{
  font-size:19px;font-weight:800;letter-spacing:.06em;color:#fff;
}
body.dark-page .nav-logo-text i{color:var(--green);font-style:normal;}
body.dark-page .nav-menu a{color:#d5d5d7;}
body.dark-page .nav-menu a:hover,
body.dark-page .nav-menu a.active{color:#7ed957;}

/* 포스터 흐름: light→순흑, gray→스페이스그레이, 글자는 흰색 반전 */
body.dark-page .poster.light{background:#000;color:#f5f5f7;}
body.dark-page .poster.gray{background:#161617;color:#f5f5f7;}
body.dark-page .poster .p-sub{color:#a1a1a6;}
body.dark-page .eyebrow{color:#7ed957;}
body.dark-page .hero-note{color:#98989d;}
/* multiply 는 검은 배경에서 이미지를 통째로 검게 곱하므로 반드시 원복 */
body.dark-page .poster.light .p-img img{mix-blend-mode:normal;}
body.dark-page .poster.light .p-img video{mix-blend-mode:normal;}
/* 밝은 배경 제품 이미지는 검은 배경에서 밝은 블록이 됨: 전체 둥근 모서리로 통일 (상단 둥근·하단 직각의 바닥밀착 설계는 검은 배경에서 직각이 드러남) */
body.dark-page .poster .p-img img{border-radius:var(--radius-lg);}
body.dark-page .poster .p-img img.contain{border-radius:var(--radius-lg);}

/* Hero 화면 초록 광륜 (pd-hero 와 같은 radial, Pro 급 극장감 연출) */
body.dark-page .poster:first-of-type{position:relative;}
body.dark-page .poster:first-of-type:before{
  content:"";position:absolute;left:50%;top:-160px;
  width:1100px;height:560px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(74,166,58,.22),transparent 65%);
  pointer-events:none;
}
body.dark-page .poster:first-of-type > *{position:relative;}

/* 챕터 구역: 흰색→순흑, soft→스페이스그레이 */
body.dark-page .block{background:#000;color:#f5f5f7;}
body.dark-page .block.soft{background:#161617;}
body.dark-page .block-head p{color:#a1a1a6;}

/* 3카드 공정/신뢰 카드: 다크 카드 */
body.dark-page .craft-card{background:#1d1d1f;}
body.dark-page .craft-grid.on-soft .craft-card{background:#1d1d1f;}
body.dark-page .craft-card .num{color:#7ed957;}
body.dark-page .craft-card p{color:#a1a1a6;}

/* 3장 가로 배열(함께 화면) 설명 글자 */
body.dark-page .gphoto figcaption{color:#a1a1a6;}

/* 여정 타임라인: 연결선 반전 */
body.dark-page .j-step:not(:last-child):after{background:rgba(255,255,255,.14);}
body.dark-page .j-step span{color:#a1a1a6;}
body.dark-page .j-step:before{box-shadow:0 0 0 5px rgba(126,217,87,.18);}

/* 스펙 배지(1,600만 화면): 테두리 반전 */
body.dark-page .spec-chip{border-color:rgba(255,255,255,.22);color:#a1a1a6;}

/* CTA band 부제 */
body.dark-page .cta-band p{color:#a1a1a6;}