/* ============================================================================================
   Vaquero design tokens + atmosphere (2026-09-22)

   One token layer for every first-party route. Authenticated routes load it under vq.css and
   shell.css; public routes (landing, concept pages, pricing, legal) load it under welcome.css.
   Nothing in here paints a component: it declares colour, type, spacing, radius, surface and
   glass values, and the two fixed atmosphere layers that sit behind every page.

   Atmosphere contract
     ground   warm charcoal, flat (html background)
     light    one very low-contrast radial light, top-left, neutral warm white
     bloom    one restrained gold bloom, top-right, small
     grain    film grain (SVG turbulence), dark theme only, ~3% over the ground
     glass    translucent + backdrop blur, reserved for drawer, composer, modal (interaction
              surfaces). Reading surfaces stay matte (see --surf / --surf-2).
   No repeating line or dot grid anywhere in this layer, and nothing animates.
   ============================================================================================ */

:root{
  /* ---- palette values, theme-neutral. Both themes below and the public pages' own theme switches
     (the landing family keeps data-theme="day"/"night") read from these, so one value lives in one place. ---- */
  --c-bg-dark:#080808;   --c-bg-light:#FFFFFF;      /* ground: neutral black / white (the measured rs ladder) */
  --c-surf-dark:#171717; --c-surf-light:#FFFFFF;    /* matte reading surface; 1.12:1 over the dark ground */
  --c-surf2-dark:#1C1C1C; --c-surf2-light:#FBFBFB;  /* raised matte surface (hover row) */
  --c-surf3-dark:#262626; --c-surf3-light:#F2F2F2;  /* strongest matte step */
  --c-well-dark:#111111;  --c-well-light:#F4F4F4;   /* inset well inside a surface */
  --c-t1-dark:#F2F2EF; --c-t1-light:#151515;
  --c-t2-dark:#A5A59F; --c-t2-light:#565656;
  --c-t3-dark:#909089; --c-t3-light:#696969;        /* small labels; AA on the surface */
  --c-line-dark:#383838; --c-line-light:#D4D4D4;    /* hairline on surface (1.53:1) */
  --c-line2-dark:#3C3C3C; --c-line2-light:#D0D0D0;  /* rule */
  --c-pc-shadow-light:rgba(0,0,0,.28);   /* the public header's shadow by day (public-chrome.css) */
  --c-pc-fallback-day:#FFFFFF;           /* the public header by day where its glass cannot blur (public-chrome.css) */
  --c-gold:#E8BD50;
  --c-gold2-dark:#F6CD6C; --c-gold2-light:#7D600A;  /* gold as ink */
  --c-gold-light:#866700;                           /* gold accent on paper (the dark theme uses --c-gold) */
  --c-atm-light-dark:rgba(255,255,255,.045); --c-atm-light-light:rgba(255,255,255,.55);
  --c-atm-bloom-dark:rgba(232,189,80,.075);  --c-atm-bloom-light:rgba(232,189,80,.12);

  /* ---- the working names (dark) ---- */
  --bg:var(--c-bg-dark);
  --surf:var(--c-surf-dark); --surf-2:var(--c-surf2-dark); --surf-3:var(--c-surf3-dark); --well:var(--c-well-dark);
  --t1:var(--c-t1-dark); --t2:var(--c-t2-dark); --t3:var(--c-t3-dark);
  --line:var(--c-line-dark); --line2:var(--c-line2-dark);
  --gold:var(--c-gold); --gold2:var(--c-gold2-dark);
  --gold-ink:#1A1408;           /* ink on a gold fill */
  --gold-fill:rgba(232,189,80,.13);

  /* ---- glass (interaction surfaces only) ---- */
  --sh-glass-bg:rgba(23,23,23,.74);
  --sh-glass-line:rgba(255,255,255,.09);
  --sh-glass-hi:rgba(255,255,255,.14);   /* 1px top specular */
  --sh-glass-blur:18px;
  --sh-glass-sat:1.2;
  --sh-glass-solid:#1C1C1C;              /* fallback when backdrop-filter is unavailable or reduced */
  --sh-glass-shadow:0 24px 64px -24px rgba(0,0,0,.7);

  /* ---- atmosphere ---- */
  --atm-light:var(--c-atm-light-dark);
  --atm-bloom:var(--c-atm-bloom-dark);
  --atm-grain:.035;
  --hover:rgba(255,255,255,.06);
  --focus:var(--gold);

  /* ---- type ---- */
  --ui:'Instrument Sans','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --brand:'Cormorant Garamond',Georgia,serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:18px;
  --fs-h2:20px; --fs-h1:26px; --fs-hero:34px;
  --lh-tight:1.2; --lh-ui:1.45; --lh-prose:1.7;
  --tr-label:.06em;

  /* ---- spacing (4px ladder) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sh-gutter:clamp(16px,4vw,32px);
  --sh-measure:760px;              /* prose */
  /* 2026-09-23 결정: 넓은 화면의 좌우 빈 공간을 줄인다 — 1104 에서 올린다.
     1440 화면에서 양옆 168px 씩 비던 것이 줄어든다. 글줄이 너무 길어지는 화면은 자기 상한을 따로 든다. */
  --sh-content-max:1320px;         /* app content column */

  /* ---- radius ---- */
  --sh-r-1:8px; --sh-r-2:12px; --sh-r-3:16px; --sh-r-pill:999px;

  /* ---- shell geometry ---- */
  --sh-h:48px;                  /* app header height */
  --drawer-w:340px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  /* ---- motion ---- */
  --dur-1:180ms; --dur-2:260ms; --ease:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(.22,1,.36,1);
}

