/* 기아 시그니처 서체 적용 */
@font-face{font-family:'Kia Signature';src:url('/fonts/KiaSignatureLight.woff2') format('woff2');font-weight:100 300;font-display:swap}
@font-face{font-family:'Kia Signature';src:url('/fonts/KiaSignatureRegular.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Kia Signature';src:url('/fonts/KiaSignatureBold.woff2') format('woff2');font-weight:600 900;font-display:swap}
:root{
  --display:'Kia Signature',Arial,sans-serif;
  --mono:'Kia Signature',monospace;
  --font-sans:'Kia Signature',sans-serif;
  --font-mono:'Kia Signature',monospace;
  --default-font-family:'Kia Signature',sans-serif;
}
html,body,body *:not(svg):not(svg *){font-family:'Kia Signature',sans-serif !important}

/* DOT / PIXEL 오버레이 변수 (원본에 정의가 없어 효과가 보이지 않던 부분) */
.graphic-card{--particle-size:4px;--effect-opacity:.55}

/* 히어로 헤드라인 — 디스플레이 사이즈 트래킹
 * 크기가 클수록 자간을 좁힌다(대문자 디스플레이 70–112px ≈ -0.02~-0.03em).
 * 굵은 웨이트는 획이 두꺼워 속공간이 이미 좁으므로 Regular보다 덜 좁힌다. */
.hero-copy h1{letter-spacing:-.03em;font-weight:400;max-width:none;line-height:.92;font-kerning:normal;text-rendering:optimizeLegibility}
.hero-copy h1 em{letter-spacing:-.02em;font-weight:700;font-style:normal}
/* 모바일(약 30px): 사이즈가 작아진 만큼 트래킹을 완화 */
@media (max-width:620px){.hero-copy h1{font-size:8vw;letter-spacing:-.015em}.hero-copy h1 em{letter-spacing:-.01em}}

/* 결과 그래픽 v4: 카드 프레임 비율로 제작 → 확대/이동 없이 전체를 보여줌 */
.concept-art img{inset:0!important;width:100%!important;height:100%!important;transform:none!important}

/* 헤더 워드마크: 기아체 Bold, 원본의 과도한 자간(-0.105em)과 가로 늘림(scaleX 1.02) 제거
 * 22px 크기의 대소문자 혼용 → 아주 살짝만 좁힘 */
.worldwide-wordmark{font-weight:700;letter-spacing:-.01em;transform:none}

/* 전체 자간 정리 — 원본은 Arial Black/Space Grotesk용 과도한 마이너스 트래킹(-0.03~-0.11em)이 기아체에 그대로 적용돼 있었음.
 * 원칙: 큰 제목일수록 살짝 좁히고(-0.01~-0.02em), 본문은 0, 작은 대문자 라벨은 넓힌다(+0.02~+0.06em). */
.share-panel h2{letter-spacing:-.02em}
.share-panel h2 em{letter-spacing:-.02em;font-style:normal}
.graphic-heading h2{letter-spacing:-.01em}
.graphic-card-caption h3{letter-spacing:-.01em}
.hero-number strong{letter-spacing:-.02em}
.hero-description,.share-lead,.share-step p,.result-list-name,.pattern-choice-meta b{letter-spacing:0}
.graphic-site{letter-spacing:.01em}
.concept-choice b{letter-spacing:.02em}
.story-share-button span{letter-spacing:.04em}
a.worldwide-wordmark{color:inherit;text-decoration:none}
a.worldwide-wordmark:hover{opacity:.7}

/* 소문자 제목: 줄간격 0.9 → 윗줄 디센더(y)가 아랫줄 어센더(? 등)와 충돌. 디센더가 닿지 않는 최소값으로 */
.share-panel h2{line-height:1.02}

/* ───────── 모바일(≤760px) 결과 화면 UX ─────────
 * 1) 카드를 작게 줄여 화면 위에 고정 → 아래 옵션을 바꾸는 동안 결과를 계속 보면서 조정
 * 2) 옵션 영역 압축(그래픽 선택은 가로 스크롤 한 줄)
 * 3) SAVE / SHARE TO STORY를 하단 고정 바로 → 언제든 한 번에 공유 */
@media (max-width:760px){
  .navigator-page{overflow:visible;overflow-x:clip}   /* hidden은 sticky를 막음 */
  .result-workspace{display:block;margin:0 16px;width:auto}
  .graphic-column{padding:20px 0 28px}
  .graphic-heading{margin-bottom:10px}
  .graphic-card-stage{position:sticky;top:0;z-index:20;padding:12px 0 14px;margin:0 -16px;
    background:rgba(238,238,233,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 1px 0 #0000000f}
  .graphic-card-stage .graphic-card{width:min(52vw,230px)!important;box-shadow:8px 10px #dfdfda;padding:8px 8px 0}
  .graphic-card-stage .graphic-card:hover{transform:none}
  .graphic-card-stage .graphic-card-art{height:auto!important;aspect-ratio:280/330}
  .graphic-card-stage .graphic-card-caption{min-height:0;padding:9px 0 7px}

  .graphic-customizer{margin-top:14px;padding-top:12px}
  .concept-grid{display:flex!important;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -16px;padding:0 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .concept-grid::-webkit-scrollbar{display:none}
  .concept-choice{flex:0 0 76px;scroll-snap-align:start}
  .concept-choice b{font-size:8px}
  .customizer-section-label{margin:14px 0 6px}
  .effect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .effect-choice{min-height:40px;font-size:9px}
  .customizer-row{padding:8px 0}
  .tone-options button{padding:8px 10px;font-size:9px}   /* 터치 영역 확대 */

  /* 하단 고정 공유 바 */
  .share-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;flex-direction:row!important;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,251,248,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid #0000001a}
  .share-actions .download-button{flex:0 0 38%;min-height:50px}
  .share-actions .story-share-button{min-height:50px}
  .navigator-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .entry-step>button{display:none}   /* 하단 바와 중복되는 단계별 버튼 숨김 */
}
@media (max-width:760px){
  .navigator-toast{bottom:calc(84px + env(safe-area-inset-bottom))!important;left:16px!important;right:16px!important;transform:none!important}   /* 하단 공유 바 위로 */
}