/* =========================================================
   숨표 (SUMPYO)
   미니멀 + 글래스모피즘 · 라이트/다크
     · 색은 상태(안전·주의·경계·위험)에만. 나머지는 무채색
     · 유리는 떠 있는 것에만 — 헤더 캡슐, 탭바, 카드
     · 컨트롤은 캡슐, 면은 큰 라운드. 터치 타깃은 최소 44px
   폰트: Wanted Sans (Pretendard 대체)
   웨이트: Regular(400) / SemiBold(600)
   브레이크포인트: 1199 / 1023 / 767 / 400
   ========================================================= */

:root{
  color-scheme:light;

  /* 캔버스 — 유리가 보이도록 순백보다 한 톤 낮게 */
  --canvas:#E9EAE7;
  --ink:#141715;
  --ink-body:#3A403C;
  --muted:#767E79;
  --hair:rgba(20,23,21,.10);
  --hair-soft:rgba(20,23,21,.06);

  /* 액센트 = 잉크 (무채색) */
  --accent:#191C1A;
  --accent-on:#FFFFFF;
  --accent-quiet:rgba(20,23,21,.06);

  /* 상태색 — 의미가 있는 곳에만 */
  --safe:#2F7D5B;
  --caution:#A87716;
  --boundary:#B0623A;
  --danger:#A8454F;

  /* 유리 */
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.72);
  --glass-quiet:rgba(255,255,255,.45);
  --glass-line:rgba(255,255,255,.85);
  --blur:blur(30px) saturate(165%);
  --blur-sm:blur(16px) saturate(140%);
  --lift:
    0 1px 1px rgba(20,28,23,.04),
    0 12px 32px -18px rgba(20,28,23,.30),
    inset 0 1px 0 rgba(255,255,255,.85);
  --lift-lg:
    0 2px 2px rgba(20,28,23,.05),
    0 28px 64px -28px rgba(20,28,23,.4),
    inset 0 1px 0 rgba(255,255,255,.95);
  --sheen:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,0) 38%);

  /* 배경 레이어 */
  --bg-1:radial-gradient(1200px 700px at 50% -18%, rgba(255,255,255,.95), transparent 62%);
  --bg-2:radial-gradient(900px 520px at 8% 8%, rgba(255,255,255,.55), transparent 60%);
  --bg-3:linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(210,213,209,.55) 100%);
  --grain-opacity:.05;
  --grain-blend:multiply;

  --fw-r:400;
  --fw-sb:600;

  --s1:8px;  --s2:12px; --s3:16px; --s4:20px;
  --s5:24px; --s6:32px; --s7:40px; --s8:56px; --s9:88px;

  --r-card:30px;
  --r-panel:22px;
  --r-pill:999px;

  --gutter:40px;
  --maxw:1040px;
  --nav-h:100px;
}

/* ---------- 다크 ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0C0E0D;
    --ink:#F1F3F1;
    --ink-body:#C4CAC6;
    --muted:#868F8A;
    --hair:rgba(255,255,255,.12);
    --hair-soft:rgba(255,255,255,.07);
    --accent:#F1F3F1;
    --accent-on:#111413;
    --accent-quiet:rgba(255,255,255,.08);
    --safe:#5FBF90;
    --caution:#D9AE4A;
    --boundary:#D98A5C;
    --danger:#E0737F;
    --glass:rgba(255,255,255,.075);
    --glass-strong:rgba(255,255,255,.11);
    --glass-quiet:rgba(255,255,255,.05);
    --glass-line:rgba(255,255,255,.14);
    --lift:
      0 1px 1px rgba(0,0,0,.3),
      0 14px 34px -18px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.10);
    --lift-lg:
      0 2px 3px rgba(0,0,0,.35),
      0 30px 66px -28px rgba(0,0,0,.75),
      inset 0 1px 0 rgba(255,255,255,.14);
    --sheen:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);
    --bg-1:radial-gradient(1200px 700px at 50% -18%, rgba(120,140,130,.16), transparent 62%);
    --bg-2:radial-gradient(900px 520px at 10% 10%, rgba(90,110,102,.12), transparent 60%);
    --bg-3:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
    --grain-opacity:.055;
    --grain-blend:overlay;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0C0E0D;
  --ink:#F1F3F1;
  --ink-body:#C4CAC6;
  --muted:#868F8A;
  --hair:rgba(255,255,255,.12);
  --hair-soft:rgba(255,255,255,.07);
  --accent:#F1F3F1;
  --accent-on:#111413;
  --accent-quiet:rgba(255,255,255,.08);
  --safe:#5FBF90;
  --caution:#D9AE4A;
  --boundary:#D98A5C;
  --danger:#E0737F;
  --glass:rgba(255,255,255,.075);
  --glass-strong:rgba(255,255,255,.11);
  --glass-quiet:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.14);
  --lift:
    0 1px 1px rgba(0,0,0,.3),
    0 14px 34px -18px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.10);
  --lift-lg:
    0 2px 3px rgba(0,0,0,.35),
    0 30px 66px -28px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.14);
  --sheen:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);
  --bg-1:radial-gradient(1200px 700px at 50% -18%, rgba(120,140,130,.16), transparent 62%);
  --bg-2:radial-gradient(900px 520px at 10% 10%, rgba(90,110,102,.12), transparent 60%);
  --bg-3:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  --grain-opacity:.055;
  --grain-blend:overlay;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",Pretendard,
              -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  font-weight:var(--fw-r);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-body);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3,strong,b{font-weight:var(--fw-sb);color:var(--ink);margin:0;}
p{margin:0;}
button,input,select,progress{font-family:inherit;font-weight:var(--fw-r);}

.icon-library{display:none;}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.nav__inner,
.hero__inner,
.section__inner,
.footer__inner,
.test__inner{
  width:100%;
  max-width:calc(var(--maxw) + var(--gutter) * 2);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- 배경 ---------- */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--bg-1),var(--bg-2),var(--bg-3);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
}

