/* KoreaBusan — personal host guide, v2.3 (one page, no scroll).
   TEXT = left zone · PHOTO SUBJECT = right zone. Everything fits in 100dvh.
   Mobile-first, no external fonts/scripts/requests. */

:root {
  --ink: #1c2a33;
  --ink-soft: #52626d;
  --radius: 16px;

  --serif: ui-serif, Georgia, Cambria, "Times New Roman", "Nanum Myeongjo", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", sans-serif;

  --on-photo: #ffffff;
  --on-photo-soft: rgba(255, 255, 255, 0.86);

  /* Sky theme (locked) */
  --accent: #2ea3d6;
  --accent-dark: #2280b0;
  --eyebrow: #d3edfb;
  --card-bg: rgba(247, 252, 254, 0.92);
  --line: #dbeaf2;

  --scrim: linear-gradient(90deg,
      rgba(6, 18, 28, 0.80) 0%, rgba(6, 18, 28, 0.56) 20%,
      rgba(6, 18, 28, 0.24) 44%, rgba(6, 18, 28, 0) 66%);
  --scrim-mobile: linear-gradient(180deg,
      rgba(6, 18, 28, 0.60) 0%, rgba(6, 18, 28, 0.26) 40%,
      rgba(6, 18, 28, 0.12) 66%, rgba(6, 18, 28, 0.34) 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Lock the page to one screen — no scroll anywhere. */
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: #0c161f;
  color: var(--on-photo);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Background crossfade + per-scene focal points --------------------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0c161f; }
.bg__slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: 50% 50%;
  transition: opacity 1.5s ease-in-out; will-change: opacity;
}
.bg__slide.is-active { opacity: 1; }
.bg__overlay { position: absolute; inset: 0; background: var(--scrim-mobile); }
@media (prefers-reduced-motion: reduce) { .bg__slide { transition: none; } }

.bg__slide--haeundae { background-position: 72% 44%; }
.bg__slide--gwangan  { background-position: 70% 46%; }
.bg__slide--centum   { background-position: 60% 30%; }
.bg__slide--bexco    { background-position: 62% 40%; }
@media (max-width: 700px) {
  .bg__slide--haeundae { background-position: 80% 50%; }
  .bg__slide--gwangan  { background-position: 66% 48%; }
  .bg__slide--centum   { background-position: 55% 42%; }
  .bg__slide--bexco    { background-position: 56% 46%; }
}

/* ---- One-screen left column ------------------------------------------- */
.wrap {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vh, 1.1rem);
  padding: clamp(1rem, 3.2vh, 2rem) 1.15rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Desktop: anchor to the left zone. */
@media (min-width: 60rem) {
  .bg__overlay { background: var(--scrim); }
  .wrap {
    margin-left: 9vw;
    max-width: clamp(22rem, 34vw, 30rem);
    padding: clamp(1rem, 3vh, 2rem) 0;
  }
}

.eyebrow {
  margin: 0;
  font-size: clamp(0.62rem, 1.4vh, 0.78rem);
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--eyebrow);
}
.headline {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 4.6vh, 2.9rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--on-photo);
}
.subline {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.9rem, 2.1vh, 1.1rem);
  color: var(--on-photo-soft);
}

.btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: clamp(0.6rem, 1.5vh, 0.9rem) clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 600;
  font-size: clamp(0.9rem, 1.9vh, 1.05rem);
  border-radius: 999px; text-shadow: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transition: background 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn__arrow { font-size: 1.15em; }

/* ---- Host message card (pulled up, holds message + langs + links + credit) */
.card {
  background: var(--card-bg);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(0.85rem, 2.2vh, 1.3rem) clamp(1rem, 2.4vw, 1.4rem);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  text-shadow: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.5vh, 0.9rem);
}
.card__p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.82rem, 1.9vh, 1rem);
  line-height: 1.5;
}
.card__p strong { color: var(--ink); }
.link { color: var(--accent-dark); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* Language chips */
.langs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lang {
  display: inline-block; padding: 0.24rem 0.66rem; border-radius: 999px;
  font-size: clamp(0.72rem, 1.6vh, 0.82rem); border: 1px solid var(--line);
}
.lang--active { background: var(--ink); color: #fff; border-color: var(--ink); }
.lang--soon { color: #9aa7b0; background: rgba(0, 0, 0, 0.04); }

/* Links row */
.foot__links {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.25rem 1rem; margin: 0; padding: 0;
}
.foot__links a {
  color: var(--ink-soft); text-decoration: none;
  font-size: clamp(0.8rem, 1.7vh, 0.9rem);
}
.foot__links a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Credit + copyright, one small line (do not remove) */
.foot__credit {
  margin: 0; color: #9aa7b0;
  font-size: clamp(0.62rem, 1.3vh, 0.72rem);
  line-height: 1.35;
}

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