/* 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;
  /* grade signal (2026-10-18), for grades and ranks only: teal (1, the top fifth) to orange-red (5, the bottom fifth), chosen to
     stay apart for red-green colour blindness and away from the brand reds. Text on it: white on 1 and 5, ink on 2 to 4.
     The number ("4등급", "17번째") is always written beside it. */
  --ww-grade-1: #0F7B5F; --ww-grade-2: #5FA35A; --ww-grade-3: #E8B425; --ww-grade-4: #E8792B; --ww-grade-5: #C2410C;
  /* categories in a chart (2026-10-18): days of the week, cost parts. Ink first, then blue and purple, apart from the grade signal and
     the coral; white text reads on all three (4.7:1 and 5.7:1). Lines keep their dashes too, for print and colour blindness. */
  --ww-cat-1: #222222; --ww-cat-2: #2F6FDB; --ww-cat-3: #7C3AED; --ww-cat-4: #C1C1C1;
  /* 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: 0.05em;   /* about 1px: the pin's own side space keeps it off the W (2026-10-19) */
  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); }
/* the dot of the i in Wise is the pin's coral dot (2026-10-18): the real letter, its top painted coral and the rest grey, so the dot
   keeps the font's own size and place and the text still reads "WhereWise". With line-height 1 the gap between the dot and the stem
   of Pretendard Bold's i is 29.1% down the letter's box. Printed or in forced colours it is a plain grey i. */
.ww-i { display: inline-block; line-height: 1; color: transparent; background: linear-gradient(var(--ww-here) 0 29.1%, var(--ww-muted) 29.1%);
  -webkit-background-clip: text; background-clip: text; }
@media print, (forced-colors: active) { .ww-i { color: inherit; background: none; } }

/* ---------- 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; } }