/* ---------- 헤더 ---------- */
.nav{position:sticky; top:0; z-index:40; padding:var(--s4) 0 var(--s2); pointer-events:none;}
.nav__bar{
  pointer-events:auto;
  min-height:68px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s5);
  padding:10px 10px 10px var(--s5);
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-line);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift);
  transition:box-shadow .3s ease, background .3s ease;
}
.nav.is-stuck .nav__bar{box-shadow:var(--lift-lg);}

.nav__logo{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);transition:opacity .2s ease;
}
.nav__logo:hover{opacity:.6;}
.logo-mark{width:15px;height:19.5px;flex:none;display:block;}
.logo-word{font-size:20px;font-weight:var(--fw-sb);letter-spacing:-.03em;}

.nav__menu{display:flex;justify-content:center;gap:2px;}
.nav__menu a{
  display:inline-flex;align-items:center;height:44px;padding:0 var(--s3);
  border-radius:var(--r-pill);color:var(--muted);text-decoration:none;
  font-size:15px;letter-spacing:-.01em;white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.nav__menu a:hover{color:var(--ink);background:var(--accent-quiet);}
.nav__menu a.is-current{color:var(--ink);background:var(--accent-quiet);}

.nav__actions{justify-self:end;display:flex;align-items:center;gap:var(--s1);}
.theme-toggle{
  width:44px;height:44px;padding:0;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--glass-quiet);color:var(--ink-body);
  cursor:pointer;display:grid;place-items:center;
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.theme-toggle:hover{color:var(--ink);background:var(--accent-quiet);}
.theme-toggle:active{transform:scale(.94);}
.theme-toggle svg{width:19px;height:19px;}
.theme-toggle__moon{display:none;}
:root[data-theme="dark"] .theme-toggle__sun{display:none;}
:root[data-theme="dark"] .theme-toggle__moon{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle__sun{display:none;}
  :root:not([data-theme="light"]) .theme-toggle__moon{display:block;}
}

.profile{position:relative;}
.nav__profile{
  height:44px;min-width:44px;padding:0 var(--s4);border:none;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-on);font-size:14.5px;font-weight:var(--fw-sb);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;
  transition:opacity .2s ease, transform .15s ease;
}
.nav__profile-icon{display:none;width:19px;height:19px;}
.nav__profile-image{width:44px;height:44px;object-fit:cover;border-radius:var(--r-pill);margin:0 -20px;}
.nav__profile:hover:not(:disabled){opacity:.85;}
.nav__profile:active{transform:scale(.97);}
.nav__profile:disabled{opacity:.4;cursor:not-allowed;}

.profile__menu{
  position:absolute;top:calc(100% + var(--s2));right:0;z-index:50;
  min-width:230px;padding:var(--s4);border-radius:var(--r-panel);
  background:var(--glass-strong);border:1px solid var(--glass-line);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift-lg);
  display:flex;flex-direction:column;gap:var(--s2);
}
.profile__name{font-size:15px;}
.profile__personality{display:flex;flex-direction:column;gap:1px;
  padding:var(--s2);border-radius:14px;background:var(--accent-quiet);}
.profile__personality span{font-size:12.5px;color:var(--muted);}
.profile__personality strong{font-size:15px;}
.profile__personality time{font-size:11.5px;color:var(--muted);}
.profile__menu button{
  height:42px;border:1px solid var(--hair);background:transparent;border-radius:var(--r-pill);
  font-size:13.5px;color:var(--muted);cursor:pointer;transition:color .2s ease,background .2s ease;
}
.profile__menu button:hover{color:var(--ink);background:var(--accent-quiet);}

/* ---------- 공통 타이포 ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.14em;color:var(--muted);
  font-weight:var(--fw-sb);text-transform:uppercase;margin-bottom:var(--s2);
}
.kicker{display:none;}

/* ---------- 히어로 ---------- */
.hero{position:relative;z-index:1;padding:var(--s7) 0 var(--s6);}
.hero__title{margin:0 0 var(--s6);letter-spacing:-.04em;line-height:1.15;}
.hero__line1{display:flex;align-items:center;gap:10px;font-size:24px;color:var(--muted);letter-spacing:-.02em;}
.hero__line2{display:flex;align-items:baseline;gap:12px;font-size:56px;margin-top:10px;}
.hero__with{color:var(--muted);}
.hero__dark{color:var(--ink);}
.spark{width:22px;display:inline-flex;}
.spark svg{width:22px;height:22px;display:block;}
.grad-gemini{
  background:linear-gradient(92deg,#4285f4,#9b72cb 52%,#d96570);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:var(--fw-sb);
}
.grad-green{color:var(--ink);}
.placebar{display:none;}

/* ---------- 유리면 공통 ---------- */
.card,.metrics,.data-grid,.picker,.journey,.route__result,.route__ai,
.mission__card,.personality,.info-grid,.test__panel{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift);
}
.card::after,.test__panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--sheen);
}
.card > *,.test__panel > *{position:relative;z-index:1;}

