/*
 * MyFly — 디자인 토큰 · 앱 셸
 *
 * 브랜드 확정안(윙 마크 · 코발트)에 맞춘 토큰 정의다.
 * 라이트 전용 서비스다 — 판정 색이 흰 바탕 대비 기준이라 다크에서 등급 구분이 무너진다.
 */

:root{
  color-scheme: light;

  /* ── 브랜드 ─────────────────────────────────── */
  --cobalt:#1F3AD1;        /* 키 컬러 */
  --cobalt-deep:#16217E;   /* 로고 날개가 겹치는 면 */
  --cobalt-tint:#EAEDFB;
  --cream:#F1EDE2;         /* 로고 여백·보조 배경 */

  /* ── 판정 등급 ───────────────────────────────
     이 넷은 판정 그 자체다. 임의로 바꾸면 등급 구분이 무너진다. */
  --stop:#F0455A;          /* 비행 불가 */
  --warn:#E3A02E;          /* 사전 승인 필요 */
  --go:#0E9F6E;            /* 비행 가능 */
  --info:#8A8F9C;          /* 참고 정보 */

  /* ── 중립 ────────────────────────────────────
     순회색이 아니라 브랜드 코발트 쪽으로 아주 살짝 기울인 값이다. */
  --ink:#131519;
  --ink-2:#4A4F5C;
  --ink-3:#8A8F9C;
  --ink-4:#C7C9CF;
  --surface:#FFFFFF;
  --surface-2:#F7F5F0;     /* 앱 배경 */
  --ground:#F1EDE2;
  --line:rgba(19,21,25,.08);
  --line-2:rgba(19,21,25,.06);
  --line-3:rgba(19,21,25,.14);

  --shadow:0 1px 2px rgba(19,21,25,.05), 0 8px 24px rgba(19,21,25,.07);
  --shadow-sheet:0 -1px 3px rgba(19,21,25,.04), 0 -12px 32px rgba(19,21,25,.10);
  --shadow-fab:0 6px 16px rgba(31,58,209,.35);

  /* ── 타이포 ──────────────────────────────────
     웹폰트가 실패해도 레이아웃이 무너지지 않게 폴백을 촘촘히 둔다.
     드론을 날리는 곳은 망이 나쁘다 — 폰트가 못 오는 상황이 실제로 있다. */
  --sans:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
         "Pretendard","Noto Sans KR",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ── 세이프에어리어 ──────────────────────────
     viewport-fit=cover 가 있어야 실제 값이 들어온다.
     iOS 는 웹이 전적으로 책임지고, Android 는 네이티브가 이미 밀어내 0 이 된다. */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);

  /* ── 셸 치수 ─────────────────────────────────
     헤더는 화면마다 형태가 달라 높이를 고정하지 않는다.
     바텀네비만 고정 — 지도·시트가 이 높이를 기준으로 자리를 잡는다. */
  --nav-h:58px;
  --nav-total:calc(var(--nav-h) + var(--sab));
}

*{box-sizing:border-box}

html,body{
  height:100%;
  /* svh: 주소창이 보이는 상태 기준의 안정적 높이.
     dvh 는 주소창이 접힐 때마다 리플로우가 일어나 지도 위 UI 가 출렁인다. */
  height:100svh;
  margin:0;
}

body{
  font-family:var(--sans);
  background:var(--surface-2);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  /* 지도를 끌다 경계에 닿으면 브라우저가 당겨서 새로고침을 발동한다 —
     조작 중 리로드로 이어져 지도 앱에서는 치명적이다. */
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

button{font-family:inherit; -webkit-tap-highlight-color:transparent}
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent }

/* ══ 앱 셸 ═══════════════════════════════════════════════
   화면은 서로 겹쳐 두고 보이는 것만 노출한다. 지도처럼 만들기 비싼 화면을
   탭을 옮길 때마다 파괴하지 않기 위한 구조다. */
[hidden]{ display:none !important }

/* 모바일 우선 서비스다. 데스크톱에서 전체 폭으로 늘어나면 한 줄이 지나치게 길어지고
   바텀네비가 화면 끝까지 벌어진다. 손에 든 화면과 같은 비례를 유지한다. */
