/* ============================================================
   flyocto 홈페이지 개편 — Figma 실측 기준 오버레이 (결정 #47)
   근거: Figma PC 메인 프레임 2x 캡처 픽셀 실측
        (capture_tmp/figma_hires/20260918-111853/frame_03, 배율 2.0 확인)
   문서: 기획/260918_flyocto_Figma_PC메인_실측추출.md
   원칙: 기존 운영 CSS를 지우지 않고 마지막에 덮어쓴다(복구는 이 링크 제거).
   ============================================================ */

/* ---------- 1. 토큰 (실측 스포이드) ---------- */
:root{
  --purple:#8359e5;          /* 브랜드 퍼플 — 운영본 토큰과 일치 */
  --deep:#5a2ebf;            /* 헤더 CTA fill */
  --pale:#eee8f3;            /* 연보라 밴드 */
  --paper:#f6f5f1;           /* 페이퍼 배경 */
  --dark:#151418;            /* 다크 안내 섹션 */
  --ink:#09090c;             /* 먹색 / 푸터 */
  --muted:#231b36;
  --line:#e2e0e5;
  --line-dark:rgba(255,255,255,.13);
  --orange:#8359e5;          /* 오렌지 폐기 — 잔여 참조를 퍼플로 흡수 */
  --orange-hi:#5a2ebf;
  --r-surface:20px;          /* 면(카드·이미지·헤더바) */
  --r-btn:6px;               /* 본문 버튼 */
  --r-btn-nav:8px;           /* 헤더 우측 CTA */
  --container:1366px;        /* 콘텐츠 컨테이너 */
  --gutter:37px;             /* 좌우 여백 */
  --header-h:69px;           /* 고정 헤더 바 높이 */
  --header-gap:24px;         /* 헤더 아래 첫 섹션 여백 */
}

