:root {
  --bg: #EEF1F3;
  --band: #E2E7EB;
  --ink: #0F1B27;
  --muted: #475563;
  --rule: #B3BDC6;
  --accent: #14B8FF;      /* the bubble — Travel Mapmory's cyan, used once on the page */
  --link: #0A5DB0;
  --vial: rgba(20, 184, 255, 0.10);
  --shadow: 0 1px 0 rgba(15, 27, 39, 0.06), 0 18px 40px -22px rgba(15, 27, 39, 0.35);
  --serif: 'Noto Serif KR', 'Apple SD Gothic Neo', 'Noto Serif CJK KR', serif;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C141C;
    --band: #111C26;
    --ink: #E8EDF1;
    --muted: #A3B0BC;
    --rule: #2E3A46;
    --accent: #3CC3FF;
    --link: #7BCBFF;
    --vial: rgba(60, 195, 255, 0.10);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C141C;
  --band: #111C26;
  --ink: #E8EDF1;
  --muted: #A3B0BC;
  --rule: #2E3A46;
  --accent: #3CC3FF;
  --link: #7BCBFF;
  --vial: rgba(60, 195, 255, 0.10);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* language switch: content is paired in the markup, CSS shows one side */
html[data-lang="ko"] [data-l="en"],
html[data-lang="en"] [data-l="ko"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 600px) { .wrap { padding: 0 2rem; } }

/* header */
.top { padding: 1.25rem 0; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: none;
}
.lang { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; }
.lang button {
  font: inherit; font-size: 0.8125rem; line-height: 1;
  min-height: 2rem; padding: 0 0.85rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* hero */
.hero { padding: clamp(3.5rem, 12vh, 8rem) 0 clamp(4rem, 12vh, 8rem); }
h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 7.4vw, 5.25rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.lede { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; max-width: 38rem; color: var(--muted); font-size: 1.125rem; }

/* vial */
.vial { position: relative; margin-top: clamp(4rem, 12vh, 7.5rem); height: 3.5rem; --travel: min(36vw, 26rem); }
.vial-glass {
  position: absolute; left: 0; right: 0; top: 0.75rem; height: 2.25rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--vial);
  display: flex; align-items: center; justify-content: center;
}
.vial-glass::before, .vial-glass::after {            /* the two centre marks of a level */
  content: ''; position: absolute; top: -0.45rem; bottom: -0.45rem; width: 1px; background: var(--ink); opacity: 0.55;
}
.vial-glass::before { left: calc(50% - 1.6rem); }
.vial-glass::after  { left: calc(50% + 1.6rem); }
.vial-ticks {
  position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 0.5rem;
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 1rem);
}
.bubble {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--accent) 38%);
  box-shadow: 0 0 0 1px rgba(15, 27, 39, 0.18);
  animation: settle 2.8s 0.35s both cubic-bezier(0.45, 0.05, 0.3, 1);
}
@keyframes settle {
  0%   { transform: translateX(calc(var(--travel) * -1)); }
  38%  { transform: translateX(calc(var(--travel) * 0.26)); }
  62%  { transform: translateX(calc(var(--travel) * -0.09)); }
  82%  { transform: translateX(calc(var(--travel) * 0.025)); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
html[data-still] .bubble { animation: none; }   /* ?still=1 — screenshot aid */

/* sections */
.sec { padding: clamp(4rem, 10vw, 7.5rem) 0; border-top: 1px solid var(--rule); }
.sec.band { background: var(--band); }
.grid { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .grid { grid-template-columns: 1fr 2.4fr; gap: 4rem; } }
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0; }
.body > * + * { margin-top: 2.5rem; }

/* about */
.meaning { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; align-items: start; }
.meaning p { margin-top: 0.6rem; color: var(--muted); max-width: 36rem; }
.glyph { font-family: var(--serif); font-weight: 400; font-size: 4.25rem; line-height: 1; padding-top: 0.2rem; }
@media (min-width: 600px) { .meaning { grid-template-columns: 8rem 1fr; } .glyph { font-size: 5.5rem; } }
.sub { padding-top: 1rem; }
.principles { margin: 0; }
.principles > div { padding: 1.5rem 0; border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; }
.principles > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 600px) { .principles > div { grid-template-columns: 13rem 1fr; gap: 2rem; } }
.principles dt { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.5; }
.principles dd { margin: 0; color: var(--muted); max-width: 36rem; }

/* apps */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; align-content: start; }
.app-card { min-width: 0; border: 1px solid var(--rule); border-radius: 1.25rem; padding: 1.75rem; display: grid; gap: 1.75rem; background: var(--bg); }
.app-head { display: flex; align-items: center; gap: 1.25rem; }
.app-icon { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; box-shadow: var(--shadow); background: #fff; flex: none; }
.app-name { line-height: 0; }
.tm-wm { width: 10.5rem; height: auto; }
.tm-wm-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm-wm-dark { display: none; }
  :root:not([data-theme="light"]) .tm-wm-light { display: block; }
}
:root[data-theme="dark"] .tm-wm-dark { display: none; }
:root[data-theme="dark"] .tm-wm-light { display: block; }
.app-tag { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem;
  border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.btn.solid { background: var(--ink); color: var(--bg); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #0F1B27; }
.plain { font-size: 0.9375rem; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.shot { margin: 0; border: 1px solid var(--rule); border-radius: 1.25rem; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.shot img { width: 100%; height: auto; aspect-ratio: 490 / 1066; object-fit: cover; }
@media (max-width: 40rem) {   /* phone: one swipeable row inside the card, the page itself never scrolls sideways */
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; margin: 0 -1.75rem; padding: 0.25rem 1.75rem 0.75rem; scroll-padding: 0 1.75rem; -webkit-overflow-scrolling: touch; }
  .shot { flex: 0 0 62%; scroll-snap-align: start; }
}
/* contact */
.contact-note { color: var(--muted); }
.mail {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 4.6vw, 2.4rem); letter-spacing: -0.015em;
  color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--accent); overflow-wrap: anywhere;
}
.mail:hover { color: var(--link); }

/* footer */
.foot { border-top: 1px solid var(--rule); padding: 3rem 0 4rem; color: var(--muted); font-size: 0.875rem; line-height: 1.7; }
.biz { margin: 0; display: grid; gap: 0.6rem 2rem; }
@media (min-width: 56rem) { .biz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.biz > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.biz dt { color: var(--muted); }
.biz dd { margin: 0; color: var(--ink); }
.biz a { color: var(--ink); }
.legal { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.legal a { color: var(--muted); }