/* ---------- 메인 카드 ---------- */
.card{
  padding:var(--s6);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;gap:var(--s6);
}
.card.is-loading{opacity:.65;}

.card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.place{
  display:inline-flex;align-items:center;gap:var(--s2);text-align:left;
  height:44px;padding:0 var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--glass-quiet);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  cursor:pointer;color:inherit;transition:background .2s ease;
  max-width:min(100%,480px);
}
.place:hover{background:var(--accent-quiet);}
.place__pin{width:13px;height:17px;display:inline-flex;flex:none;color:var(--ink);}
.place__pin svg{width:13px;height:17px;display:block;}
.place__text{display:flex;align-items:baseline;gap:8px;min-width:0;}
.place__text strong{font-size:15px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.place__text small{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.place__chev{width:14px;height:14px;color:var(--muted);display:inline-flex;flex:none;transition:transform .2s ease;}
.place__chev svg{width:14px;height:14px;display:block;}
.place:hover .place__chev{transform:translateX(2px);}

.card__time{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted);flex:none;}
.card__time time{color:var(--ink-body);font-weight:var(--fw-sb);}
.card__time-icon{width:15px;height:15px;}

.card__weather-icon{
  width:48px;height:48px;flex:none;align-self:flex-start;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink);
  background:var(--accent-quiet);
}
.card__weather-icon svg{width:24px;height:24px;}

.card__bottom{display:flex;align-items:center;gap:var(--s5);}
.card__msg{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;flex:1;min-width:0;}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 var(--s3);border-radius:var(--r-pill);
  background:var(--accent-quiet);color:var(--ink-body);font-size:12.5px;font-weight:var(--fw-sb);
}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--safe);}
.card__msg h2{font-size:42px;letter-spacing:-.04em;line-height:1.12;}
.card__msg p{font-size:16px;color:var(--muted);max-width:44ch;}
.score-chip{font-size:14px;color:var(--muted);}
.score-chip strong{font-size:16px;color:var(--ink);margin:0 4px;}
.score-chip small{font-size:12.5px;}
.card__temp{
  font-size:96px;line-height:.86;font-weight:var(--fw-sb);
  letter-spacing:-.06em;color:var(--ink);flex:none;
}
.card[data-status="caution"] .status-dot{background:var(--caution);}
.card[data-status="boundary"] .status-dot{background:var(--boundary);}
.card[data-status="danger"] .status-dot{background:var(--danger);}
.card[data-status="caution"] .score-chip strong{color:var(--caution);}
.card[data-status="boundary"] .score-chip strong{color:var(--boundary);}
.card[data-status="danger"] .score-chip strong{color:var(--danger);}

/* ---------- 지표 ---------- */
.metrics{
  margin-top:var(--s2);border-radius:var(--r-panel);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:var(--s5) var(--s1);
}
.metric{position:relative;padding:0 var(--s3);display:flex;flex-direction:column;align-items:center;gap:var(--s2);}
.metric + .metric::before{
  content:"";position:absolute;left:0;top:4%;bottom:4%;width:1px;background:var(--hair-soft);}
.metric__icon{width:20px;height:20px;color:var(--muted);}
.metric__icon svg{width:20px;height:20px;}
.metric__row{display:flex;flex-direction:column;align-items:center;gap:2px;}
.metric__label{font-size:13px;color:var(--muted);order:1;}
.metric__value{font-size:27px;font-weight:var(--fw-sb);letter-spacing:-.04em;color:var(--ink);line-height:1.1;}
.metric__value small{font-size:14px;margin-left:1px;color:var(--muted);}

.source-note{margin-top:var(--s3);font-size:13px;color:var(--muted);text-align:center;}
.source-note span{color:var(--ink-body);}

/* ---------- 섹션 ---------- */
.section{
  position:relative;z-index:1;padding:var(--s9) 0 0;
  scroll-margin-top:calc(var(--nav-h) + var(--s3));
}
.hero,.block{scroll-margin-top:calc(var(--nav-h) + var(--s3));}
/* 앵커로 이동할 때 떠 있는 헤더가 제목을 가리지 않도록 — #top 포함 모든 앵커 대상 */
#top,#details,#location,#mission,#personality,#info,:target{
  scroll-margin-top:calc(var(--nav-h) + var(--s3));
}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s5);}
.section__head h2{font-size:34px;letter-spacing:-.035em;line-height:1.25;}
.section__aside{font-size:14px;color:var(--muted);text-align:right;max-width:38ch;line-height:1.6;}
.section__aside strong{font-weight:var(--fw-r);color:var(--ink-body);}

.block{margin-top:var(--s7);}
.block__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2);}
.block__head h2,.block__head h3{font-size:18px;letter-spacing:-.025em;}
.block__aside{font-size:13px;color:var(--muted);text-align:right;}
.block__aside strong{font-weight:var(--fw-r);color:var(--ink-body);}

