:root {
  color-scheme: dark;
  --ink: #f0e8d9;
  --muted: #c4c9c4;
  --sea: #122e3c;
  --cameo: #183844;
  --hairline: rgba(221, 218, 202, .3);
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--sea); }
body { margin: 0; min-height: 100svh; color: var(--ink); position: relative; isolation: isolate; }
body::after {
  content: '';
  position: fixed;
  inset: 18px;
  border: 1px solid rgba(231, 226, 206, .17);
  pointer-events: none;
  z-index: 2;
}

.seascape {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(5, 12, 27, .60), rgba(8, 17, 35, .48) 48%, rgba(5, 12, 27, .68)),
    url('./assets/space-tardis.jpg');
  background-size: cover;
  background-position: center;
}

.drawer {
  width: min(100%, 960px);
  min-height: 100svh;
  padding: 64px 60px 38px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading { text-align: center; width: 100%; }
.byline {
  margin: 0 0 42px;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .16em;
}
.byline span { display: inline-flex; align-items: center; gap: 18px; }
.byline span::before, .byline span::after {
  content: '';
  display: block;
  width: 27px;
  height: 1px;
  background: var(--hairline);
}
h1 {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', 'Batang', 'AppleMyungjo', serif;
  font-size: clamp(2.3rem, 4.8vw, 3.625rem);
  line-height: 1.5;
  letter-spacing: -.035em;
  font-weight: 400;
  margin: 0;
  color: #f1e8d7;
  text-shadow: 0 2px 22px rgba(0, 10, 25, .65);
}
.heading-line { display: block; height: 1px; width: 32px; background: #b7b7a8; opacity: .6; margin: 32px auto 0; }

.apps {
  width: min(100%, 650px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 38px;
  margin: auto 0;
  padding: 64px 0 58px;
}

.app {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 7px;
  padding: 8px 4px 12px;
  margin: 0;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  text-align: center;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease;
}
a.app { cursor: pointer; }
.cameo {
  display: block;
  width: clamp(100px, 12.5vw, 126px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cameo);
  border: 1px solid rgba(225, 217, 193, .4);
  box-shadow: 0 5px 20px rgba(0, 12, 24, .28), 0 0 0 5px rgba(194, 195, 176, .04);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.cameo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.app-label { font-size: 1rem; line-height: 1.6; margin-top: 22px; font-weight: 400; letter-spacing: .015em; text-shadow: 0 2px 8px #050d18; }
.app-status { color: #bdc8c8; font-size: .75rem; line-height: 1.5; margin-top: 5px; letter-spacing: .01em; }
.app:disabled { opacity: 1; }
a.app:hover { transform: translateY(-4px); }
a.app:hover .cameo { border-color: #ded4b7; box-shadow: 0 9px 25px rgba(0, 12, 24, .32), 0 0 0 5px rgba(221, 214, 188, .07); }
a.app:focus-visible { outline: 2px solid #efe1ba; outline-offset: 10px; }
.noscript { max-width: 300px; color: var(--muted); line-height: 1.7; text-align: center; }

@media (min-width: 1100px) and (min-height: 860px) {
  .drawer { padding-top: 84px; padding-bottom: 48px; }
  .byline { margin-bottom: 54px; }
  .apps { padding-top: 90px; padding-bottom: 84px; }
}

@media (max-width: 600px) {
  .seascape { background-position: 12% center; }
  body::after { inset: 12px; }
  .drawer { padding: 46px 32px 30px; }
  .byline { margin-bottom: 30px; font-size: .75rem; }
  h1 { font-size: clamp(2rem, 8.5vw, 2.7rem); line-height: 1.5; }
  .heading-line { margin-top: 24px; width: 26px; }
  .apps { width: min(100%, 304px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 25px; padding: 36px 0 28px; }
  .app:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 32px) / 2); }
  .cameo { width: min(100%, 94px); }
  .app-label { font-size: .9375rem; margin-top: 13px; }
  .app-status { font-size: .75rem; margin-top: 3px; }
}

@media (max-width: 350px) {
  .drawer { padding-left: 27px; padding-right: 27px; }
  .apps { column-gap: 18px; }
  .byline { letter-spacing: .08em; }
  .byline span { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}