:root[data-theme="light"]{
  --bg:var(--c-bg-light);
  --surf:var(--c-surf-light); --surf-2:var(--c-surf2-light); --surf-3:var(--c-surf3-light); --well:var(--c-well-light);
  --t1:var(--c-t1-light); --t2:var(--c-t2-light); --t3:var(--c-t3-light);
  --line:var(--c-line-light); --line2:var(--c-line2-light);
  --gold:var(--c-gold-light); --gold2:var(--c-gold2-light); --gold-ink:#FFFFFF; --gold-fill:rgba(134,103,0,.10);
  --sh-glass-bg:rgba(255,255,255,.70);
  --sh-glass-line:rgba(20,20,18,.12);
  --sh-glass-hi:rgba(255,255,255,.9);
  --sh-glass-blur:20px;
  --sh-glass-solid:#FCFCFC;
  --sh-glass-shadow:0 24px 64px -28px rgba(20,20,20,.35);
  --atm-light:var(--c-atm-light-light);
  --atm-bloom:var(--c-atm-bloom-light);
  --atm-grain:0;
  --hover:rgba(0,0,0,.05);
}

/* ---- atmosphere layers ------------------------------------------------------------------------
   .vq-atm is one fixed element (pointer-events:none) placed first in <body> by the page markup or by
   shell.js. Its two pseudo-elements carry the light+bloom and the grain so the page background
   stays a flat colour and nothing scrolls or parallaxes. */
html{background:var(--bg)}
.vq-atm{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.vq-atm::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 50% at 18% -8%, var(--atm-light), transparent 72%),
    radial-gradient(34% 26% at 86% 4%, var(--atm-bloom), transparent 70%)}
.vq-atm::after{content:"";position:absolute;inset:0;opacity:var(--atm-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px}
@media print{.vq-atm{display:none}}

/* ---- glass surface ---- */
.vq-glass{background:var(--sh-glass-bg);border:1px solid var(--sh-glass-line);
  box-shadow:inset 0 1px 0 var(--sh-glass-hi),var(--sh-glass-shadow);
  -webkit-backdrop-filter:blur(var(--sh-glass-blur)) saturate(var(--sh-glass-sat));
  backdrop-filter:blur(var(--sh-glass-blur)) saturate(var(--sh-glass-sat))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vq-glass{background:var(--sh-glass-solid)}
}
@media(prefers-reduced-transparency:reduce){
  .vq-glass{background:var(--sh-glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html.rs-solid .vq-glass{background:var(--sh-glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- matte surface ---- */
.vq-surf{background:var(--surf);border:1px solid var(--line);border-radius:var(--sh-r-2)}

/* ---- public frame (pricing, legal notices): brand + section links + one call to action ----------------
   The landing family paints its own masthead (welcome.css .site-header). Public pages that load vq.css
   instead use this one so the hierarchy reads the same: mark + wordmark left, destinations, action right. */
.vqpub{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:var(--sp-4);height:var(--sh-h);
  padding:0 var(--sh-gutter);box-sizing:border-box;background:var(--bg);border-bottom:1px solid var(--line);color:var(--t1)}
.vqpub-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--t1);flex:0 0 auto}
.vqpub-brand img{width:22px;height:22px;display:block}
.vqpub-brand b{font-family:var(--brand);font-size:18px;font-weight:600;letter-spacing:.16em}
.vqpub-nav{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.vqpub-nav::-webkit-scrollbar{display:none}
.vqpub-nav a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--sh-r-1);color:var(--t2);
  text-decoration:none;font-family:var(--ui);font-size:var(--fs-sm);white-space:nowrap}
.vqpub-nav a:hover,.vqpub-nav a:focus-visible{background:var(--hover);color:var(--t1);outline:0}
.vqpub-nav a[aria-current="page"]{color:var(--gold2);background:var(--gold-fill)}
.vqpub-cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--sh-r-pill);
  background:var(--gold);color:var(--gold-ink);text-decoration:none;font-family:var(--ui);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;flex:0 0 auto}
.vqpub-cta:hover{filter:brightness(1.06)}
.vqpub-cta:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
@media(max-width:700px){.vqpub-brand b{display:none}.vqpub-nav a{padding:0 8px}
  .vqpub-nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}}