/* ---------- 데이터 ---------- */
.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:var(--s1) var(--s2);border-radius:var(--r-card);}
.data-card{position:relative;padding:var(--s5);display:flex;flex-direction:column;gap:3px;}
.data-card:not(:nth-child(3n))::after{
  content:"";position:absolute;right:0;top:16%;bottom:16%;width:1px;background:var(--hair-soft);}
.data-card:nth-child(n+4)::before{
  content:"";position:absolute;left:var(--s3);right:var(--s3);top:0;height:1px;background:var(--hair-soft);}
.data-card__icon{width:19px;height:19px;color:var(--muted);margin-bottom:var(--s1);}
.data-card__icon svg{width:19px;height:19px;}
.data-card__label{font-size:13px;color:var(--muted);}
.data-card__value{font-size:28px;letter-spacing:-.04em;color:var(--ink);line-height:1.2;
  min-height:34px;display:flex;align-items:baseline;}
.data-card__value small{font-size:14px;margin-left:2px;color:var(--muted);font-weight:var(--fw-r);}
.data-card__value--text{font-size:20px;align-items:center;}
.data-card p{font-size:13px;color:var(--muted);line-height:1.5;min-height:39px;margin-top:auto;}

/* ---------- 지도 ---------- */
.picker{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:var(--s5);
  padding:var(--s5);border-radius:var(--r-card);align-items:stretch;}
.picker__copy{display:flex;flex-direction:column;gap:var(--s1);justify-content:center;}
.picker__copy strong{font-size:19px;letter-spacing:-.025em;}
.picker__copy p{font-size:14px;color:var(--muted);}
.picker__actions{display:flex;gap:var(--s1);margin-top:var(--s2);flex-wrap:wrap;}
.map-frame{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--hair);background:var(--accent-quiet);}
#map,#routeMap{width:100%;height:320px;}
.leaflet-container{font-family:inherit;background:var(--accent-quiet);}
.map-pin{display:grid;place-items:center;border-radius:50%;color:#fff;
  font-size:12.5px;font-weight:var(--fw-sb);border:2px solid #fff;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5);}
.map-pin--origin{background:var(--safe);}
.map-pin--destination{background:#191C1A;}

/* ---------- 컨트롤 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 var(--s5);border-radius:var(--r-pill);border:1px solid transparent;
  font-size:15px;font-weight:var(--fw-sb);cursor:pointer;line-height:1;text-decoration:none;
  transition:opacity .2s ease, background .2s ease, transform .15s ease, color .2s ease;
}
.btn svg{width:16px;height:16px;}
.btn--lg{height:52px;padding:0 var(--s6);font-size:16px;}
.btn--primary{background:var(--accent);color:var(--accent-on);}
.btn--primary:hover:not(:disabled){opacity:.85;}
.btn--light{background:var(--glass-quiet);color:var(--ink);border-color:var(--hair);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);}
.btn--light:hover:not(:disabled){background:var(--accent-quiet);}
.btn--ghost{background:none;color:var(--muted);border-color:var(--hair);}
.btn--ghost:hover:not(:disabled){color:var(--ink);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn:active:not(:disabled){transform:scale(.98);}

/* ---------- 경로 폼 ---------- */
.journey{margin-top:var(--s3);padding:var(--s5);border-radius:var(--r-card);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.field > span{font-size:13px;color:var(--muted);}
.field input,.field select{
  width:100%;height:46px;padding:0 var(--s4);border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--glass-quiet);color:var(--ink);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  font-size:15px;transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder{color:var(--muted);}
.field input:hover,.field select:hover{background:var(--accent-quiet);}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);}
.journey__pick{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;}
.journey__pick button{
  height:40px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--hair);
  background:var(--glass-quiet);font-size:13.5px;color:var(--muted);cursor:pointer;transition:all .2s ease;}
.journey__pick button:hover{color:var(--ink);background:var(--accent-quiet);}
.journey__pick button.is-active{background:var(--accent);color:var(--accent-on);border-color:transparent;}
.journey__pick span{font-size:12.5px;color:var(--muted);}
.journey__submit{grid-column:1 / -1;height:52px;}
.journey__error{grid-column:1 / -1;font-size:13px;color:var(--danger);min-height:1em;}

/* ---------- 경로 결과 ---------- */
.route{margin-top:var(--s3);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--s3);align-items:start;}
.route__ai{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s2) var(--s4);margin-bottom:var(--s2);border-radius:var(--r-pill);}
.route__ai strong{font-size:14px;}
.route__ai span{font-size:13px;color:var(--muted);}
.gemini-mark{width:17px;height:17px;flex:none;}
.route__result{padding:var(--s5);border-radius:var(--r-card);display:flex;flex-direction:column;gap:var(--s1);}
.route__status{font-size:13px;color:var(--muted);}
.route__score{font-size:44px;letter-spacing:-.05em;color:var(--ink);line-height:1;}
.route__score small{font-size:16px;color:var(--muted);margin-left:6px;font-weight:var(--fw-r);}
.route__meta{font-size:14px;color:var(--muted);}
.route__alts{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s2);}
.route__alts button{height:36px;padding:0 var(--s3);border-radius:var(--r-pill);border:1px solid var(--hair);
  background:transparent;font-size:12.5px;color:var(--muted);cursor:pointer;transition:all .2s ease;}
.route__alts button:hover{color:var(--ink);}
.route__alts button.is-active{background:var(--accent);color:var(--accent-on);border-color:transparent;}
.advice{margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--hair-soft);
  display:flex;flex-direction:column;gap:7px;}
.advice__provider{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.advice__gemini{display:inline-flex;align-items:center;gap:5px;}
.advice h3{font-size:17px;letter-spacing:-.025em;}
.advice p{font-size:14px;color:var(--muted);}
.advice ul{margin:2px 0 0;padding-left:var(--s3);display:flex;flex-direction:column;gap:4px;}
.advice li{font-size:13px;color:var(--muted);}

/* ---------- 미션 ---------- */
.mission__card{padding:var(--s5);border-radius:var(--r-card);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);align-items:stretch;}
.mission__list{display:flex;flex-direction:column;}
.mission__item{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;cursor:pointer;
  border-bottom:1px solid var(--hair-soft);min-height:44px;}
.mission__item:first-child{padding-top:0;}
.mission__item:last-child{border-bottom:none;padding-bottom:0;}
.mission__item input{position:absolute;opacity:0;width:0;height:0;}
.mission__check{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--hair);color:transparent;transition:all .2s ease;}
.mission__check svg{width:14px;height:14px;}
.mission__item.is-complete .mission__check{background:var(--safe);border-color:var(--safe);color:#fff;}
.mission__item.is-complete .mission__text strong{color:var(--muted);}
.mission__text{display:flex;flex-direction:column;flex:1;min-width:0;}
.mission__text strong{font-size:16px;transition:color .2s ease;}
.mission__text small{font-size:13px;color:var(--muted);}
.mission__icon{width:19px;height:19px;color:var(--hair);flex:none;}
.mission__icon svg{width:19px;height:19px;}
.mission__progress{display:flex;flex-direction:column;gap:var(--s2);justify-content:center;
  padding:var(--s5);border-radius:var(--r-panel);background:var(--accent-quiet);}
.mission__progress > div{display:flex;flex-direction:column;gap:2px;}
.mission__progress span{font-size:13px;color:var(--muted);}
.mission__progress strong{font-size:24px;letter-spacing:-.03em;}
.mission__progress progress{width:100%;height:6px;appearance:none;border:none;}
.mission__progress progress::-webkit-progress-bar{background:var(--hair);border-radius:var(--r-pill);}
.mission__progress progress::-webkit-progress-value{background:var(--ink);border-radius:var(--r-pill);transition:width .35s ease;}
.mission__progress progress::-moz-progress-bar{background:var(--ink);border-radius:var(--r-pill);}

/* ---------- 성향 안내 ---------- */
.personality{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s6);
  align-items:stretch;padding:var(--s6);border-radius:var(--r-card);}
.personality__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s2);}
.personality__copy h2{font-size:32px;letter-spacing:-.035em;line-height:1.3;}
.personality__copy > p{font-size:15px;color:var(--muted);}
.personality__meta{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s1);}
.personality__meta span{font-size:13px;color:var(--muted);}
.personality__meta strong{margin-right:4px;font-size:14px;}
.personality__copy .btn{margin-top:var(--s3);}
.personality__preview{position:relative;min-height:260px;border-radius:var(--r-panel);overflow:hidden;
  background:var(--accent-quiet);border:1px solid var(--hair);display:grid;place-items:center;}
.personality__orb{position:absolute;width:48px;height:48px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--glass-line);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  box-shadow:var(--lift);color:var(--ink);}
.personality__orb svg{width:21px;height:21px;}
.personality__orb--sun{top:16%;left:16%;animation:float-orb 7s ease-in-out infinite;}
.personality__orb--rain{top:24%;right:16%;animation:float-orb 9s ease-in-out infinite reverse;}
.personality__orb--wind{bottom:18%;left:26%;animation:float-orb 8s ease-in-out infinite;}
@keyframes float-orb{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.personality__center{display:flex;flex-direction:column;align-items:center;gap:2px;}
.personality__center small{font-size:13px;color:var(--muted);}
.personality__center strong{font-size:48px;letter-spacing:-.05em;line-height:1;}

/* ---------- 소개 ---------- */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding:var(--s1) var(--s2);border-radius:var(--r-card);}
.info-card{position:relative;padding:var(--s5);display:flex;flex-direction:column;gap:6px;}
.info-card:nth-child(odd)::after{
  content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:var(--hair-soft);}
.info-card:nth-child(n+3)::before{
  content:"";position:absolute;left:var(--s3);right:var(--s3);top:0;height:1px;background:var(--hair-soft);}
.info-card__icon{width:19px;height:19px;color:var(--muted);}
.info-card__icon svg{width:19px;height:19px;}
.info-card strong{font-size:16px;}
.info-card p{font-size:13.5px;color:var(--muted);line-height:1.65;}

/* ---------- 성향 테스트 페이지 ---------- */
.page-test .test{position:relative;z-index:1;padding:var(--s8) 0 var(--s9);}
.test__panel{
  border-radius:var(--r-card);padding:var(--s8) var(--s7);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);
  overflow:hidden;
}
.test__panel h1,.test__panel h2{font-size:38px;letter-spacing:-.04em;line-height:1.25;}
.test__panel h1:focus,.test__panel h2:focus{outline:none;}
.test__lead{font-size:16px;color:var(--muted);}
.test__facts{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;gap:var(--s7);}
.test__facts li{display:flex;flex-direction:column;align-items:center;gap:2px;}
.test__facts strong{font-size:26px;letter-spacing:-.03em;}
.test__facts span{font-size:12.5px;color:var(--muted);}
.test__panel .btn{margin-top:var(--s4);}
.test__back{margin-top:var(--s2);font-size:13.5px;color:var(--muted);text-decoration:none;}
.test__back:hover{color:var(--ink);}

