/* 오늘사장 · 공통 디자인 시스템 (모니모 인스파이어드 v2)
   흰 바탕 · 넉넉한 여백 · 큰 둥근 타이포 · 글로시 젤리 오브젝트 · 말랑+프리미엄 */

:root {
  --blue: #2f6bff;
  --blue-hover: #1f52e0;
  --blue-50: #f1f5ff;
  --blue-100: #dfe8ff;
  --blue-200: #c3d3ff;
  --ink: #0f1836;
  --text: #263050;
  --muted: #6b7796;
  --faint: #9aa5c2;
  --line: #eaeef7;
  --line-soft: #f1f4fb;
  --bg: #ffffff;
  --bg-soft: #f6f8ff;
  --bg-tint: #eef3ff;
  --white: #ffffff;
  --mint: #38d9b4;
  --sky: #4db4ff;
  --violet: #7b6cf6;
  --green: #12b886;
  --green-bg: #e6faf3;
  --red: #f0436b;
  --amber: #d97706;
  --amber-bg: #fff4e2;
  --radius-xl: 32px;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 2px 6px rgba(15,24,54,.04), 0 22px 48px rgba(47,107,255,.10);
  --shadow-sm: 0 2px 5px rgba(15,24,54,.05), 0 10px 26px rgba(47,107,255,.08);
  --shadow-lg: 0 40px 90px rgba(47,107,255,.20);
  --maxw: 1120px;
  --ff: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  color: var(--text);
  background: var(--bg);
  line-height: 1.62;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

.inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* ── 타이포 ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--blue);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  padding: 8px 16px; border-radius: 999px; letter-spacing: -0.01em;
}
h1, h2, h3 { letter-spacing: -0.04em; color: var(--ink); line-height: 1.18; font-weight: 900; }
.h-sec { font-size: clamp(28px, 4.8vw, 46px); }
.h-lead { font-size: clamp(15px, 2.2vw, 19px); color: var(--muted); font-weight: 500; letter-spacing: -0.02em; }

