:root {
  --primary: #6c6fff;
  --primary-dark: #5a5df0;
  --disabled: #c8c8c8;
  --text: #222;
  --teal: #2bb89a;
  --foot-bg: #f3f3f3;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: var(--text);
  background: #e9e9ee;
}
button { font: inherit; border: 0; cursor: pointer; background: none; }
img { display: block; max-width: 100%; }

/* all sizes scale with the app width (cqw) so it matches the mockups at any phone width */
.app {
  container-type: inline-size;
  position: relative;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
.screen { position: absolute; inset: 0; display: none; flex-direction: column; background: #fff; overflow: hidden; }
.screen.active { display: flex; }

.top-bar {
  flex: none; height: 15cqw; padding: 0 4.5cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
}
.top-bar .logo { height: 11cqw; width: auto; }
.icon-btn { width: 9cqw; height: 9cqw; display: grid; place-items: center; }
.icon-btn img { width: 7.5cqw; height: 7.5cqw; }
.hamburger, .hamburger::before, .hamburger::after {
  display: block; width: 6cqw; height: .75cqw; background: #111; border-radius: 1px; content: "";
}
.hamburger { position: relative; }
.hamburger::before { position: absolute; top: -1.9cqw; }
.hamburger::after { position: absolute; top: 1.9cqw; }

.copyright {
  flex: none; margin-top: auto; padding: 2.4cqw 2cqw; text-align: center;
  font-size: 2.9cqw; color: #333; font-weight: 400; background: var(--foot-bg);
}

.btn {
  width: 100%; height: 13cqw; border-radius: 0;
  background: var(--disabled); color: #fff; font-size: 3.9cqw; font-weight: 400;
}
.btn.primary, .btn.ready { background: var(--primary); }
.btn.primary:active, .btn.ready:active { background: var(--primary-dark); }
.btn:disabled { cursor: default; }

/* screen 1 */
#screen1 { background: #fefeff; }
#screen1 .top-bar { background: #fefeff; }
.s1-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.guide { width: 100%; flex: 0 1 auto; min-height: 0; object-fit: contain; }
.s1-text {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding-bottom: 6cqw;
  text-align: center; font-size: 4.4cqw; line-height: 2; font-weight: 400;
}
.brand { color: var(--teal); font-weight: 700; letter-spacing: .12em; }
.s1-cta { flex: none; padding: 0 4.5cqw 4.5cqw; }
.s1-cta .btn { height: 14.5cqw; border-radius: 3.2cqw; font-size: 4.4cqw; }

/* screens 2, 3: photo on top at natural ratio, card overlapping its lower part */
.photo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fab {
  position: absolute; top: 3.3cqw; width: 10.2cqw; height: 10.2cqw; border-radius: 50%;
  display: grid; place-items: center; background: rgba(240,240,244,.88);
}
.fab img { width: 6.2cqw; height: 6.2cqw; }
.fab .hamburger, .fab .hamburger::before, .fab .hamburger::after { width: 5cqw; height: .7cqw; }
.fab .hamburger::before { top: -1.6cqw; }
.fab .hamburger::after { top: 1.6cqw; }
.fab-back { left: 3.3cqw; }
.fab-menu { right: 3.3cqw; }

.card {
  position: relative; z-index: 1; flex: none;
  margin: -31cqw 3.6cqw 3.6cqw;
  background: #fff; border-radius: 3.2cqw; overflow: visible;
  box-shadow: 0 .6cqw 3cqw rgba(0,0,0,.18);
}
.card .btn { border-radius: 0 0 3.2cqw 3.2cqw; }
.card-title { padding: 7.5cqw 3cqw 5cqw; font-size: 4.2cqw; line-height: 1.6; text-align: center; font-weight: 400; }
.card-title b { font-weight: 700; }

.qr {
  position: relative; display: inline-grid; place-items: center; width: 5.6cqw; height: 5.6cqw; margin-right: 1.4cqw; vertical-align: .8cqw;
}
.qr::before, .qr::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(#4b4f6a,#4b4f6a) top left / 1.4cqw .3cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) top left / .3cqw 1.4cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) top right / 1.4cqw .3cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) top right / .3cqw 1.4cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) bottom left / 1.4cqw .3cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) bottom left / .3cqw 1.4cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) bottom right / 1.4cqw .3cqw no-repeat,
    linear-gradient(#4b4f6a,#4b4f6a) bottom right / .3cqw 1.4cqw no-repeat;
}
.qr::after { display: none; }
.qr i {
  width: 3.9cqw; height: 3.9cqw; display: grid; place-items: center;
  background: #cfd3e6; font: 700 1.9cqw/1 "Noto Sans KR", sans-serif; color: #3b4170; font-style: normal;
}

.keys { display: flex; justify-content: center; gap: 2.2cqw; padding: 0 3cqw 6.5cqw; }
.key {
  width: 11cqw; height: 11cqw; text-align: center; font: 700 5cqw "Noto Sans KR", sans-serif;
  border: .3cqw solid #e2e2e2; border-radius: 1.8cqw; background: #fff; color: #111; outline: none;
  text-transform: uppercase; caret-color: var(--primary); padding: 0;
}
.key:focus { border-color: var(--primary); box-shadow: 0 0 0 .1cqw var(--primary); }
.key.fixed { background: #f0f0f0; pointer-events: none; }

/* screen 3 hologram seal */
.card-result .card-title { padding-top: 14cqw; padding-bottom: 7cqw; }
.seal {
  position: absolute; left: 50%; top: -11.5cqw; transform: translateX(-50%);
  width: 22cqw; height: 22cqw; filter: drop-shadow(0 .3cqw .8cqw rgba(0,0,0,.25));
}

/* screen 4 */
.s4-top { justify-content: center; height: 7rem; padding: 25px 20px; }
.bd-logo { width: 100%; height: 100%; object-fit: contain; }
.slides { position: relative; flex: 1; min-height: 0; background: #eceaf1; }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; }
.slide.active { opacity: 1; }
.more {
  position: absolute; left: 50%; bottom: 3.5cqw; transform: translateX(-50%);
  padding: .9cqw 3.2cqw; border-radius: 5cqw; background: #fff; color: #111;
  font-size: 2.7cqw; font-weight: 700; text-decoration: none; box-shadow: 0 .2cqw 1.2cqw rgba(0,0,0,.15);
}
.more:not([href]) { cursor: default; }
.tabs {
  flex: none; height: 5rem; padding: 10px; display: flex; justify-content: space-evenly;
  background: #fff; border-top: 1px solid #f0f0f0;
}

.tab { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.tab::before { content: ""; position: absolute; inset: 0; background: #efefef; border-radius: 5rem; opacity: 0; transition: opacity .2s; }
.tab.active::before { opacity: 1; }
.tab img { position: relative; width: auto; height: 28px; }