.test__panel--question{align-items:stretch;text-align:left;}
.test__progress{display:flex;align-items:center;gap:var(--s3);}
.test__progress span{font-size:13px;color:var(--muted);flex:none;}
.test__progress progress{flex:1;height:5px;appearance:none;border:none;}
.test__progress progress::-webkit-progress-bar{background:var(--hair);border-radius:var(--r-pill);}
.test__progress progress::-webkit-progress-value{background:var(--ink);border-radius:var(--r-pill);}
.test__progress progress::-moz-progress-bar{background:var(--ink);border-radius:var(--r-pill);}
.test__eyebrow{font-size:14px;color:var(--muted);margin-top:var(--s3);}
.test__panel--question h1{font-size:30px;}
.test__actions{display:flex;gap:var(--s2);margin-top:var(--s5);}
.test__panel--question .test__actions .btn{flex:1;}
.test__actions--result{width:100%;justify-content:center;}
.test__badge{width:64px;height:64px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--accent-quiet);color:var(--ink);margin-bottom:var(--s2);}
.test__badge svg{width:30px;height:30px;}
.test__save{font-size:13px;color:var(--muted);min-height:1em;}

.options{border:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s1);width:100%;}
.question-option{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r-panel);border:1px solid var(--hair);background:var(--glass-quiet);
  cursor:pointer;min-height:60px;transition:border-color .2s ease,background .2s ease;}
.question-option:hover{background:var(--accent-quiet);}
.question-option input{position:absolute;opacity:0;width:0;height:0;}
.option-marker{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--hair);flex:none;transition:all .2s ease;}
.option-text{font-size:15.5px;color:var(--ink-body);text-align:left;}
.question-option:has(input:checked){background:var(--accent-quiet);border-color:var(--ink);}
.question-option:has(input:checked) .option-marker{border-color:var(--ink);background:var(--ink);
  box-shadow:inset 0 0 0 3.5px var(--canvas);}
.result-details{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);width:100%;margin-top:var(--s2);}
.result-details div{padding:var(--s4);border-radius:var(--r-panel);border:1px solid var(--hair);
  display:flex;flex-direction:column;gap:3px;text-align:left;}
.result-details small{font-size:12.5px;color:var(--muted);}
.result-details strong{font-size:15px;}

/* ---------- 광고 ----------
   본문과 같은 유리면을 쓰되 라벨로 광고임을 밝힌다.
   높이를 미리 잡아 두어 광고가 뜰 때 레이아웃이 밀리지 않는다(CLS 방지).
   ads.js가 게시자 ID를 확인하기 전에는 슬롯 자체가 DOM에서 제거된다. */
.ad{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-top:var(--s9);
  padding:var(--s4);
  border-radius:var(--r-card);
  background:var(--glass-quiet);
  border:1px solid var(--hair);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
}
.ad__label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-sb);
}
.ad__unit{
  min-height:280px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-panel);overflow:hidden;
}
.ad__unit ins{width:100%;}

/* ---------- 푸터 ---------- */
.footer{position:relative;z-index:1;padding:var(--s8) 0 var(--s8);margin-top:var(--s8);}
.footer__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s6);
  align-items:start;padding-top:var(--s5);position:relative;}
.footer__inner::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;
  height:1px;background:var(--hair-soft);}
.footer__brand{font-size:18px;}
.footer__brand span{color:var(--muted);}
.footer p{font-size:13px;color:var(--muted);margin-top:2px;}
.footer small{grid-column:1 / -1;font-size:12.5px;color:var(--muted);}
.footer__links{display:flex;gap:var(--s5);flex-wrap:wrap;justify-self:end;}
.footer__links a{font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .2s ease;}
.footer__links a:hover{color:var(--ink);}

/* ---------- 접근성 ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:60;
  padding:12px var(--s4);border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-on);font-size:14px;text-decoration:none;}
.skip:focus{left:var(--gutter);top:var(--s2);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------- 하단 탭바 (모바일 전용) ---------- */
.tabbar{display:none;}

/* ---------- 스크롤 등장 ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease var(--d,0s), transform .55s cubic-bezier(.22,.61,.36,1) var(--d,0s);}
.js-reveal .reveal.is-in{opacity:1;transform:none;}


/* =========================================================
   BP 1: 1024 ~ 1199px
   ========================================================= */
@media (max-width:1199px){
  :root{--gutter:32px;--maxw:940px;}
  .hero__line2{font-size:48px;}
  .hero__line1{font-size:21px;}
  .card__msg h2{font-size:36px;}
  .card__temp{font-size:84px;}
  .section__head h2{font-size:30px;}
  .section{padding-top:var(--s8);}
}

/* =========================================================
   BP 2: 768 ~ 1023px
   ========================================================= */
