/* WhereWise design tokens and shared parts (design-system/MASTER.md, 2026-10-17). Loaded before page styles by every page,
   the landing and the business-area pages alike. Most of every screen is white and ink; colour is one coral point
   ("here") and one deep-red action. Values follow the Airbnb DESIGN.md in awesome-design-md (owner's choice). */
:root {
  /* colour */
  --ww-bg: #FFFFFF;          /* page */
  --ww-soft: #F7F7F7;        /* quiet surface: bands, disabled, hover */
  --ww-strong: #F2F2F2;      /* round icon buttons */
  --ww-ink: #222222;         /* text, headings, data on maps and charts (15.9:1) */
  --ww-body: #3F3F3F;        /* long text (10.5:1) */
  --ww-muted: #6A6A6A;       /* secondary text, the grey of the wordmark (5.4:1) */
  --ww-faint: #929292;       /* disabled text only (3.1:1, never for reading) */
  --ww-line: #DDDDDD;        /* hairlines and borders */
  --ww-line-soft: #EBEBEB;   /* lighter dividers */
  --ww-line-strong: #C1C1C1; /* input borders, the light end of data ramps */
  --ww-here: #FF385C;        /* coral: the "here" dot, the chosen area, the logo point (graphics, not text) */
  --ww-action: #E00B41;      /* deep red: the one primary button per view, white text 4.9:1 */
  --ww-action-press: #B8082F;
  --ww-error: #C13515;
  --ww-marker: #FFE45C;      /* yellow highlighter behind the hand-written Beta / Coming soon */
  /* data ramps (maps and charts): ink to light grey, the chosen item in coral */
  --ww-ramp-1: #222222; --ww-ramp-2: #5E5E5E; --ww-ramp-3: #929292; --ww-ramp-4: #C1C1C1; --ww-ramp-5: #EBEBEB;
  /* type */
  --ww-sans: "Pretendard", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ww-hand: "Caveat", "Nanum Pen Script", cursive;            /* Beta and Coming soon only */
  --ww-hand-ko: "Nanum Pen Script", "Caveat", cursive;
  /* shape */
  --ww-r-sm: 4px; --ww-r-btn: 8px; --ww-r-card: 14px; --ww-r-lg: 20px; --ww-r-pill: 999px;
  --ww-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 2px 6px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .10);  /* the one shadow */
  /* spacing (4 px steps) */
  --ww-s1: 4px; --ww-s2: 8px; --ww-s3: 12px; --ww-s4: 16px; --ww-s5: 24px; --ww-s6: 32px; --ww-s7: 48px; --ww-s8: 64px;
  --ww-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- logo: pin with the coral "here" dot, WhereWise with Wise in grey ---------- */
.ww-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ww-ink); text-decoration: none; font: 700 19px/1 var(--ww-sans); letter-spacing: -0.02em; }
.ww-logo svg { flex: none; }
.ww-logo .ww-wise { color: var(--ww-muted); }

/* ---------- hand-written Beta / Coming soon on a yellow highlighter stroke ---------- */
.ww-beta { display: inline-block; font: 700 23px/1 var(--ww-hand); color: var(--ww-ink); padding: 0 7px; transform: rotate(-4deg); letter-spacing: 0;
  background: linear-gradient(transparent 38%, var(--ww-marker) 38%, var(--ww-marker) 88%, transparent 88%); white-space: nowrap; }
.ww-beta:lang(ko), .ww-beta.ko { font: 400 23px/1 var(--ww-hand-ko); }

/* ---------- buttons ---------- */
.ww-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--ww-r-btn);
  font: 600 16px/1 var(--ww-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s var(--ww-ease), border-color .15s var(--ww-ease); }
.ww-btn-primary { background: var(--ww-action); color: #fff; }
.ww-btn-primary:hover { background: var(--ww-action-press); }
.ww-btn-secondary { background: var(--ww-bg); color: var(--ww-ink); border-color: var(--ww-ink); }
.ww-btn-secondary:hover { background: var(--ww-soft); }
.ww-btn-quiet { background: var(--ww-bg); color: var(--ww-ink); border-color: var(--ww-line); }
.ww-btn-quiet:hover { border-color: var(--ww-ink); }
.ww-btn:focus-visible, .ww-circle:focus-visible, .ww-chip:focus-visible { outline: 2px solid var(--ww-ink); outline-offset: 2px; }
.ww-circle { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ww-strong); color: var(--ww-ink); display: inline-grid; place-items: center; cursor: pointer; }
.ww-circle:hover { background: var(--ww-line-soft); }

/* ---------- chips and tags ---------- */
.ww-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--ww-r-pill); border: 1px solid var(--ww-line);
  background: var(--ww-bg); color: var(--ww-ink); font: 500 13px/1 var(--ww-sans); }
.ww-chip[aria-pressed="true"] { border-color: var(--ww-ink); box-shadow: inset 0 0 0 1px var(--ww-ink); }

/* ---------- cards ---------- */
.ww-card { background: var(--ww-bg); border: 1px solid var(--ww-line); border-radius: var(--ww-r-card); padding: var(--ww-s6); }
.ww-card-raise:hover { box-shadow: var(--ww-shadow); }

/* ---------- the search pill: where | trade | what to see | coral-red round button ---------- */
.ww-search { display: flex; align-items: center; height: 64px; padding-right: 8px; background: var(--ww-bg); border: 1px solid var(--ww-line); border-radius: var(--ww-r-pill); box-shadow: var(--ww-shadow); }
.ww-search:focus-within { border-color: var(--ww-ink); }
.ww-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 24px; height: 100%; border-radius: var(--ww-r-pill); cursor: pointer; position: relative; min-width: 0; }
.ww-seg + .ww-seg::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--ww-line); }
.ww-seg:hover { background: var(--ww-soft); }
.ww-seg-k { font: 700 12px/1.3 var(--ww-sans); color: var(--ww-ink); }
.ww-seg input, .ww-seg select { border: 0; background: transparent; font: 500 14px/1.4 var(--ww-sans); color: var(--ww-ink); padding: 0; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 0; }
.ww-seg input::placeholder { color: var(--ww-muted); }
.ww-go { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: var(--ww-action); color: #fff; display: grid; place-items: center; cursor: pointer; margin-left: 4px; }
.ww-go:hover { background: var(--ww-action-press); }

/* ---------- footer locale row: language, currency, help ---------- */
.ww-locale { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ww-locale-item { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--ww-sans); color: var(--ww-ink); background: none; border: 0; padding: 8px 10px; border-radius: var(--ww-r-btn); text-decoration: none; cursor: pointer; }
button.ww-locale-item:hover, a.ww-locale-item:hover { background: var(--ww-line-soft); }
span.ww-locale-item { cursor: default; }

@media (prefers-reduced-motion: reduce) { .ww-btn, .ww-circle { transition: none; } }