#app{
  position:relative;
  height:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface-2);
}
@media (min-width:521px){
  body{ background:#E7E4DC }
  #app{ border-left:1px solid var(--line); border-right:1px solid var(--line) }
}

.screens{ position:relative; flex:1; min-height:0 }

.screen{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  background:var(--surface-2);
}
.screen.on{ display:flex }

/* 화면 본문 — 헤더 아래 스크롤 영역 */
.body{
  flex:1; min-height:0; overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 22px;
}

/* ══ 헤더 ════════════════════════════════════════════════
   그라디언트로 지도에 녹이지 않는다 — 경계가 흐려지고 플랫폼마다 다르게 보인다.
   불투명 배경 + 1px 라인으로 끝낸다. */
/* 셸 헤더 — .screens 의 형제다. 화면이 바뀌어도 이 요소는 그대로 남는다.
   높이를 고정하지 않으면 로고(27px)·제목(27px)·뒤로가기(44px)에 따라 헤더가
   47~69px 로 오르내려 "고정"이라는 인상이 깨진다. 안쪽 줄 높이를 34px 로 못 박는다. */
.hd{
  flex:none; position:relative; z-index:9;
  padding:calc(11px + var(--sat)) calc(18px + var(--sar)) 11px calc(18px + var(--sal));
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hd-row{ display:flex; align-items:center; gap:10px; min-height:34px }
.hd-brand{ font:700 17px/1 var(--sans); letter-spacing:-.03em; color:var(--ink) }
.hd-title{
  font:700 21px/1.3 var(--sans); letter-spacing:-.035em; color:var(--ink);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 홈은 제목이 아니라 워드마크다 — 로고 옆에서 균형이 맞게 한 단계 작게. */
.hd-title.brand{ font-size:17px; letter-spacing:-.03em }
.hd-logo{ flex:none }
.hd-sub{ font:400 11.5px/1 var(--sans); color:var(--ink-3); margin-top:9px }
.hd-mono{ font:400 10px/1 var(--mono); color:var(--ink-3); margin-top:3px }
.hd-acts{ margin-left:auto; display:flex; gap:6px; align-items:center }

/* 아이콘 버튼 — 시각 크기는 20px 이지만 잡히는 면적은 44px */
.ico{
  width:44px; height:44px; margin:-5px -10px -5px 0;
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer; position:relative;
  border-radius:12px;
}
.ico:active{ background:var(--surface-2) }
.ico svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.9;
          stroke-linecap:round; stroke-linejoin:round }
.ico .dot{
  position:absolute; top:9px; right:9px; width:7px; height:7px;
  border-radius:99px; background:var(--stop); border:1.5px solid var(--surface);
}

/* 뒤로가기 */
.back{
  width:44px; height:44px;
  /* 터치 타겟은 44px 그대로, 헤더 높이에는 34px 만큼만 관여한다. */
  margin:-5px 0 -5px -12px;
  display:grid; place-items:center; border:0; background:none; cursor:pointer; border-radius:12px;
  flex:none;
}
.back:active{ background:var(--surface-2) }
.back svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2;
           stroke-linecap:round; stroke-linejoin:round }

/* ══ 바텀 네비게이션 ═════════════════════════════════════
   지도가 이 서비스의 본체다. 가운데 원형 버튼으로 한 단계 올려 둔다. */
.nav{
  flex:none;
  /* .screens(position:relative) 보다 위에 놓아야 -24px 로 솟은 가운데 버튼이
     화면 배경에 덮여 잘리지 않는다. */
  position:relative; z-index:10;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:8px calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal));
  background:var(--surface);
  border-top:1px solid var(--line);
  min-height:var(--nav-total);
}
.nav-b{
  flex:1; min-width:0; min-height:48px; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding-top:6px;
  border:0; background:none; cursor:pointer;
  color:var(--ink-3);
}
.nav-b svg{ width:21px; height:21px; fill:none; stroke:currentColor;
            stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.nav-b span{ font:500 9.5px/1 var(--sans) }
.nav-b.on{ color:var(--cobalt) }
.nav-b:focus-visible{ outline:2px solid var(--cobalt); outline-offset:-2px; border-radius:10px }

/* 중앙 지도 버튼 */
.nav-map{ gap:6px; padding-top:0 }
.nav-map .pill{
  width:54px; height:54px; border-radius:99px;
  background:var(--cobalt);
  display:grid; place-items:center;
  margin-top:-26px;
  box-shadow:var(--shadow-fab);
  border:3px solid var(--surface);
  transition:transform .16s ease, box-shadow .16s ease;
}
.nav-map:active .pill{ transform:scale(.94); box-shadow:0 3px 10px rgba(31,58,209,.3) }
/* 지도 탭에 있을 때는 링을 한 겹 둘러 현재 위치를 알린다. */
.nav-map.on .pill{ box-shadow:var(--shadow-fab), 0 0 0 4px var(--cobalt-tint) }
@media (prefers-reduced-motion: reduce){ .nav-map .pill{ transition:none } }
.nav-map .pill svg{ width:24px; height:24px; stroke:#fff }
.nav-map span{ font-weight:600; color:var(--cobalt) }

/* ══ 공통 카드 ═══════════════════════════════════════════ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
}
/* 누를 수 있는 카드만 반응한다 — 정보 카드는 가만히 있어야 오독이 없다. */
button.card, .banner, .cta{ transition:transform .12s ease }
button.card:active, .banner:active, .cta:active{ transform:scale(.99) }
@media (prefers-reduced-motion: reduce){
  button.card, .banner, .cta{ transition:none }
}
.card-p{ padding:17px 17px 15px }

/* 섹션 라벨 — 모노 대문자 */
.slabel{
  font:500 10.5px/1 var(--mono); letter-spacing:.16em;
  color:var(--ink-3); margin:22px 2px 12px;
}
.slabel:first-child{ margin-top:0 }

/* 리스트 행 */
.list{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:2px 16px }
.li{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  min-height:48px; padding:12px 0;
  border-bottom:1px solid var(--line-2);
  width:100%; border-left:0; border-right:0; border-top:0;
  background:none; cursor:pointer; text-align:left; color:inherit;
}
.li:last-child{ border-bottom:0 }
.li:active{ opacity:.6 }
.li-t{ flex:1; min-width:0; font:400 13.5px/1.45 var(--sans); color:var(--ink) }
.li-v{ font:400 11px/1 var(--mono); color:var(--ink-3) }
.li-c{ width:15px; height:15px; flex:none; fill:none; stroke:var(--ink-4);
       stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* 버튼 */
.btn{
  min-height:48px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; cursor:pointer;
  font:600 14px/1 var(--sans);
  background:var(--cobalt); color:#fff;
}
.btn:active{ opacity:.9; transform:scale(.985) }
.btn{ transition:transform .12s ease, opacity .12s ease }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none } }
.btn.sm{ min-height:42px; border-radius:10px; font-size:12.5px }
.btn.ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line-3) }
.btn.dark{ background:var(--ink); color:var(--cream) }
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor;
          stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn[disabled]{ background:rgba(19,21,25,.12); color:var(--ink-3); cursor:default }