@media (max-width:1023px){
  :root{--gutter:24px;--nav-h:92px;}
  .nav__menu a{padding:0 10px;font-size:14px;}
  .nav__bar{gap:var(--s2);padding-left:var(--s4);}

  .hero{padding:var(--s6) 0 var(--s5);}
  .hero__line1{font-size:18px;}
  .hero__line2{font-size:38px;}
  .spark{width:18px;} .spark svg{width:18px;height:18px;}

  .card{padding:var(--s5);gap:var(--s5);}
  .card__msg h2{font-size:30px;}
  .card__temp{font-size:70px;}
  .metrics{padding:var(--s4) var(--s1);}
  .metric__value{font-size:24px;}

  .section{padding-top:var(--s7);}
  .section__head{flex-direction:column;align-items:flex-start;gap:var(--s1);}
  .section__aside{text-align:left;max-width:100%;}
  .section__aside br{display:none;}
  .section__head h2{font-size:26px;}
  .section__head h2 br{display:none;}

  .data-grid{grid-template-columns:repeat(2,1fr);}
  .data-card:not(:nth-child(3n))::after{display:none;}
  .data-card:nth-child(odd)::after{
    content:"";position:absolute;right:0;top:16%;bottom:16%;width:1px;background:var(--hair-soft);display:block;}
  .data-card:nth-child(n+3)::before{
    content:"";position:absolute;left:var(--s3);right:var(--s3);top:0;height:1px;background:var(--hair-soft);}
  .picker{grid-template-columns:1fr;}
  .journey{grid-template-columns:repeat(2,1fr);}
  .route{grid-template-columns:1fr;}
  .mission__card{grid-template-columns:1fr;}
  .personality{grid-template-columns:1fr;}
  .personality__preview{min-height:210px;}
  .info-grid{grid-template-columns:1fr;}
  .info-card:nth-child(odd)::after{display:none;}
  .info-card:nth-child(n+2)::before{
    content:"";position:absolute;left:var(--s3);right:var(--s3);top:0;height:1px;background:var(--hair-soft);}

  .test__panel{padding:var(--s7) var(--s5);}
  .test__panel h1,.test__panel h2{font-size:32px;}
  .test__panel--question h1{font-size:26px;}
}

/* =========================================================
   BP 3: ~767px — 모바일
   ========================================================= */
@media (max-width:767px){
  :root{--gutter:16px;--nav-h:76px;--tabbar-h:62px;--r-card:24px;--r-panel:18px;}
  body{padding-bottom:calc(var(--tabbar-h) + var(--s6) + env(safe-area-inset-bottom,0px));}

  .nav{padding:var(--s2) 0;}
  .nav__bar{min-height:58px;grid-template-columns:auto 1fr auto;padding:6px 6px 6px var(--s3);}
  .nav__menu{display:none;}
  .theme-toggle{width:42px;height:42px;}
  .nav__profile{height:42px;min-width:42px;padding:0 var(--s3);}
  .nav__profile-image{width:42px;height:42px;margin:0 -16px;}
  .profile__menu{min-width:210px;}

  .hero{padding:var(--s4) 0 var(--s4);}
  .hero__title{margin-bottom:var(--s4);}
  .hero__line1{font-size:16px;gap:7px;}
  .hero__line2{font-size:32px;gap:8px;flex-wrap:wrap;margin-top:6px;}
  .spark{width:16px;} .spark svg{width:16px;height:16px;}

  .placebar{
    display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
    min-height:52px;padding:0 var(--s4);margin-bottom:var(--s2);border-radius:var(--r-pill);
    background:var(--glass);border:1px solid var(--glass-line);
    backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    box-shadow:var(--lift);color:inherit;cursor:pointer;
  }
  .placebar__pin{width:13px;height:17px;display:inline-flex;flex:none;color:var(--ink);}
  .placebar__pin svg{width:13px;height:17px;}
  .placebar__text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35;}
  .placebar__text strong{font-size:14px;letter-spacing:-.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .placebar__text small{font-size:11.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .placebar__time{font-size:13px;color:var(--muted);flex:none;}

  .card{padding:var(--s5) var(--s4);gap:var(--s3);align-items:center;text-align:center;}
  .card__top{display:none;}
  .card__weather-icon{order:-2;margin:0 auto;width:44px;height:44px;align-self:center;}
  .card__weather-icon svg{width:22px;height:22px;}
  .card__bottom{flex-direction:column;align-items:center;gap:var(--s1);width:100%;}
  .card__msg{align-items:center;gap:var(--s1);}
  .card__temp{order:-1;font-size:80px;line-height:1;margin-bottom:var(--s1);}
  .card__msg h2{font-size:26px;}
  .card__msg p{font-size:14px;}

  .metrics{padding:var(--s4) 0;}
  .metric{padding:0 var(--s1);}
  .metric__icon{width:18px;height:18px;} .metric__icon svg{width:18px;height:18px;}
  .metric__value{font-size:19px;}
  .metric__value small{font-size:11.5px;}
  .metric__label{font-size:11.5px;}
  .source-note{font-size:12px;margin-top:var(--s2);}

  .section{padding-top:var(--s7);}
  .section__head h2{font-size:23px;}
  .eyebrow{font-size:11px;margin-bottom:var(--s1);}

  .data-grid{grid-template-columns:1fr;padding:0 var(--s4);}
  .data-card{flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s4) 0;flex-wrap:wrap;}
  .data-card:not(:nth-child(3n))::after,
  .data-card:nth-child(odd)::after{display:none;}
  .data-card:nth-child(n+2)::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair-soft);}
  .data-card:nth-child(n+4)::before{left:0;right:0;}
  .data-card__icon{margin-bottom:0;flex:none;}
  .data-card__label{flex:1;font-size:14px;}
  .data-card__value{font-size:19px;min-height:0;}
  .data-card__value--text{font-size:16px;}
  .data-card p{display:none;}

  .picker{padding:var(--s4);gap:var(--s3);}
  #map,#routeMap{height:240px;}
  .picker__actions .btn{flex:1;}

  .journey{grid-template-columns:1fr;padding:var(--s4);gap:var(--s2);}
  .journey__pick{flex-direction:column;align-items:stretch;}
  .journey__pick button{width:100%;}
  .route__result{padding:var(--s4);}
  .route__score{font-size:36px;}
  .route__ai{padding:var(--s2) var(--s3);}

  .mission__card{padding:var(--s4);gap:var(--s3);}
  .personality{padding:var(--s4);gap:var(--s4);}
  .personality__copy h2{font-size:26px;}
  .personality__copy .btn{width:100%;}
  .personality__preview{min-height:180px;}
  .personality__center strong{font-size:40px;}
  .info-grid{padding:0 var(--s4);}
  .info-card{padding:var(--s4) 0;}
  .info-card:nth-child(n+2)::before{left:0;right:0;}

  .page-test .test{padding:var(--s5) 0 var(--s7);}
  .test__panel{padding:var(--s6) var(--s4);}
  .test__panel h1,.test__panel h2{font-size:27px;}
  .test__panel--question h1{font-size:23px;}
  .test__facts{gap:var(--s5);}
  .test__facts strong{font-size:22px;}
  .test__actions{flex-direction:column;}
  .test__actions .btn{width:100%;}
  .result-details{grid-template-columns:1fr;}

  .ad{margin-top:var(--s7);padding:var(--s3);}
  .ad__unit{min-height:250px;}

  .footer{padding:var(--s7) 0 var(--s6);margin-top:var(--s6);}
  .footer__inner{grid-template-columns:1fr;gap:var(--s4);}
  .footer__links{justify-self:start;gap:var(--s4);}

  .tabbar{
    display:flex;position:fixed;z-index:45;
    left:var(--gutter);right:var(--gutter);
    bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
    height:var(--tabbar-h);padding:5px;
    border-radius:var(--r-pill);
    background:var(--glass-strong);border:1px solid var(--glass-line);
    backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    box-shadow:var(--lift-lg);
  }
  .tabbar__item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border-radius:var(--r-pill);text-decoration:none;color:var(--muted);font-size:10.5px;
    transition:color .2s ease, background .2s ease;-webkit-tap-highlight-color:transparent;
  }
  .tabbar__item svg{width:20px;height:20px;}
  .tabbar__item.is-active{color:var(--ink);background:var(--accent-quiet);}
}