/* ---------- 2. 타이포 — 에스코어드림 ---------- */
body,button,input,select,textarea{
  font-family:'S-Core Dream','Noto Sans KR',system-ui,-apple-system,sans-serif;
}
body{background:var(--paper);color:#202022}
h1,h2,h3,.section-title,.btn,strong,b{font-weight:700}
.eyebrow,.row-label,.pill,.quiet-link,.link{font-weight:500}

/* ---------- 3. 레이아웃 — 컨테이너 1366 / 여백 37 ---------- */
.wrap{width:min(var(--container),calc(100% - (var(--gutter) * 2)))}

/* ---------- 4. 헤더 — 상단 고정 바 (플로팅 캡슐 폐기) ----------
   사용자 지시(2026-09-19): 글로벌 메뉴는 플로팅이 아니라 고정 방식.
   Figma 실측의 캡슐형(폭 1366 / margin 25 / r20)은 이 지시로 대체한다.
   바는 화면 폭 전체, 상단에 붙어 고정되고 내부 콘텐츠만 컨테이너 1366 정렬. */
.header{
  position:fixed;
  top:0;left:0;right:0;
  width:100%;max-width:none;
  margin:0;
  background:var(--purple);
  border:0;
  border-radius:0;
  box-shadow:none;
  z-index:60;
}
body{padding-top:calc(var(--header-h) + var(--header-gap))}
.header .nav{
  height:var(--header-h);
  width:min(var(--container),calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}
.header .logo{
  background:transparent;
  padding:0;
  width:132px;
  filter:brightness(0) invert(1); /* 단색 #8359e5 원본 → 퍼플 위 흰 워드마크 */
}
.header .navlinks{color:#fff}
.header .navlinks>a:not(.btn){color:#fff}
.header .navlinks>a:not(.btn)[aria-current=page]{
  color:#fff;text-decoration:underline;text-underline-offset:6px
}
.header .navlinks .btn.event-nav{
  background:var(--deep);
  border:0;color:#fff;
  min-height:39px;padding:0 22px;
  border-radius:var(--r-btn-nav);
  font-size:14px;font-weight:700;
  box-shadow:none;
}
.header .navlinks .btn.event-nav:hover{background:#4a23a5}
.header .menu-btn{color:#fff;border-color:rgba(255,255,255,.55)}

/* ---------- 5. 버튼 — 본문 r6 (실측 6.3 / 5.2) ---------- */
.btn{border-radius:var(--r-btn);font-weight:700;box-shadow:none}
.btn:hover{background:var(--deep)}
.btn.light{background:#fff;color:#202022}
.btn.light:hover{background:#efeaf8}
.cd-hero .btn{min-height:37px;padding:9px 18px;font-size:14px}
.cd-hero .btn.light{color:#3b2470}
.cd-event{background:var(--purple);border:0}

/* ---------- 6. 면 반경 20px / 그림자 제거 ---------- */
.cd-hero,
.editorial-copy,
.editorial-row>img,
.ai-editorial,
.portrait,
.app-window,
.update-grid article,
.section.security,
.event-hero,.help-hero,
.help-card,.article,.reward,.form-preview{
  border-radius:var(--r-surface);
}
.app-window,.help-card,.reward,.assistant-note,.user-bubble,
.connection-note,.intro-video-frame,.update-grid article{box-shadow:none}
.intro-video-frame{border-radius:var(--r-surface)}

/* ---------- 7. 히어로 ---------- */
.cd-hero{margin-top:0;background:#65566e}
.cd-hero h1{letter-spacing:-.035em}

/* ---------- 8. 베타 이벤트 띠배너 — 연보라 라운드 패널·중앙 정렬 ---------- */
/* Figma 순서상 중앙 대형 카피(cd-intro) 다음에 온다. */
.beta-strip{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(var(--container),calc(100% - (var(--gutter) * 2)));
  margin:10px auto 86px;
  padding:46px 32px;
  background:linear-gradient(180deg,#f4f0f8 0%,var(--pale) 100%);
  border-radius:var(--r-surface);
  color:#3f2a63;text-align:center;font-size:16px;
}
.beta-strip strong{font-size:clamp(22px,2.4vw,30px);color:var(--purple);letter-spacing:-.03em}
.beta-strip span{color:#5b4d70;font-size:15px}
.beta-strip b{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 26px;margin-top:6px;
  background:var(--purple);color:#fff;border:0;border-radius:var(--r-btn);
  font-size:15px;font-weight:700;
}
.beta-strip:hover b{background:var(--deep)}

/* ---------- 9. 섹션 배경 3단 (페이퍼 / 흰색 / 연보라·다크) ---------- */
.cd-intro{background:transparent}
.product-section{background:#fff}
.section.soft{background:#fff}
.updates-section{background:var(--pale)}
.audience{background:transparent}

/* ---------- 10. 다크 안내 섹션 (#151418, 구분선 13% 흰색) ---------- */
.section.security{
  width:min(var(--container),calc(100% - (var(--gutter) * 2)));
  background:var(--dark);
}
.security-notes article{border-bottom:1px solid var(--line-dark)}
.security .eyebrow{color:#cbb5ff}
.security .link{color:#cbb5ff}

/* ---------- 11. FAQ ---------- */
.decision-faq{max-width:920px;padding-bottom:20px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:24px 6px;font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--purple);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:15px;line-height:1.85}

/* ---------- 12. 최종 CTA 배너 — 퍼플 그라디언트 ---------- */
.launch{background:linear-gradient(90deg,#8159df 0%,#8b66e3 100%)}
.launch-date{border-left:1px solid rgba(255,255,255,.45)}
.launch .btn.light{color:#5a2ebf}

/* ---------- 13. 푸터 (#09090c) ---------- */
.footer{background:var(--ink);color:#9d99a5}
.footer-top{border-bottom:1px solid var(--line-dark)}
.footer .logo{background:transparent;filter:brightness(0) invert(1);opacity:.85}

/* ---------- 14. 포커스 링 (퍼플 1종) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--deep);outline-offset:4px
}

/* ---------- 15. 반응형 보정 ---------- */
@media(max-width:1050px){
  :root{--gutter:24px}
  .header .navlinks{background:#fff;color:#25202b}
  .header .navlinks>a:not(.btn){color:#25202b}
  .header .navlinks>a:not(.btn)[aria-current=page]{color:var(--deep);text-decoration:none}
  .header .navlinks .btn.event-nav{background:var(--purple)}
}
@media(max-width:768px){
  .cd-hero,.section.security,.beta-strip,.event-hero,.help-hero{
    width:calc(100% - 24px);max-width:calc(100% - 24px)
  }
  .beta-strip{
    display:flex;grid-template-columns:none;text-align:center;
    padding:32px 20px;margin-bottom:54px;gap:12px
  }
  .beta-strip strong,.beta-strip span,.beta-strip b{
    grid-column:auto;grid-row:auto;width:auto;text-align:center;order:0
  }
  .beta-strip b{white-space:nowrap}
}
@media(max-width:768px){
  /* 기존 반응형이 .cd-description / .cd-intro 의 <br>을 display:none 으로 지워
     "작업 흐름을어디서든", "지시하세요.flyocto가" 처럼 단어가 붙어 버린다.
     Figma도 이 카피는 2줄 고정이므로 줄바꿈을 되살린다. */
  .cd-hero-copy .cd-description br,.cd-intro br{display:inline}
}
@media(max-width:430px){
  .header{width:100%;margin:0}
  .header .logo{width:112px}
  .cd-hero{width:calc(100% - 20px)}
}


/* ---------- 16. 고정 헤더 모바일 보정 ----------
   editorial.css / responsive-v02.css 는 캡슐형(가운데 떠 있는 바)을 전제로
   .header{margin/top/border-radius} 와 .navlinks{top:76px|65px} 를 잡아 둔다.
   고정 바에서는 바 바로 아래에 드롭다운이 붙어야 하므로 여기서 덮어쓴다. */
@media(max-width:1050px){
  .header{margin:0;top:0;border-radius:0;width:100%;max-width:none}
  .header .wrap{width:min(var(--container),calc(100% - (var(--gutter) * 2)))}
  .header .navlinks{
    top:var(--header-h);left:0;right:0;
    margin:0;border-radius:0;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 24px rgba(21,20,24,.12);
  }
}
@media(max-width:640px){
  :root{--header-h:58px;--header-gap:18px}
  .header{margin:0;top:0;border-radius:0}
  .header .nav{height:var(--header-h)}
}

/* ---------- 17. 히어로 글자 잘림 수정 (260922) ----------
   .cd-hero 의 높이를 aspect-ratio:2/1 이 정하는데, 701~1280px 구간에서는 글 높이가
   그 상자보다 커서 overflow:hidden 에 위아래가 잘렸다(실측 최대 ±136px — WHY STAY? 윗부분과
   .cd-case 아랫부분). 이 구간에서는 비율 대신 내용이 높이를 정하게 한다.
   1341px 이상은 기존대로 2/1 비율을 유지한다(실측상 글보다 상자가 커서 잘리지 않는다). */
@media (min-width:701px) and (max-width:1340px){
  .cd-hero{aspect-ratio:auto;height:auto;min-height:590px}
}

/* ---------- 18. 인물 카드 — 반응형 webp(picture) 260923 ---------- */
.portrait picture{display:contents}