@font-face {
  font-family: "Journey Pretendard";
  src: url("./journey-kr.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

.dsd-journey-body { margin: 0; background: #000; }
.dsd-journey {
  --ink: #fff;
  --muted: #b5b5b5;
  --rule: #3a3a3a;
  --mag-yellow: #ffe103;
  --gutter: clamp(22px, 6vw, 98px);
  --phone-width: min(80vw, 420px);
  max-width: 1920px;
  margin: auto;
  padding-inline: var(--gutter);
  background: #000;
  color: var(--ink);
  color-scheme: dark;
  font: 400 16px/1.55 "Journey Pretendard", "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dsd-journey *, .dsd-journey *::before, .dsd-journey *::after { box-sizing: border-box; }
.dsd-journey :is(p,h1,h2,h3) { margin: 0; }
.dsd-journey a { color: inherit; }
.dsd-journey a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.dsd-journey .dsd-mast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 550;
}
.dsd-journey .dsd-mast { padding-block: 24px; border-bottom: 1px solid var(--rule); }
.dsd-journey .dsd-mast img { display: block; width: clamp(120px, 12vw, 184px); height: auto; }
.dsd-journey .dsd-mast > span { color: var(--muted); }
.dsd-journey .dsd-hero { position: relative; overflow: clip; }
.dsd-journey .dsd-stage {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(32px, 5vw, 80px);
}
.dsd-journey .dsd-kicker { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.dsd-journey .dsd-kicker i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.dsd-journey .dsd-hero-copy { position: relative; z-index: 1; }
.dsd-journey h1 {
  font-size: clamp(42px, 10vw, 78px);
  line-height: 1.08;
  letter-spacing: -.07em;
  font-weight: 680;
  margin-block-end: 20px;
}
.dsd-journey h1 span { display: block; }
/* DSD magazine on Instagram (2026-11-13, user): the ummm.pub magazine masthead, linked out. */
.dsd-journey .dsd-ig {
  display: inline-grid;
  justify-items: start;
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(34px, 4vw, 60px);
  color: var(--mag-yellow);
  text-decoration: none;
}
.dsd-journey .dsd-ig img { display: block; width: clamp(40px, 3.2vw, 54px); height: auto; }
.dsd-journey .dsd-ig-mark {
  display: grid;
  gap: .3em;
  font: 800 clamp(24px, 7vw, 30px) / 1 Arial, sans-serif;
  white-space: nowrap;
}
/* Same as the ummm.pub masthead since 2026-11-14: the Dot Slash Dash logotype (long_logo.svg)
   in the magazine yellow, capitals at the old wordmark's height (1.044em box). */
.dsd-journey .dsd-ig-mark strong { display: flex; align-items: flex-start; gap: .22em; font: inherit; }
.dsd-journey .dsd-ig-logo { display: block; flex: none; height: 1.044em; width: auto; aspect-ratio: 272 / 32; }
.dsd-journey .dsd-ig-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dsd-journey .dsd-ig-mark > span {
  font: 600 max(11px, .4em) / 1.15 "Journey Pretendard", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -.02em;
}
.dsd-journey .dsd-ig-out { flex: none; width: .52em; height: .52em; margin-top: .02em; transition: transform .2s ease; }
.dsd-journey .dsd-ig:hover .dsd-ig-out, .dsd-journey .dsd-ig:focus-visible .dsd-ig-out { transform: translate(.08em, -.08em); }
.dsd-journey .dsd-lede, .dsd-journey .dsd-chapter-heading > p:last-child, .dsd-journey .dsd-mag-copy > p:not(.dsd-cities) {
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.6;
  letter-spacing: -.035em;
}
.dsd-journey .dsd-phone {
  display: block;
  justify-self: center;
  align-self: start;
  width: var(--phone-width);
  height: calc(1.19 * var(--phone-width));
  overflow: hidden;
}
.dsd-journey .dsd-handset { position: relative; }
.dsd-journey .dsd-frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  pointer-events: none;
}
.dsd-journey .dsd-app-screen, .dsd-journey .dsd-screen {
  position: absolute;
  /* Extend under the opaque bezel around the frame’s transparent opening. */
  inset: 2% 5.5%;
  border-radius: 13% / 6%;
  overflow: hidden;
}
.dsd-journey .dsd-app-screen { background: black; }
.dsd-journey .dsd-app-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dsd-journey .dsd-screen {
  background: white;
  opacity: var(--screen-mix, 1);
}
.dsd-journey .dsd-screen img {
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  height: auto;
}
.dsd-journey .dsd-chapter {
  margin-inline: calc(-1 * var(--gutter));
  padding: clamp(60px, 7vw, 112px) var(--gutter);
  background: #000;
  color: white;
  --muted: #f0f2ff;
}
.dsd-journey .dsd-chapter-heading { max-width: 900px; }
.dsd-journey .dsd-chapter-heading h2 {
  margin-block: 16px 22px;
  color: var(--mag-yellow);
  font-size: clamp(39px, 6.3vw, 98px);
  letter-spacing: -.075em;
  font-weight: 660;
  line-height: 1.1;
}
.dsd-journey .dsd-chapter .dsd-kicker { color: var(--mag-yellow); }
.dsd-journey .dsd-spread {
  margin-top: clamp(28px, 4vw, 64px);
  display: grid;
  gap: clamp(26px, 4vw, 65px);
  align-items: center;
}
.dsd-journey .dsd-cards {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.54;
  /* dotslashdash.com copy (2026-11-03): /hello 초대장처럼 카드가 쌓인 상태에서 펼쳐진다. --deck 0 = 쌓임, 1 = 기본 펼침, ~1.3 = 스크롤하며 더 펼침 (deck-scroll.js). */
  --deck: 1;
  perspective: 1200px;
}
.dsd-journey .dsd-card {
  position: absolute;
  margin: 0;
  width: 37%;
  aspect-ratio: 328 / 430;
  transform-origin: 50% 80%;
  top: 15%;
  overflow: hidden;
  border-radius: clamp(7px, 1.1vw, 19px);
  box-shadow: 0 10px 24px #0c165b55;
  outline: 1px solid #ffffff59;
}
.dsd-journey .dsd-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsd-journey .dsd-card { will-change: transform; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }
.dsd-journey .dsd-card:nth-child(1) { left: 4%; transform: translate(calc(74% * (1 - var(--deck))), calc(-16% * (1 - var(--deck)))) rotate(calc(-13deg * var(--deck))) scale(calc(.94 + .06 * min(1, var(--deck)))); }
.dsd-journey .dsd-card:nth-child(2) { top: 3%; left: 31%; width: 38%; z-index: 1; transform: translateZ(0) scale(calc(.96 + .04 * min(1, var(--deck)))); }
.dsd-journey .dsd-card:nth-child(3) { right: 3%; transform: translate(calc(-77% * (1 - var(--deck))), calc(-16% * (1 - var(--deck)))) rotate(calc(12deg * var(--deck))) scale(calc(.94 + .06 * min(1, var(--deck)))); }
.dsd-journey .dsd-cards.is-entering .dsd-card { transition-duration: 1.1s; }
.dsd-journey .dsd-cards.is-entering .dsd-card:nth-child(1) { transition-delay: .06s; }
.dsd-journey .dsd-cards.is-entering .dsd-card:nth-child(3) { transition-delay: .12s; }
.dsd-journey .dsd-card:nth-child(2) img { object-position: 50% 36%; }
.dsd-journey .dsd-mag-copy { max-width: 450px; }
.dsd-journey .dsd-mag-copy h3 { margin: 12px 0 20px; font-size: clamp(34px, 3.5vw, 60px); line-height: 1.15; letter-spacing: -.065em; font-weight: 650; }
.dsd-journey .dsd-text-link { display: inline-flex; gap: 20px; align-items: center; padding-block: 12px; border-bottom: 1px solid currentColor; font-weight: 600; text-decoration: none; }
.dsd-journey .dsd-cities {
  margin-top: 24px;
  color: var(--mag-yellow);
  font: 650 clamp(18px, 2vw, 28px)/1.2 "Journey Pretendard", sans-serif;
  letter-spacing: .035em;
}
.dsd-journey .dsd-cities svg { vertical-align: .04em; }
.dsd-journey .dsd-text-link span { transition: transform .22s ease; }
.dsd-journey .dsd-text-link:hover span { transform: translate(2px,-2px); }
.dsd-journey .dsd-launch {
  padding-block: clamp(52px, 7vw, 112px);
  border-top: 1px solid var(--rule);
  background: #000;
}
.dsd-journey .dsd-launch .dsd-kicker i { background: var(--mag-yellow); }
.dsd-journey .dsd-launch-statement {
  display: grid;
  gap: clamp(30px, 5vw, 80px);
  margin-top: 30px;
}
.dsd-journey .dsd-launch-english {
  max-width: 8.2em;
  font-size: clamp(44px, 7vw, 112px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.05em;
}
.dsd-journey .dsd-launch-copy { max-width: 430px; }
.dsd-journey .dsd-launch-copy h2 { font-size: clamp(25px, 2.4vw, 38px); font-weight: 550; line-height: 1.45; letter-spacing: -.04em; }
.dsd-journey .dsd-launch-copy p { margin-top: 20px; color: var(--muted); line-height: 1.7; }
.dsd-journey .dsd-launch-timer { margin-top: 24px; font-size: clamp(30px, 3.5vw, 52px); font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dsd-journey .dsd-launch-timer time { font-size: 1rem; }
.dsd-journey .dsd-notice { padding-block: 32px; border-block: 1px solid var(--rule); display: grid; gap: 12px; justify-items: start; }
.dsd-journey .dsd-notice h2 { font-size: 19px; letter-spacing: -.025em; }
.dsd-journey .dsd-notice p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.dsd-journey .dsd-footer { display: grid; justify-items: start; gap: 20px; padding-block: 34px 54px; }
.dsd-journey .dsd-legal { font-size: 13px; color: var(--muted); line-height: 1.7; }
/* dotslashdash.com copy (2026-11-02): footer links to the terms and privacy policy. */
.dsd-journey .dsd-legal-links { margin-top: 10px; color: var(--ink); }
.dsd-journey .dsd-legal-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.dsd-journey .dsd-legal-links a:hover { text-decoration-color: currentColor; }
.dsd-journey .dsd-wide { display: none; }
@media (min-width: 780px) {
  .dsd-journey { --gutter: clamp(22px, 5.4vw, 98px); --phone-width: min(44.5vw, 820px); }
  /* dotslashdash.com copy (2026-11-02, user): keep the hero inside the masthead rule instead of bleeding past the gutter. */
  .dsd-journey .dsd-hero { margin-inline: 0; padding-inline: 0; }
  .dsd-journey .dsd-stage {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 0;
    padding-top: clamp(50px, 6.8vw, 130px);
  }
  .dsd-journey .dsd-phone { justify-self: start; }
  .dsd-journey .dsd-hero-copy { align-self: start; padding-top: clamp(30px, 4.5vw, 86px); }
  .dsd-journey h1 { font-size: clamp(48px, 6.4vw, 118px); }
  .dsd-journey .dsd-ig-mark { font-size: clamp(26px, 2.8vw, 46px); }
  .dsd-journey .dsd-chapter-heading .dsd-kicker { font-size: clamp(10px, .9vw, 14px); }
  .dsd-journey .dsd-chapter-heading h2 { margin-block: 13px 16px; font-size: clamp(39px, 6.4vw, 98px); }
  .dsd-journey .dsd-spread { grid-template-columns: 1.25fr .75fr; gap: clamp(36px, 6vw, 100px); }
  .dsd-journey .dsd-launch-statement { grid-template-columns: 1.5fr 1fr; align-items: end; }
  .dsd-journey .dsd-notice { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  .dsd-journey .dsd-wide { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .dsd-journey .dsd-ig-out { transition: none; }
  .dsd-journey .dsd-text-link span { transition: none; }
  .dsd-journey .dsd-cards { --deck: 1 !important; }
  .dsd-journey .dsd-card { transition: none !important; }
}
@media print {
  .dsd-journey-body, .dsd-journey, .dsd-journey .dsd-chapter, .dsd-journey .dsd-launch { background: white; color: black; color-scheme: light; }
  .dsd-journey, .dsd-journey .dsd-chapter { --ink: black; --muted: #333; --rule: #777; --mag-yellow: black; padding: 0; margin: 0; }
  .dsd-journey .dsd-phone, .dsd-journey .dsd-cards { display: none; }
  .dsd-journey .dsd-stage, .dsd-journey .dsd-spread, .dsd-journey .dsd-notice { position: static; display: block; min-height: 0; }
  .dsd-journey .dsd-chapter { display: block; padding-block: 26px; }
  .dsd-journey .dsd-mag-copy { margin: 0; }
  .dsd-journey .dsd-mast img, .dsd-journey .dsd-footer img { filter: invert(1); }
}