/* =========================================================
   BP 4: ~400px
   ========================================================= */
@media (max-width:400px){
  :root{--gutter:14px;}
  .hero__line1{font-size:15px;}
  .hero__line2{font-size:28px;}
  .card__temp{font-size:70px;}
  .card__msg h2{font-size:23px;}
  .metric__value{font-size:17px;}
  .metric__label{font-size:10.5px;}
  .section__head h2{font-size:21px;}
  .test__panel h1,.test__panel h2{font-size:24px;}
}

/* ---------- 가로 모드 낮은 화면 ---------- */
@media (max-height:520px) and (orientation:landscape) and (max-width:900px){
  .hero{padding:var(--s4) 0;}
  .card__temp{font-size:56px;}
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
  .js-reveal .reveal{opacity:1;transform:none;}
}

/* ── 안내 팝업 ───────────────────────────────── */
.notice{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--s4);}
.notice[hidden]{display:none;}
.notice__backdrop{position:absolute;inset:0;background:rgba(18,21,19,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.notice__card{position:relative;width:min(440px,100%);padding:var(--s6);
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:var(--r-card);
  box-shadow:0 24px 60px -24px rgba(16,20,18,.45);
  display:flex;flex-direction:column;gap:var(--s3);text-align:left;
  animation:noticeIn .28s cubic-bezier(.2,.7,.3,1) both;}
@keyframes noticeIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.notice__card{animation:none;}}
.notice__eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);}
.notice__title{margin:0;font-size:21px;font-weight:600;line-height:1.35;color:var(--ink);
  text-wrap:balance;}
.notice__body{margin:0;font-size:15px;line-height:1.65;color:var(--ink-body);}
.notice__close{margin-top:var(--s2);width:100%;}
@media (max-width:480px){.notice__card{padding:var(--s5);border-radius:var(--r-panel);}
  .notice__title{font-size:19px;}}
.notice[hidden]{display:none!important;}

/* 로그인 상태: 아바타만 원형으로 표시 */
.nav__profile--avatar{padding:0;width:44px;min-width:44px;gap:0;}
.nav__profile--avatar .nav__profile-image{width:100%;height:100%;margin:0;}
@media (max-width:1023px){.nav__profile--avatar{width:42px;min-width:42px;}}

/* 제작 크레딧 */
.footer__credit{grid-column:1 / -1;font-size:12px;color:var(--muted);opacity:.8;margin-top:calc(var(--s1) * -0.5);}
.footer__team{font-weight:var(--fw-sb);letter-spacing:.02em;color:var(--ink-body);}