/* qwew main page. Values follow DESIGN.md; the rest of the site keeps its captured styles.
   Fonts are cut to this page's text by scripts/subset-qwew-main-fonts.py: weight 800 only covers
   h1, h2, .brand-name and .name, and the wide Latin face only ASCII, so use them nowhere else. */
@font-face {
  font-family: 'qwew Sans';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pretendard-400.woff2') format('woff2');
}

@font-face {
  font-family: 'qwew Sans';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/pretendard-600.woff2') format('woff2');
}

@font-face {
  font-family: 'qwew Sans';
  font-weight: 800;
  font-display: swap;
  src: url('fonts/pretendard-800.woff2') format('woff2');
}

@font-face {
  font-family: 'qwew Wide';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-wide-500.woff2') format('woff2');
}

:root {
  --ink: #0b0b0c;
  --text: #f4f1ec;
  --muted: #c8c2b8;
  --line: rgba(244, 241, 236, 0.2);
  --band: rgba(11, 11, 12, 0.86);
  --red: #a7250c;
  --red-hover: #c02f13;
  --orange: #e8894f;
  --sans: 'qwew Sans', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wide: 'qwew Wide', 'Archivo', 'Arial', sans-serif;
  --wrap: 1200px;
  --gutter: 20px;
  --header: 64px;
  --callbar: 56px;
  /* the call bar's measured height (main.js); without the script, its usual height */
  --callbar-room: var(--callbar-live, calc(var(--callbar) + env(safe-area-inset-bottom)));
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}

@media (min-width: 960px) {
  :root { --gutter: 48px; --header: 76px; }
}

* { box-sizing: border-box; }

/* the fixed header and the phone call bar must never cover a link target or a focused control */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 8px);
  scroll-padding-bottom: calc(var(--callbar-room) + 8px);
}

@media (min-width: 960px) {
  html { scroll-padding-bottom: 0; }
}

/* sections focused by the phone menu show no outline box; the heading below still reads first */
section:focus { outline: none; }

html:has(.menu[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.75 var(--sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

a { color: inherit; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 40;
  padding: 10px 14px;
  background: var(--text);
  color: var(--ink);
}

.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ---------- the photo behind the whole page (the reference's fixed background) ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* a real element, not a pseudo-element; the darkest part sits where most text is read */
.backdrop-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.72) 0%, rgba(11, 11, 12, 0.77) 50%, rgba(11, 11, 12, 0.85) 100%);
}

/* ---------- header: clear over the first screen, solid once the page moves ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--header);
  transition: background-color 0.2s ease;
}

.site-header.is-solid { background: rgba(11, 11, 12, 0.94); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  height: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
}

.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-nav { display: none; }

/* phones: the red tags (as on the reference) until main.js has the menu ready, then the menu button */
.tags { display: flex; }

.has-menu .tags { display: none; }

.tag { white-space: nowrap; }

/* phones without the menu (no JavaScript): the header sits in the page flow instead of being fixed,
   so when the name, the two tags and the call icon do not fit one row (320px, large text) it grows
   onto two rows without covering anything */
@media (max-width: 959px) {
  html:not(.has-menu) { scroll-padding-top: 0; }
  html:not(.has-menu) .site-header { position: relative; height: auto; }
  html:not(.has-menu) .header-inner {
    flex-wrap: wrap;
    column-gap: 8px;
    min-height: var(--header);
  }
  html:not(.has-menu) .hero {
    min-height: calc(100svh - var(--header));
    padding-top: 24px;
  }
  html:not(.has-menu) .tag { padding: 0 8px; }
}

/* the red face is 32px tall; a clear 6px border makes the touch area 44px */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 6px solid transparent;
  background: var(--red);
  background-clip: padding-box;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tag:hover { background: var(--red-hover); }

.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.header-call-label,
.header-call-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.menu-open { display: none; }

.has-menu .menu-open,
.menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.menu-open .icon,
.menu-close .icon { width: 26px; height: 26px; }

@media (min-width: 960px) {
  .site-nav {
    display: flex;
    gap: 4px 28px;
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .site-nav a:hover { color: var(--orange); }
  .tags,
  .has-menu .tags { display: flex; }
  .header-call {
    gap: 8px;
    padding: 0 18px;
    background: var(--red);
    color: #fff;
    transition: background-color 0.15s ease;
  }
  .header-call:hover { background: var(--red-hover); }
  .header-call .icon { width: 18px; height: 18px; }
  .header-call-number {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    font-family: var(--wide);
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .has-menu .menu-open { display: none; }
}

/* ---------- phone menu (a modal dialog) ---------- */
.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(11, 11, 12, 0.98);
  color: var(--text);
}

.menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 var(--gutter) 32px;
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header);
}

.menu-title {
  color: var(--muted);
  font-size: 15px;
}

.menu-links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 24px;
  font-weight: 600;
  text-decoration: none;
}

.menu-tags {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}

.menu-tags .tag {
  min-height: 44px;
  padding: 0 18px;
  border-width: 0;
  font-size: 15px;
}

.menu-call {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 40px;
}

.menu-call .btn { width: 100%; }

.menu-call .phone { text-align: center; }