/* 토스트 */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  width:max-content;
  bottom:calc(var(--nav-total) + 16px);
  z-index:90;
  background:var(--ink); color:var(--cream);
  padding:12px 18px; border-radius:99px;
  font:500 12.5px/1 var(--sans);
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  max-width:calc(100% - 32px);
}
.toast.on{ opacity:1 }

/* 시트 — 외부 이동 확인 등 */
.sheet-scrim{
  position:fixed; inset:0; z-index:80;
  max-width:520px; margin:0 auto;
  background:rgba(19,21,25,.42);
  display:flex; align-items:flex-end;
  opacity:0; transition:opacity .22s ease;
}
.sheet-scrim.on{ opacity:1 }
.sheet{
  width:100%; background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:14px 22px calc(28px + var(--sab));
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.sheet-scrim.on .sheet{ transform:none }
.sheet-grip{ width:38px; height:4px; border-radius:99px; background:var(--line-3); margin:0 auto 18px }
.sheet h3{ font:600 16px/1.5 var(--sans); color:var(--ink); margin:0 }
.sheet p{ font:400 12.5px/1.75 var(--sans); color:var(--ink-2); margin:10px 0 0; text-wrap:pretty }
.sheet-acts{ display:flex; gap:9px; margin-top:20px }
.sheet-acts .btn{ flex:1 }

@media (prefers-reduced-motion: reduce){
  .sheet, .sheet-scrim, .toast{ transition:none }
}

/* ══ 애니메이션 ══════════════════════════════════════════ */
@keyframes mfRise{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}
@keyframes mfPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes mfSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  [style*="mfRise"], .splash svg{ animation:none !important }
}