/* ── 버튼 (둥근 pill) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff); font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s, border-color .16s, color .16s;
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(47,107,255,.30); }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(47,107,255,.38); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue-200); color: var(--blue); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 32px; font-size: 16.5px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--blue-200); outline-offset: 3px;
}

/* ── 내비게이션 ── */
nav.site {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -0.05em; text-decoration: none; }
.brand-mark {
  width: 1.24em; height: 1.24em; border-radius: 0.3em; display: block;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(47,107,255,.22);
}
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-link { font-size: 15px; font-weight: 700; color: var(--muted); text-decoration: none; letter-spacing: -0.02em; transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-cta { font-size: 14.5px; padding: 11px 22px; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink); }
.drawer { display: none; }
@media (max-width: 860px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .drawer { position: fixed; inset: 62px 12px auto 12px; z-index: 199; background: #fff; border-radius: var(--radius); padding: 14px 18px 18px; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
  .drawer.open { display: flex; }
  .drawer a { padding: 14px 6px; font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .drawer a.drawer-cta { margin-top: 12px; border: 0; }
}

/* ── 카드 ── */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.card-soft { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); }

/* ── 폼 / 계산기 ── */
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.02em; }
.field .hint { font-size: 12.5px; color: var(--faint); font-weight: 500; margin-top: 7px; line-height: 1.5; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input {
  width: 100%; font-family: var(--ff); font-size: 16px; font-weight: 700; color: var(--ink);
  padding: 15px 54px 15px 18px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none;
  font-variant-numeric: tabular-nums;
}
.input-wrap input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.input-wrap input::placeholder { color: var(--faint); font-weight: 500; }
.input-unit { position: absolute; right: 18px; font-size: 14px; font-weight: 700; color: var(--muted); pointer-events: none; }
.input-wrap input[type=number] { -moz-appearance: textfield; }
.input-wrap input::-webkit-outer-spin-button, .input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 결과 패널 */
.result { margin-top: 24px; border-radius: var(--radius); border: 1.5px solid var(--blue-100); background: linear-gradient(180deg,#fbfcff,#eef3ff); padding: 28px; display: none; }
.result.show { display: block; animation: rise .34s cubic-bezier(.2,.7,.3,1); }
.result .headline { font-size: 13.5px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; margin-bottom: 8px; }
.result .big { font-size: clamp(34px, 8vw, 46px); font-weight: 900; color: var(--ink); letter-spacing: -0.045em; line-height: 1.05; }
.result .big small { font-size: 19px; font-weight: 800; color: var(--muted); margin-left: 5px; }
.result-rows { margin-top: 20px; border-top: 1.5px dashed var(--blue-100); padding-top: 18px; display: grid; gap: 12px; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; }
.result-row .k { color: var(--muted); font-weight: 700; }
.result-row .v { font-weight: 900; color: var(--ink); }
.result-row.neg .v { color: var(--red); }
.result-row.pos .v { color: var(--green); }
.notice { border-radius: var(--radius-sm); padding: 15px 17px; font-size: 13.5px; line-height: 1.6; font-weight: 600; }
.notice-warn { background: var(--amber-bg); color: var(--amber); border: 1px solid #f6dcae; }
.notice-info { background: var(--blue-50); color: #29508f; border: 1px solid var(--blue-100); }

@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* 앱 연결 블록 */
.app-bridge { margin-top: 24px; border-radius: var(--radius); background: linear-gradient(135deg,#141d3d,#243056); color: #fff; padding: 26px 28px; box-shadow: var(--shadow-sm); }
.app-bridge p { font-size: 14.5px; color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 18px; letter-spacing: -0.01em; }
.app-bridge .btn-primary { background: var(--blue); }
.app-bridge .btn-primary:hover { background: var(--blue-hover); }

/* 법률·신뢰 문구 */
.legal-note { font-size: 12.5px; color: var(--faint); line-height: 1.7; letter-spacing: -0.01em; }

/* 스토어 버튼 */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn { display: inline-flex; align-items: center; gap: 13px; background: var(--blue); color: #fff; padding: 14px 24px; border-radius: 16px; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s; box-shadow: 0 10px 24px rgba(47,107,255,.30); }
.store-btn:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(47,107,255,.40); }
.store-btn svg { width: 23px; height: 23px; flex-shrink: 0; }
.store-btn .st { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.15; gap: 1px; }
.store-btn .st b { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.store-btn .st span { font-size: 11px; font-weight: 600; opacity: .82; letter-spacing: 0; }

/* ── 글로시 젤리 오브젝트 (오늘사장 오리지널) ── */
.jelly {
  position: relative; border-radius: 50%;
  background:
    radial-gradient(38% 32% at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 70% 78%, var(--violet), rgba(123,108,246,0) 60%),
    linear-gradient(150deg, var(--mint), var(--sky) 52%, var(--violet));
  box-shadow: inset 0 -10px 22px rgba(60,40,140,.28), inset 0 8px 16px rgba(255,255,255,.5), 0 26px 44px rgba(77,120,255,.34);
}
.jelly-coin { display: grid; place-items: center; color: #fff; font-weight: 900; text-shadow: 0 2px 6px rgba(40,30,120,.35); }
.jelly.blue {
  background:
    radial-gradient(38% 32% at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #6ea0ff, var(--blue) 60%, #2148c8);
  box-shadow: inset 0 -10px 22px rgba(20,40,120,.35), inset 0 8px 16px rgba(255,255,255,.45), 0 26px 44px rgba(47,107,255,.4);
}

/* 푸터 */
footer.site { background: var(--ink); color: rgba(255,255,255,.62); padding: 64px 0 40px; margin-top: 24px; }
footer.site .foot-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
footer.site .foot-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 14px; }
footer.site .foot-tag { font-size: 14px; line-height: 1.65; max-width: 340px; margin-bottom: 18px; }
footer.site .foot-biz { font-size: 12.5px; line-height: 1.85; color: rgba(255,255,255,.44); }
footer.site .foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
footer.site .foot-col h4 { color: rgba(255,255,255,.9); font-size: 13.5px; font-weight: 800; margin-bottom: 15px; letter-spacing: -0.01em; }
footer.site .foot-col a { display: block; color: rgba(255,255,255,.6); font-size: 14px; text-decoration: none; padding: 6px 0; transition: color .15s; }
footer.site .foot-col a:hover { color: #fff; }
footer.site .foot-bot { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.44); }
@media (max-width: 640px) { footer.site .foot-cols { gap: 40px; } }

/* fade-up — 기본은 보이고, JS가 있을 때만 숨겼다가 스크롤 시 드러냄 (프리미엄: blur+scale) */
.fade-up { opacity: 1; transform: none; }
.js .fade-up { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(8px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease; will-change: opacity, transform, filter; }
.js .fade-up.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fade-up { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
  .float, .drift, .spin-slow { animation: none !important; }
}

/* 부드러운 부유/회전 애니메이션 */
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes drifty { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,-12px); } }
.float { animation: floaty 6.5s ease-in-out infinite; }
.float.d1 { animation-delay: -1.8s; animation-duration: 7.5s; }
.float.d2 { animation-delay: -3.4s; animation-duration: 8s; }
.float.d3 { animation-delay: -5s; animation-duration: 6s; }
.drift { animation: drifty 9s ease-in-out infinite; }

/* ── 프리미엄 폴리시 레이어 ── */
/* 미세 그레인 텍스처 — 밋밋한 그라데이션 느낌 제거 */
.grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grainshift 8s steps(6) infinite; }
  @keyframes grainshift { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)} 80%{transform:translate(4%,3%)} 100%{transform:translate(0,0)} }
}

/* 프로스티드 글래스 카드 (히어로 부유 UI) */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  box-shadow: 0 1px 1px rgba(255,255,255,.6) inset, 0 18px 40px rgba(30,50,120,.14), 0 4px 10px rgba(30,50,120,.08);
}

/* 정교한 글로시 오브 (텍스트 없는 3D 유리구) */
.orb { position: relative; border-radius: 50%; }
.orb::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(30% 26% at 32% 24%, rgba(255,255,255,.98), rgba(255,255,255,0) 55%),
    radial-gradient(60% 50% at 68% 74%, rgba(20,30,90,.42), rgba(20,30,90,0) 60%);
  z-index: 2;
}
.orb::after { content:""; position:absolute; width:22%; height:14%; left:24%; top:16%; border-radius:50%;
  background: rgba(255,255,255,.92); filter: blur(2px); z-index: 3; }
.orb.blue  { background: linear-gradient(155deg,#7ea6ff,#2f6bff 55%,#1a3ea8); box-shadow: inset 0 -14px 26px rgba(15,30,90,.5), 0 30px 50px rgba(47,107,255,.42); }
.orb.mint  { background: linear-gradient(155deg,#8ff0da,#35cfae 50%,#1898bb); box-shadow: inset 0 -14px 26px rgba(10,70,80,.45), 0 30px 50px rgba(53,207,174,.36); }
.orb.violet{ background: linear-gradient(155deg,#b3a9ff,#7b6cf6 55%,#4b39c8); box-shadow: inset 0 -14px 26px rgba(45,25,110,.5), 0 30px 50px rgba(123,108,246,.4); }

/* 유틸 */
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.grid { display: grid; gap: 20px; }
.breadcrumb { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }