@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/popupstore.php - 캠톡라운지 (Pop-up Store), the PHONE.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint, and under `.cpm-page` (a class only this
   page puts on <body>, js/camtalk-popupstore-mobile.js) or `.cpm`, the
   page's own <main>, which a wide window never shows.

   THE SYSTEM - the phone's goods page (css/camtalk-goods-mobile.css):
     red      #f5123f             the accent, the tags, the closing button
     ink      #16161c / #4d4f5a   headings / copy on light grounds
     type     the site's Paperozi; titles 28-33px, copy 16-17px
     gutter   20px at 360 .. 24px at 430

   SCREENS. The hero, the event film and the final banner are `svh` high
   (the screen WITH the browser's bars), so the bar sliding away resizes
   nothing. The pop-up store, the goods and the stories are as tall as
   their own content (about a screen); the two bands are compact rows.
   The site's bar (66px) lies over the top of every section and is
   counted once. A short screen gives up spacing, never type size.

   THE PICTURES keep their colours: no blend mode, no filter. Where words
   sit on a picture, they sit in its own empty area (the pop-up store's and
   the goods' top quarter), or on a local wash or ramp (the banner's foot).

   STACKING. Every block that layers pictures is `isolation: isolate` at
   z-index 0, so its layers stay under the bar (.gnb is 1).

   THE AI LAUNCHER stands in the lowest 80px on the right of every screen;
   words, buttons and the stories' last row end above it (--pm-launch).
   ========================================================================== */

@media only screen and (max-width: 1000px) {

	.cpm-page {
		--pm-red: #f5123f;
		--pm-ink: #16161c;
		--pm-ink-2: #4d4f5a;
		--pm-gutter: clamp(20px, 5.6vw, 24px);
		--pm-header: 66px;                          /* .gnb's height on the phone */
		--pm-launch: 92px;                          /* the launcher's 80px, and air */
		--pm-vh: 100vh;
	}
	@supports (height: 100svh) {
		.cpm-page { --pm-vh: 100svh; }
	}

	.cpm, .cpm *, .cpm *::before, .cpm *::after { box-sizing: border-box; }

	.cpm-page .cpm[hidden] { display: block; }
	.cpm {
		color: var(--pm-ink);
		background: #fff;
		overflow: hidden;
	}
	.cpm img { display: block; max-width: none; color: transparent; }
	:where(.cpm) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
	.cpm ul, .cpm ol { list-style: none; }
	.cpm li { word-break: keep-all; }
	.cpm a { text-decoration: none; }
	.cpm button { font: inherit; }

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

	/* ---- the bar over the scene ----------------------------------------------
	   At the top of the page the bar lies over the film, transparent, with
	   DARK type: every frame of this film is a bright white room. Past 150px
	   js/common.js adds `.gnb_invert` and it is the site's white bar again
	   (the page's inline timer leaves `cpm-page` alone). */
	.cpm-page:not(.ctn-open) .gnb:not(.gnb_invert) {
		background-color: transparent;
		border-bottom-color: transparent;
		color: #1b1b20;
	}
	.cpm-page .gnb:not(.gnb_invert) .logo a b { color: #e0102f; }
	.cpm-page .gnb:not(.gnb_invert) .right img { filter: invert(100%); opacity: 0.3; }

	/* ---- shared type --------------------------------------------------------- */

	.cpm-tag {
		display: inline-block;
		padding: 6px 11px 6px 12px;
		border-radius: 999px;
		background: #ffe9ef;
		color: var(--pm-red);
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
	/* on a dark picture: a light glass pill, white capitals */
	.cpm-tag--dark {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.cpm-title {
		margin-top: 14px;
		font-size: clamp(28px, 7.9vw, 33px);        /* 31px at 390 */
		font-weight: 800;
		line-height: 1.24;
		letter-spacing: -0.045em;
		color: var(--pm-ink);
		word-break: keep-all;
	}
	.cpm-desc {
		margin-top: 12px;
		font-size: clamp(16px, 4.3vw, 17px);        /* 16.8px at 390 */
		font-weight: 400;
		line-height: 1.58;
		letter-spacing: -0.03em;
		color: var(--pm-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

	.cpm-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 52px;
		margin-top: 22px;
		padding: 0 26px 0 28px;
		border-radius: 999px;
		font-size: clamp(16px, 4.3vw, 17px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cpm-btn:active { transform: scale(0.98); }
	.cpm-btn__arrow {
		width: 19px;
		height: 19px;
		flex: 0 0 auto;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.cpm-btn--red {
		background: linear-gradient(90deg, #ff2a55 0%, #f20a3c 100%);
		box-shadow: 0 16px 28px -14px rgba(242, 10, 60, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	.cpm-btn--red span, .cpm-btn--red .cpm-btn__arrow { color: #fff; }
	.cpm-btn--white {
		background: #fff;
		box-shadow: 0 14px 28px -16px rgba(20, 0, 8, 0.6);
	}
	.cpm-btn--white span, .cpm-btn--white .cpm-btn__arrow { color: #1b1b21; }
	.cpm-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--pm-ink); }

	/* on a light picture: the ink key */
	.cpm-btn--ink {
		background: #16161c;
		box-shadow: 0 14px 26px -18px rgba(20, 0, 8, 0.7);
	}
	.cpm-btn--ink span, .cpm-btn--ink .cpm-btn__arrow { color: #fff; }
	.cpm-btn--ink:focus-visible { outline-color: var(--pm-red); box-shadow: none; }

	/* words over a dark picture */
	.cpm-event .cpm-title, .cpm-cta .cpm-title { color: #fff; }
	.cpm-event .cpm-desc, .cpm-cta .cpm-desc { color: rgba(255, 255, 255, 0.88); }

	/* ======================================================================
	   0. HERO - one screen, three stops
	   ====================================================================== */

	.cpm-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		height: var(--pm-vh);
		min-height: 520px;
		overflow: hidden;
		background: #dcd9d8;                        /* the corridor's grey, while the poster comes */
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.cpm-hero__media { position: absolute; inset: 0; z-index: -2; }
	.cpm .cpm-hero__still,
	.cpm-hero__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
		opacity: 0;
		pointer-events: none;
	}
	.cpm .cpm-hero__still { transition: opacity 0.36s ease; }
	.cpm .cpm-hero__still.is-on { opacity: 1; }
	.cpm-hero__video.is-on { opacity: 1; }

	/* Washes, not boxes: a pale one under the bar for its dark type, and a
	   pale one under each stop's words - at the foot for 01 (the host's face
	   stays clear), at the top for 02 and 03. They cross-fade with the words. */
	.cpm-hero__wash {
		position: absolute;
		left: 0;
		right: 0;
		z-index: -1;
		pointer-events: none;
		transition: opacity 0.45s ease;
	}
	.cpm-hero__wash--top {
		top: 0;
		height: 140px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
	}
	.cpm-hero__wash--foot {
		bottom: 0;
		height: 58%;
		opacity: 0;
		background:
			radial-gradient(130% 70% at 0% 82%, rgba(255, 253, 253, 0.9) 0%, rgba(255, 253, 253, 0.72) 42%, rgba(255, 253, 253, 0.22) 70%, rgba(255, 253, 253, 0) 88%),
			linear-gradient(0deg, rgba(255, 253, 253, 0.55) 0%, rgba(255, 253, 253, 0.3) 40%, rgba(255, 253, 253, 0) 80%);
	}
	.cpm-hero__wash--head {
		top: 0;
		height: calc(var(--pm-header) + 330px);
		opacity: 0;
		background:
			radial-gradient(135% 72% at 0% 30%, rgba(255, 253, 253, 0.9) 0%, rgba(255, 253, 253, 0.74) 40%, rgba(255, 253, 253, 0.24) 68%, rgba(255, 253, 253, 0) 86%),
			linear-gradient(180deg, rgba(255, 253, 253, 0.5) 0%, rgba(255, 253, 253, 0.3) 45%, rgba(255, 253, 253, 0) 85%);
	}
	.cpm-hero.is-s1 .cpm-hero__wash--foot { opacity: 1; }
	.cpm-hero.is-s2 .cpm-hero__wash--head,
	.cpm-hero.is-s3 .cpm-hero__wash--head { opacity: 1; }

	/* the words of each stop */
	.cpm-steps { position: absolute; inset: 0; pointer-events: none; }
	.cpm-step {
		position: absolute;
		left: var(--pm-gutter);
		right: calc(var(--pm-gutter) + 30px);       /* clear of the step navigation */
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
	}
	.cpm-step[data-step="1"] { bottom: calc(var(--pm-launch) + env(safe-area-inset-bottom, 0px)); }
	.cpm-step[data-step="2"],
	.cpm-step[data-step="3"] { top: calc(var(--pm-header) + 22px); }
	.cpm-step.is-on {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
	}
	.cpm-step__title,
	.cpm-step__desc { text-shadow: 0 0 14px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.6); }
	.cpm-step__desc { color: #2f3039; font-weight: 500; }

	/* the step navigation: three short marks at the right edge */
	.cpm-nav {
		position: absolute;
		right: 6px;
		top: 42%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cpm-nav__dot {
		position: relative;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--pm-ink);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cpm-nav__no {
		display: block;
		font-size: 11px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.02em;
		color: rgba(22, 22, 28, 0.42);
		text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
		transition: color 0.3s ease;
	}
	.cpm-nav__dot::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 5px;
		width: 4px;
		height: 4px;
		margin-left: -2px;
		border-radius: 2px;
		background: rgba(22, 22, 28, 0.28);
		transition: width 0.3s ease, margin-left 0.3s ease, background-color 0.3s ease;
	}
	.cpm-nav__dot[aria-current="step"] .cpm-nav__no { color: var(--pm-red); }
	.cpm-nav__dot[aria-current="step"]::after { width: 16px; margin-left: -8px; background: var(--pm-red); }
	.cpm-nav__dot:focus-visible { outline: 2px solid var(--pm-red); outline-offset: -4px; border-radius: 10px; }

	/* "swipe up": a small cue at the left of the foot, clear of the launcher */
	.cpm-hint {
		position: absolute;
		left: var(--pm-gutter);
		bottom: calc(22px + env(safe-area-inset-bottom, 0px));
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: -0.01em;
		color: rgba(22, 22, 28, 0.62);
		pointer-events: none;
	}
	.cpm-hint svg {
		width: 16px;
		height: 16px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
		animation: cpm-nudge 1.8s ease-in-out infinite;
	}
	@keyframes cpm-nudge {
		0%, 100% { transform: translateY(2px); }
		50% { transform: translateY(-3px); }
	}

	/* shown only when the browser refuses to start the film by itself */
	.cpm .cpm-play[hidden] { display: none; }
	.cpm-play {
		position: absolute;
		left: 50%;
		top: 46%;
		transform: translate(-50%, -50%);
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 22px 0 18px;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.92);
		color: var(--pm-ink);
		font-size: 15px;
		font-weight: 700;
		box-shadow: 0 14px 30px -16px rgba(20, 0, 8, 0.55);
		cursor: pointer;
	}
	.cpm-play svg { width: 18px; height: 18px; fill: var(--pm-red); }
	.cpm-play:focus-visible { outline: 3px solid var(--pm-red); outline-offset: 3px; }

	/* ======================================================================
	   SECTIONS WITH A PICTURE: the pop-up store and the goods
	   ====================================================================== */

	/* Both are as tall as their own content - the words, then the picture -
	   which comes to about one screen. Each picture's empty top lies UNDER
	   the words (a negative margin of exactly that empty part, in % of the
	   width, like the picture's own height), so there is no gap between the
	   words and the photographs and no spacer anywhere. Read in passing,
	   a section starts with its own air only; a jump to it stops below the
	   bar (scroll-margin), so the bar's height is never added as padding. */
	.cpm-pop,
	.cpm-gds {
		position: relative;
		z-index: 0;
		isolation: isolate;
		scroll-margin-top: var(--pm-header);
	}
	.cpm-screen { position: relative; overflow: hidden; }
	.cpm-words { position: relative; z-index: 1; }
	.cpm-pop__words,
	.cpm-gds__words { padding: 34px var(--pm-gutter) 0; }

	/* ---- 1. the pop-up store ------------------------------------------------
	   popup-941.webp: the two photo cards start 25.7% down the file (45.7%
	   of its width) and end at 88.8%; below them is only a mirrored floor.
	   The picture is pulled up under the words by its empty top and its
	   floor is cut at 90.5% of its height (16.9% of its width), the last
	   strip fading into the ground the four points stand on. */
	.cpm-pop {
		background: linear-gradient(90deg, #fbf5f3 0%, #f5efed 40%, #f0e9e7 62%, #eee6e5 100%);
	}
	.cpm-pop__pic {
		position: relative;
		width: 100%;
		aspect-ratio: 941 / 1672;
		margin: calc(16px - 45.7%) 0 -16.9%;
	}
	.cpm .cpm-pop__img {
		width: 100%;
		height: 100%;
		-webkit-mask-image:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%, #000 88.6%, rgba(0, 0, 0, 0) 90.5%),
			linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 4%, #000 96%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%, #000 88.6%, rgba(0, 0, 0, 0) 90.5%),
			linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 4%, #000 96%, rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}
	/* the drawn red arrow (centre 91.7% / 85.6% of the picture) is the
	   button: invisible, 48px of touch at least */
	.cpm-pop__next {
		position: absolute;
		left: 91.7%;
		top: 85.6%;
		width: max(48px, 13%);
		aspect-ratio: 1;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		transform: translate(-50%, -50%);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cpm-pop__next:active { background: rgba(255, 255, 255, 0.14); }
	.cpm-pop__next:focus-visible { outline: 3px solid var(--pm-ink); outline-offset: 3px; }

	/* ---- the four points --------------------------------------------------
	   A compact sideways row of equal cards: one whole card and a good part
	   of the next at 390. Milk-white with a faint rose edge, a red line
	   icon, no shadow to speak of, no plate inside the card. Equal height
	   comes from the row (stretch), never from cutting the copy. */
	.cpm-feats-row {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--pm-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cpm-feats-row::-webkit-scrollbar { display: none; }
	.cpm .cpm-feats {
		display: flex;
		align-items: stretch;
		gap: 12px;
		width: max-content;
		padding: 4px var(--pm-gutter) 28px;
	}
	.cpm-feat {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		width: clamp(256px, 70vw, 290px);              /* 273px at 390 */
		padding: 18px 19px 19px;
		border: 1px solid rgba(245, 18, 63, 0.11);
		border-radius: 18px;
		background: linear-gradient(160deg, #fffdfc 0%, #fffafa 58%, #fff3f5 100%);
		box-shadow: 0 1px 2px rgba(120, 30, 50, 0.04);
		scroll-snap-align: start;
	}
	.cpm-feat__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.cpm-feat__icon {
		width: 28px;
		height: 28px;
		flex: 0 0 auto;
		fill: none;
		stroke: var(--pm-red);
		stroke-width: 1.6;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.cpm-feat__head strong {
		font-size: clamp(16.5px, 4.4vw, 18px);       /* 17.2px at 390 */
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: var(--pm-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cpm-feat__desc {
		margin-top: 6px;
		font-size: clamp(14px, 3.75vw, 15px);         /* 14.6px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.03em;
		color: #5e606b;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* ======================================================================
	   2. EVENT & EXPERIENCE - the film, one full screen
	   ====================================================================== */

	.cpm-event {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: var(--pm-vh);
		min-height: 560px;
		overflow: hidden;
		background: #170d12;
	}
	.cpm-event__media { position: absolute; inset: 0; z-index: -2; }
	.cpm-event__video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	/* dark only under the words (the foot) and a breath under the bar */
	.cpm-event__shade {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			linear-gradient(0deg, rgba(12, 6, 10, 0.88) 0%, rgba(12, 6, 10, 0.72) 26%, rgba(12, 6, 10, 0.3) 48%, rgba(12, 6, 10, 0) 64%),
			linear-gradient(180deg, rgba(12, 6, 10, 0.34) 0%, rgba(12, 6, 10, 0) 150px);
	}
	.cpm-event__words { padding: 0 var(--pm-gutter) calc(var(--pm-launch) + env(safe-area-inset-bottom, 0px)); }
	.cpm-event .cpm-title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }

	/* ======================================================================
	   3. CAMTALK GOODS - the picture, then the seven goods
	   ====================================================================== */

	/* goods-mag-941.webp (KakaoTalk_20261002_191638190): magazines on a
	   white ground, nothing in its top 15.5% (27.5% of its width). The
	   section's ground is that white; the words sit on it in ink and the
	   picture is pulled up under them by its empty top. A thin white wash
	   at the words' foot covers the first, faint magazine shadow. */
	.cpm-gds { background: #fdfdfd; }
	/* its last rows fade out: the lowest magazine's shadow is cut by the
	   file's own edge and would draw a line on the band below */
	.cpm .cpm-gds__img {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 941 / 1672;
		margin-top: calc(10px - 27.5%);
		-webkit-mask-image: linear-gradient(180deg, #000 96.5%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, #000 96.5%, rgba(0, 0, 0, 0) 100%);
	}
	.cpm-gds__words::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: -18px;
		height: 36px;
		background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 0.85) 50%, rgba(253, 253, 253, 0) 100%);
		pointer-events: none;
	}

	/* ---- the shelf -------------------------------------------------------------
	   One light band continuing the picture's white: the product photo is
	   the card, rounded, with a hairline instead of a shadow, its name under
	   it. It drifts right to left (js); a finger takes it over at once. No
	   snapping while it drifts - snapping would pull the drift back to a
	   card; the reduced-motion list snaps (.cpm-shelf--still). */
	.cpm-shelf-wrap {
		background: linear-gradient(180deg, #fdfdfd 0%, #f7f5f4 46px, #f5f3f2 100%);
	}
	.cpm-shelf {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cpm-shelf::-webkit-scrollbar { display: none; }
	.cpm-shelf--still {
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--pm-gutter);
	}
	.cpm-shelf--still .cpm-item { scroll-snap-align: start; }
	.cpm .cpm-shelf__list {
		display: flex;
		gap: 12px;
		width: max-content;
		padding: 14px var(--pm-gutter) 30px;
		will-change: transform;
	}
	.cpm-item {
		flex: 0 0 auto;
		width: clamp(244px, 68vw, 280px);            /* 265px at 390 */
	}
	.cpm-item__link {
		display: block;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}
	.cpm .cpm-item__img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 0 0 1px rgba(30, 20, 24, 0.05);
		-webkit-user-drag: none;
	}
	.cpm-item__name {
		display: block;
		margin-top: 10px;
		padding: 0 2px;
		font-size: clamp(15px, 4vw, 16px);
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: -0.03em;
		color: var(--pm-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cpm-item__link:focus-visible { outline: 3px solid var(--pm-red); outline-offset: 3px; border-radius: 18px; }

	/* ======================================================================
	   4. THE THREE STORIES - as tall as its rows
	   ====================================================================== */

	.cpm-st {
		padding: 40px var(--pm-gutter) 32px;
		scroll-margin-top: var(--pm-header);
		background: #f6f4f3;
	}
	.cpm-st__head { text-align: center; }
	.cpm-st__title { margin-top: 10px; }
	.cpm .cpm-st__list {
		display: grid;
		gap: 10px;
		margin-top: 20px;
	}
	.cpm-st__row {
		display: grid;
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		gap: 10px;
		min-height: clamp(146px, 41vw, 176px);       /* 160px at 390 */
	}
	/* the photo moves to the right: so do its column widths. minmax(0, ..):
	   an unloaded photo's 1040px must not widen its column */
	.cpm-st__row--flip { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
	.cpm-st__row--flip .cpm-st__img { order: 2; }
	/* English runs longer: the photo gives up some width, so each line of
	   a card stays whole */
	.lang-en .cpm-st__row { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); }
	.lang-en .cpm-st__row--flip { grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr); }
	.cpm .cpm-st__img {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		border-radius: 14px;
		background: #e7e3e2;
	}
	.cpm .cpm-st__img--1 { object-position: 46% 50%; }
	.cpm .cpm-st__img--2 { object-position: 74% 50%; }
	.cpm .cpm-st__img--3 { object-position: 50% 50%; }
	.cpm-st__card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		padding: 12px 14px;
		border-radius: 14px;
		background: #ebe8e7;
	}
	.cpm-st__no {
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.06em;
		color: var(--pm-red);
	}
	.cpm-st__name {
		margin-top: 7px;
		font-size: clamp(16px, 4.4vw, 18px);
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: var(--pm-ink);
		word-break: keep-all;
	}
	.cpm-st__desc {
		margin-top: 5px;
		font-size: clamp(13.5px, 3.6vw, 14.5px);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.03em;
		color: #5d5f69;
		word-break: keep-all;
	}

	/* ======================================================================
	   5. FINAL BANNER - one photograph, the words on it
	   ====================================================================== */

	/* cta-photo-*.webp is the right 57% of KakaoTalk_20261002_185334572 at
	   its full height: the dark mirrored ceiling, the CAMTALK LOUNGE sign
	   and the lounge, the goods counter. It covers the whole screen; the
	   words lie at its foot (the column's free space is above them), over
	   a dark ramp that rises from the bottom edge and is gone below the
	   faces. The ceiling, the sign and the people are not shaded. The
	   foot's padding keeps the button above the AI launcher (the lowest
	   80px on the right) with air to spare. */
	.cpm-cta {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: var(--pm-vh);
		min-height: 560px;
		padding: calc(var(--pm-header) + 24px) var(--pm-gutter)
			calc(var(--pm-launch) + 18px + env(safe-area-inset-bottom, 0px));
		overflow: hidden;
		background: #1f0a0d;
	}
	.cpm .cpm-cta__img {
		position: absolute;
		z-index: -2;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 30% 0%;                    /* the sign keeps clear of the button */
	}
	.cpm-cta__shade {
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(130% 40% at 0% 82%, rgba(16, 4, 7, 0.42) 0%, rgba(16, 4, 7, 0.2) 50%, rgba(16, 4, 7, 0) 100%),
			linear-gradient(0deg,
				rgba(16, 4, 7, 0.86) 0%,
				rgba(16, 4, 7, 0.78) 18%,
				rgba(16, 4, 7, 0.56) 30%,
				rgba(16, 4, 7, 0.26) 40%,
				rgba(16, 4, 7, 0.08) 46%,
				rgba(16, 4, 7, 0) 50%);
	}
	.cpm-cta .cpm-title { margin-top: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
	.cpm-cta .cpm-desc { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
	.cpm-cta .cpm-btn { margin-top: 20px; }

	/* ======================================================================
	   SHORT SCREENS give up spacing first, never type size
	   ====================================================================== */
	@media (max-height: 760px) {
		.cpm-page { --pm-launch: 84px; }
		.cpm-title { margin-top: 10px; }
		.cpm-desc { margin-top: 8px; line-height: 1.5; }
		.cpm-btn { margin-top: 16px; min-height: 48px; }
		.cpm-step[data-step="2"],
		.cpm-step[data-step="3"] { top: calc(var(--pm-header) + 14px); }
		.cpm-pop__words,
		.cpm-gds__words { padding-top: 26px; }
		.cpm-st { padding-top: 30px; }
		.cpm .cpm-st__list { margin-top: 14px; gap: 8px; }
		.cpm-st__row { gap: 8px; }
		.cpm-st__card { padding: 10px 12px; }
		.cpm-st__name { margin-top: 5px; }
		.cpm-st__desc { margin-top: 3px; line-height: 1.45; }
		.cpm-cta { padding-top: calc(var(--pm-header) + 16px); padding-bottom: calc(var(--pm-launch) + 14px + env(safe-area-inset-bottom, 0px)); }
	}

	@media (prefers-reduced-motion: reduce) {
		.cpm .cpm-hero__still,
		.cpm-hero__wash,
		.cpm-step,
		.cpm-step.is-on,
		.cpm-nav__no,
		.cpm-nav__dot::after { transition: none; }
		.cpm-hint svg { animation: none; }
	}

	/* ======================================================================
	   COMING SOON - one thin ribbon across the middle of the screen
	   ====================================================================== */

	/* Fixed at the vertical centre of the viewport, full width, over the
	   page's layers (z 99: above the bar, which is 1, and everything in the
	   page; under the open menu, .momenu is 100). It takes no touch at all,
	   so a swipe that starts on it moves the page or the hero underneath.
	   The run is one transform per frame on the compositor: the track holds
	   whole copies of one unit and moves left by exactly one unit, then
	   starts over - the same picture, so there is no seam. The script sets
	   the unit's width (--soon-unit) and the time for it (--soon-time) from
	   one speed in CSS px per second, so the speed is the same on every
	   width. */
	.cpm-page .cpm-soon[hidden],
	.cpm-page .cpm-soon {
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 99;
		display: block;
		height: clamp(30px, 8.2vw, 34px);           /* 32px at 390 */
		margin-top: calc(clamp(30px, 8.2vw, 34px) / -2);
		overflow: hidden;
		background: var(--pm-red);
		box-shadow: 0 6px 16px -10px rgba(120, 0, 24, .6);
		pointer-events: none;
		-webkit-user-select: none;
		user-select: none;
		contain: layout paint;
	}
	.cpm-soon * { pointer-events: none; }
	.cpm-soon__sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cpm-soon__track {
		display: flex;
		width: max-content;
		height: 100%;
		will-change: transform;
		animation: cpm-soon-run var(--soon-time, 10s) linear infinite;
		animation-play-state: var(--soon-play, running);
	}
	.cpm-soon__unit {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		height: 100%;
		font-size: clamp(12px, 3.35vw, 13.5px);     /* 13px at 390 */
		font-weight: 800;
		line-height: 1;
		letter-spacing: .08em;
		color: #fff;
		white-space: nowrap;
	}
	.cpm-soon__unit span { padding: 0 14px; }
	/* the mark between the repeats: a small white diamond */
	.cpm-soon__unit i {
		flex: 0 0 auto;
		width: 5px;
		height: 5px;
		background: rgba(255, 255, 255, .85);
		transform: rotate(45deg);
	}
	@keyframes cpm-soon-run {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(calc(-1 * var(--soon-unit, 0px)), 0, 0); }
	}
	/* reduced motion: the ribbon stays, its words stand still */
	@media (prefers-reduced-motion: reduce) {
		.cpm-soon__track { animation: none; }
	}
}