/* ══ 스플래시 ════════════════════════════════════════════
   앱 전용. 웹에서는 마크업만 남고 절대 보이지 않는다. */
:root[data-shell="web"] .splash{ display:none !important }

.splash{ background:var(--cobalt); align-items:center; justify-content:center; gap:22px }
.splash svg{ width:112px; height:112px; animation:mfRise .7s ease-out both }
.splash .cap{
  position:absolute; bottom:calc(52px + var(--sab));
  font:400 9px/1 var(--mono); letter-spacing:.18em;
  color:rgba(255,255,255,.5); animation:mfPulse 1.4s ease-in-out infinite;
}

/* ══ 로그인 ══════════════════════════════════════════════ */
.login{
  background:var(--cream);
  padding:0 24px calc(34px + var(--sab));
  overflow:hidden;   /* position 은 .screen 의 absolute 를 그대로 쓴다 */
}
/* 차트 페이퍼 격자 — 항공도 느낌. 배경일 뿐이라 아주 옅게. */
.login .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(19,21,25,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,21,25,.045) 1px,transparent 1px);
  background-size:28px 28px;
}
.login .top{ position:relative; padding-top:calc(90px + var(--sat)); flex:1 }
.login .top svg{ width:60px; height:60px }
.login h1{
  font:300 27px/1.35 var(--sans); letter-spacing:-.03em;
  color:var(--ink); margin:26px 0 0;
}
.login h1 b{ font-weight:700 }
.login .lead{ font:400 13px/1.7 var(--sans); color:var(--ink-2); margin-top:12px; text-wrap:pretty }
.login .acts{ position:relative; display:flex; flex-direction:column; gap:9px }
.sso{
  height:52px; border:0; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:600 14.5px/1 var(--sans);
}
.sso:active{ opacity:.85 }
.sso.apple{ background:#131519; color:#fff }
.sso.google{ background:#fff; color:#131519; border:1px solid var(--line-3) }
.sso-i{ width:18px; height:18px; flex:none }

/* Apple 로그인은 iOS 에서만 노출한다.
   App Store 심사는 다른 소셜 로그인을 제공하는 iOS 앱에 Sign in with Apple 을 요구한다 —
   반대로 안드로이드·웹에서는 선택지를 늘릴 뿐이라 두지 않는다. */
[data-login="apple"]{ display:none }
:root[data-os="ios"] [data-login="apple"]{ display:flex }
.sso.mail{ background:transparent; color:var(--ink); border:1px solid rgba(19,21,25,.18); font-weight:500 }
.sso.mail:active{ background:rgba(19,21,25,.05) }
.login .skip{
  border:0; background:none; cursor:pointer;
  font:500 12.5px/1 var(--sans); color:var(--ink-2);
  padding:16px 0 4px; text-decoration:underline; text-underline-offset:3px;
}
.login .terms{ text-align:center; font:400 10px/1.6 var(--mono); color:rgba(19,21,25,.38) }

/* 화면 설명 — 헤더 높이를 일정하게 두려고 본문 맨 위로 내렸다. */
.lead-sub{
  font:400 12.5px/1.6 var(--sans); color:var(--ink-3);
  margin:0 2px 14px; text-wrap:pretty;
}

/* ══ 홈 ══════════════════════════════════════════════════ */
.chip{
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:99px;
  width:fit-content; margin-bottom:14px;
  font:500 11px/1 var(--sans); color:var(--ink);
}
.chip .led{ width:6px; height:6px; border-radius:99px; background:var(--go) }

/* ── 홈 히어로 캐러셀 ────────────────────────────────
   .hero 가 곧 Swiper 컨테이너이고, 슬라이드가 곧 배너 카드다.
   중간 래퍼를 두면 그 래퍼 영역에서 드래그가 시작되지 않아
   "배너 가장자리에서는 안 넘어가는" 문제가 생긴다. */
.hero{
  border-radius:14px; overflow:hidden;
  touch-action:pan-y;                /* 가로는 Swiper, 세로는 페이지 */
}
.hero .swiper-slide{
  height:auto;                       /* 카드 높이를 내용에 맞춘다 */
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}

/* Swiper 기본 페이지네이션을 배너 안쪽 아래에 앉힌다. */
.hero .swiper-pagination{
  bottom:15px; left:18px; right:auto; width:auto;
  display:flex; align-items:center; gap:7px;
}
.hero .swiper-pagination-bullet{
  width:4px; height:4px; margin:0 !important; border-radius:9px;
  background:#fff; opacity:.45;
  transition:width .22s ease, opacity .22s ease;
}
.hero .swiper-pagination-bullet-active{ width:16px; opacity:1 }
@media (prefers-reduced-motion: reduce){
  .hero .swiper-pagination-bullet{ transition:none }
}

/* 슬라이드마다 성격이 다르다 — 바탕색으로 구분하되 전부 어두운 계열이라
   흰 글자 대비는 그대로 유지된다. */
.banner.b2{ background:#16217E }
.banner.b3{ background:var(--ink) }

/* 이벤트 배너 — 코발트 바탕에 원형 선으로 깊이만 준다 */
.banner{
  display:block; position:relative; overflow:hidden;
  padding:18px 18px 40px;
  background:var(--cobalt); color:#fff; text-decoration:none;
  cursor:pointer;
}
.banner .ring{ position:absolute; border-radius:99px; border:1.5px solid rgba(255,255,255,.18) }
.banner .r1{ right:-24px; top:-24px; width:130px; height:130px }
.banner .r2{ right:6px; bottom:-30px; width:90px; height:90px; border-color:rgba(255,255,255,.14) }
.banner .eyebrow{ display:block; font:500 9.5px/1 var(--mono); letter-spacing:.2em; color:rgba(255,255,255,.7) }
.banner b{ display:block; font:700 20px/1.35 var(--sans); letter-spacing:-.02em; color:#fff; margin-top:9px; position:relative }

/* 큰 CTA — 잉크 카드 */
.cta{
  margin-top:18px; background:var(--ink); border-radius:14px;
  padding:17px 18px; display:flex; align-items:center; gap:12px;
  border:0; width:100%; text-align:left; cursor:pointer;
}
.cta:active{ opacity:.9 }
.cta .eyebrow{ font:500 9.5px/1 var(--mono); letter-spacing:.18em; color:rgba(241,237,226,.55) }
.cta .t{ font:600 14px/1.45 var(--sans); color:var(--cream); margin-top:8px }
.cta svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--cream);
          stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

.sec-h{ display:flex; align-items:baseline; margin:22px 2px 10px }
.sec-h .t{ font:600 14.5px/1 var(--sans); color:var(--ink) }
.sec-h .more{ font:400 11px/1 var(--sans); color:var(--ink-3); margin-left:auto;
              border:0; background:none; cursor:pointer }

/* ══ 지도 ════════════════════════════════════════════════ */
.map-screen{ background:var(--ground) }
.map-search{
  display:flex; align-items:center; gap:8px; margin-top:13px;
  padding:11px 13px; background:var(--ground); border-radius:10px;
  border:0; width:100%; cursor:pointer; text-align:left;
}
.map-search svg{ width:16px; height:16px; fill:none; stroke:var(--ink-3);
                 stroke-width:2; stroke-linecap:round }
.map-search span{ font:400 12.5px/1 var(--sans); color:var(--ink-3) }

.map-idle{ text-align:center; padding:22px 20px }
.map-idle h2{ font:600 15.5px/1.5 var(--sans); color:var(--ink); margin:12px 0 0 }
.map-idle p{ font:400 12px/1.75 var(--sans); color:var(--ink-3); margin:9px 0 0; text-wrap:pretty }
.map-idle .btn{ margin-top:18px }

.map-loading{
  /* 지도 위에 겹친다 — 컨테이너가 이미 보이는 상태여야 지도가 크기를 제대로 읽는다. */
  position:absolute; inset:0; z-index:12;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:var(--ground);
}
.map-loading svg{ width:34px; height:34px; animation:mfSpin .9s linear infinite }
.map-loading .cap{ font:500 11px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3) }

/* 지도 캔버스 — 한 번 만들면 파괴하지 않는다 */
/* 시트가 닫힌 상태(translateY(100%))로 아래에 대기한다 —
   여기서 자르지 않으면 바텀네비 위로 삐져나온다. */
.map-live{ flex:1; min-height:0; position:relative; overflow:hidden }
#map{ position:absolute; inset:0 }

/* ══ 신청 ════════════════════════════════════════════════ */
.notice{ background:var(--ink); border-radius:14px; padding:17px 18px }
.notice .eyebrow{ font:500 9.5px/1 var(--mono); letter-spacing:.18em; color:rgba(241,237,226,.55) }
.notice p{ font:400 12.5px/1.75 var(--sans); color:var(--cream); margin:10px 0 0; text-wrap:pretty }
.notice b{ font-weight:600 }

.apply-c{ margin-bottom:10px }
.apply-c .hd2{ display:flex; align-items:center; gap:9px }
.apply-c .mark{ width:7px; height:7px; flex:none }
.apply-c .t{ font:600 14px/1 var(--sans); color:var(--ink) }
.apply-c p{ font:400 12px/1.7 var(--sans); color:var(--ink-2); margin:10px 0 0; text-wrap:pretty }
.apply-c b{ color:var(--ink); font-weight:600 }
.apply-c .btn{ margin-top:13px }

.chk{ display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 0;
      border-bottom:1px solid var(--line-2) }
.chk:last-child{ border-bottom:0 }
.chk svg{ width:17px; height:17px; flex:none; fill:none; stroke-width:2.4;
          stroke-linecap:round; stroke-linejoin:round }
.chk .t{ flex:1; font:400 12.5px/1 var(--sans); color:var(--ink) }
.chk .v{ font:400 11px/1 var(--mono); color:var(--ink-3) }

/* ══ MY ══════════════════════════════════════════════════ */
.profile{
  background:var(--cobalt);
  padding:20px 20px 22px;
  position:relative; overflow:hidden; flex:none;
}
.profile .ring{
  position:absolute; right:-40px; top:-30px; width:150px; height:150px;
  border-radius:99px; border:1.5px solid rgba(255,255,255,.16);
}
.profile-row{ display:flex; align-items:center; gap:14px; position:relative }
.avatar{
  width:56px; height:56px; border-radius:99px; background:var(--cream);
  display:grid; place-items:center; flex:none;
  font:700 20px/1 var(--sans); color:var(--cobalt);
}
.profile .nm{ display:flex; align-items:center; gap:7px }
.profile .nm b{ font:700 17px/1 var(--sans); color:#fff }
.badge{ font:600 9.5px/1 var(--sans); color:var(--ink); background:var(--warn);
        padding:4px 7px; border-radius:4px }
.profile .meta{ font:400 11px/1 var(--mono); color:rgba(255,255,255,.65); margin-top:8px }
.profile .stats{
  display:flex; margin-top:20px; background:rgba(255,255,255,.12);
  border-radius:12px; padding:14px 0; position:relative;
}
.profile .stat{ flex:1; text-align:center; border:0; background:none; cursor:pointer }
.profile .stat b{ display:block; font:600 17px/1 var(--mono); color:#fff }
.profile .stat span{ display:block; font:400 10px/1 var(--sans); color:rgba(255,255,255,.7); margin-top:7px }
.profile .div{ width:1px; background:rgba(255,255,255,.18) }

.drone{ display:flex; align-items:center; gap:13px; padding:15px 16px; margin-bottom:9px }
.drone .thumb{
  width:46px; height:46px; border-radius:11px; background:var(--cream);
  display:grid; place-items:center; position:relative; overflow:hidden; flex:none;
}
.drone .thumb::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(19,21,25,.05) 0 1px,transparent 1px 8px);
}
.drone .thumb svg{ width:22px; height:22px; position:relative; fill:none;
                   stroke:var(--ink-3); stroke-width:1.7; stroke-linecap:round }
.drone .t{ font:600 13.5px/1 var(--sans); color:var(--ink) }
.drone .sub{ font:400 10.5px/1 var(--mono); color:var(--ink-3); margin-top:7px }
.pill-s{ font:600 9.5px/1 var(--sans); padding:5px 8px; border-radius:5px; flex:none }

.progress{ height:7px; border-radius:99px; background:var(--cream); margin-top:12px; overflow:hidden }
.progress i{ display:block; height:100%; background:var(--warn); border-radius:99px }

/* ══ 폼 ══════════════════════════════════════════════════ */
.field{ margin-bottom:16px }
.field label{ display:block; font:500 11.5px/1 var(--sans); color:var(--ink-2); margin-bottom:8px }
.field input{
  width:100%; min-height:48px; padding:0 14px;
  border:1px solid var(--line-3); border-radius:11px;
  background:var(--surface); color:var(--ink);
  font:400 14px/1 var(--sans);
}
.field input:focus{ outline:2px solid var(--cobalt); outline-offset:-2px; border-color:transparent }
.field input::placeholder{ color:var(--ink-4) }

.sw-row{ display:flex; align-items:center; gap:12px; min-height:48px }
.sw-row .t{ flex:1; font:400 13px/1.4 var(--sans); color:var(--ink) }
.sw{
  width:42px; height:24px; border-radius:99px; border:0; cursor:pointer;
  background:rgba(19,21,25,.16); position:relative; flex:none; transition:background .18s ease;
}
.sw i{
  position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:99px; background:#fff; transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(19,21,25,.2);
}
.sw.on{ background:var(--cobalt) }
.sw.on i{ transform:translateX(18px) }
@media (prefers-reduced-motion: reduce){ .sw, .sw i{ transition:none } }

/* ══ 준비 중 ═════════════════════════════════════════════ */
.soon{ text-align:center; padding:40px 24px }
.soon svg{ width:44px; height:44px; fill:none; stroke:var(--ink-4); stroke-width:1.6; stroke-linecap:round }
.soon h2{ font:600 15px/1.5 var(--sans); color:var(--ink); margin:14px 0 0 }
.soon p{ font:400 12.5px/1.75 var(--sans); color:var(--ink-3); margin:8px 0 0; text-wrap:pretty }

/* ══ 홈 푸터 ═════════════════════════════════════════════
   서비스 설명 + 면책 + 약관·방침 링크. 구글 OAuth 앱 확인이 홈페이지에
   기능 설명과 방침 링크를 요구하고, 면책은 서비스 성격상 항상 필요하다. */
.home-foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line) }
.home-foot .t{ font:600 13px/1.5 var(--sans); color:var(--ink); margin-bottom:8px }
.home-foot p{ font:400 12px/1.8 var(--sans); color:var(--ink-3); margin:0 0 10px; text-wrap:pretty }
.home-foot p b{ font-weight:600; color:var(--ink-2) }
.home-foot .disc{ background:var(--surface-2); border-radius:10px; padding:12px 14px; color:var(--ink-2) }
.home-foot .links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px }
.home-foot .links a{ font:500 12px/1 var(--sans); color:var(--cobalt); text-decoration:none }
.home-foot .links a:hover{ text-decoration:underline }
.home-foot .corp{ font:400 10.5px/1.7 var(--mono); color:var(--ink-4); margin-top:12px }