/* ---------- call button and number ---------- */
.call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 2px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn-red { background: var(--red); color: #fff; }

.btn-red:hover { background: var(--red-hover); }

.phone {
  font-family: var(--wide);
  font-size: 20px;
  letter-spacing: 0.06em;
}

/* ---------- first screen: centred on the photo ---------- */
.hero {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--header) + 24px) 0 64px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(36px, calc(8.57vw + 8.6px), 72px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* each phrase stays on one line while it fits; with very large text it may still wrap inside */
.hero h1 .phrase { display: inline-block; }

.hero h1 .with {
  display: block;
  margin-top: 10px;
  color: var(--orange);
  font-size: max(32px, 0.66em);
  letter-spacing: -0.01em;
}

.hero .lead {
  margin-top: 20px;
  font-size: 18px;
}

.hero .call { margin-top: 32px; }

@media (min-width: 960px) {
  .hero .lead { font-size: 20px; }
}

/* ---------- sections ---------- */
.band { background: var(--band); }

h2 {
  font-size: clamp(28px, calc(1.2vw + 22px), 40px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.intro {
  margin-top: 14px;
  font-size: 18px;
}

.band .intro { color: var(--muted); }

/* services: five columns with rules between them (rows on phones) */
.services { padding: 88px 0; }

.sec-head {
  max-width: 40em;
  margin: 0 auto 44px;
  text-align: center;
}

.service-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-grid > div {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  text-align: center;
}

.service-grid > div + div { border-top: 1px solid var(--line); }

.service-grid dt { font-weight: 600; }

.service-grid dd { color: var(--muted); font-size: 16px; }

.note {
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* client 10/28: "이거 폰트만 좀더 크게" on the phone capture — larger rows below the five-column width */
@media (max-width: 959px) {
  .services .intro { font-size: 19px; }
  .service-grid > div { gap: 6px; padding: 22px 0; }
  .service-grid dt { font-size: 21px; }
  .service-grid dd { font-size: 18px; }
  .note { font-size: 17px; }
}

@media (min-width: 960px) {
  .services { padding: 120px 0; }
  .service-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .service-grid > div { padding: 30px 16px; }
  .service-grid > div + div { border-top: 0; border-left: 1px solid var(--line); }
}

/* casino services: the English line leads, the client's own game banner sits beside it — never cropped (it carries its
   own labels) and at most 512 CSS px wide, half of its 1024px file, so it stays sharp on 2x screens */
.casino { padding: 96px 0; }

.feature {
  display: grid;
  gap: 36px;
  align-items: center;
}

.latin {
  font-family: var(--wide);
  font-size: clamp(30px, calc(3vw + 18px), 54px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.feature-text h2 {
  margin-top: 14px;
  font-size: clamp(22px, calc(0.6vw + 19px), 28px);
}

.feature-text .intro { max-width: 30em; }

.feature-photo img { width: 100%; max-width: 512px; }

@media (min-width: 960px) {
  .casino { padding: 140px 0; }
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
    gap: 56px;
  }
}

/* details: three columns, a short red rule over each title */
.details { padding: 88px 0; }

.detail-grid { display: grid; gap: 40px; }

.detail h3 {
  display: inline-block;
  padding-top: 14px;
  border-top: 2px solid var(--red);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}

.detail ul {
  margin-top: 14px;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.detail li + li { margin-top: 6px; }

@media (min-width: 960px) {
  .details { padding: 112px 0; }
  .detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
}

/* steps: a timeline (across on wide screens, down on phones) */
.steps { padding: 96px 0; }

.steps h2 { text-align: center; }

.step-list {
  margin-top: 40px;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--line);
  list-style: none;
}

/* number and sentence share one line height, so their first lines line up */
.step-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 12px 0;
  font-size: 18px;
  line-height: 32px;
}

.step-list .num {
  font-family: var(--wide);
  font-size: 22px;
  line-height: 32px;
}

@media (min-width: 960px) {
  .steps { padding: 140px 0; }
  .step-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 56px;
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .step-list li {
    display: block;
    padding: 24px 20px 0 0;
  }
  .step-list .num {
    display: block;
    margin-bottom: 6px;
    font-size: 28px;
  }
}

/* contact: centred, large */
.contact {
  padding: 104px 0 120px;
  text-align: center;
}

.contact h2 { font-size: 22px; }

.contact .name {
  margin-top: 6px;
  font-size: clamp(40px, calc(3vw + 30px), 64px);
  font-weight: 800;
  line-height: 1.2;
}

.contact .call { margin-top: 28px; }

/* footer */
.site-footer {
  padding: 24px 0 28px;
  background: var(--ink);
  color: var(--muted);
  font-size: 14px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
}

.footer-links { display: flex; gap: 20px; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}

/* ---------- phones: call bar held at the bottom of the screen ----------
   sticky, not fixed: the bar keeps its own place after the footer, so however tall it grows (large
   text, no script to measure it) it can never end up over the footer */
.callbar {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(var(--callbar) + env(safe-area-inset-bottom));
  padding: 0 16px env(safe-area-inset-bottom);
  background: var(--red);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, visibility 0s;
}

.callbar.is-hidden {
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 0.2s ease, visibility 0s 0.2s;
}

.callbar-number {
  font-family: var(--wide);
  letter-spacing: 0.06em;
}

@media (min-width: 960px) {
  .callbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}