/* ══ 홈 리드 ═════════════════════════════════════════════
   서비스 이름과 목적. 구글 OAuth 앱 확인이 홈페이지 첫 화면에서
   "앱 이름 일치"와 "목적 확인"을 요구한다 — 접히거나 스크롤 뒤로 가면 안 된다. */
.home-lead{ margin:2px 0 14px }
.home-lead .brand{ display:flex; align-items:center; gap:9px; margin:0 0 8px }
.home-lead .brand img{ border-radius:8px; flex:none }
.home-lead h1{ font:700 20px/1.3 var(--sans); letter-spacing:-.03em; color:var(--ink); margin:0 }
.home-lead .by{ font:400 11.5px/1.7 var(--sans); color:var(--ink-4); margin-top:8px }
.home-lead .by a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--line-3) }
.home-lead p{ font:400 12.5px/1.75 var(--sans); color:var(--ink-3); margin:0; text-wrap:pretty }
.home-lead p b{ font-weight:600; color:var(--ink-2) }

/* 앱 부팅 스플래시.
   기본 표시 화면은 홈이다(마크업의 .on). 앱에서만 <html class="boot-splash"> 가 붙어
   스플래시를 위에 덮고, app.js 가 첫 렌더에서 클래스를 걷어낸다.
   z-index 가 필요한 이유: .screen 은 position:absolute 라 DOM 뒤쪽(홈)이 위에 그려진다. */
.boot-splash .screen.splash{ display:flex; z-index:100 }