@charset "utf-8";

/* ==========================================================================
   CamTalk / service/story.php - 스토리, the phone.

   The same system as service/live.php (css/camtalk-live-mobile.css), which
   this file was written from and which it does not touch: the same tokens,
   the same type and rhythm, the same three sections, the same foot for the
   assistant's launcher. What is this page's own:

     * the hero picture is a finished composition WITH its own white-rose
       ground - the phone large on the right, running off the right edge - so
       it is not blended: it covers the hero at its own proportion, anchored
       top-right, and is the hero's ground;
     * the page field continues that ground - whiter than live's, with the
       same soft rose transitions;
     * the tag picture runs to both edges of its frame, so its sides fade;
     * no picture is blended or filtered: the feature pictures keep their
       own colours and lose only their white frame, to an opacity mask.

   SCOPE. Every rule is inside the 1000px breakpoint and nested under
   `.cts-page`, a class only this page puts on <body>
   (js/camtalk-story-mobile.js). The wide window renders pages.service_story
   exactly as before.
   ========================================================================== */

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

	.cts-page {
		--cs-gutter: clamp(16px, 4.7vw, 20px);
		--cs-red: #e8253f;
		--cs-ink: #17171d;
		--cs-ink-2: #43434d;
		--cs-warm: #5c4a51;
		--cs-soft: #8a6570;
		--cs-header: 66px;           /* .gnb's own height on the phone, measured */
	}

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

	/* The wide window's block: never filled on a phone (see the script),
	   and hidden here so its empty box takes no room. */
	.cts-page .ct-story-desktop { display: none; }

	/* Column flex, as camtalker's: whitespace between sections in the
	   source would otherwise be an anonymous 8px line box each. No
	   `overflow-x` here - on a touch screen that made camtalker's <main> a
	   scroller that latched the finger. */
	.cts-page .cts[hidden] { display: flex; }
	.cts {
		flex-direction: column;
		color: var(--cs-ink);
		/* the hero picture's own ground, carried on down the page */
		background: linear-gradient(to bottom,
			#fdf2f5 0%,
			#fff7f9 16%,
			#fdf0f3 32%,
			#fff8fa 50%,
			#fdf1f4 68%,
			#fff5f7 84%,
			#fff9fa 100%);
	}
	.cts img { display: block; max-width: 100%; }
	.cts a { text-decoration: none; }
	.cts ol { list-style: none; margin: 0; padding: 0; }
	/* Zero-specificity reset, so every class below still sets its margins. */
	:where(.cts) :where(h1, h2, h3, p) { margin: 0; }
	.cts a:focus-visible { outline: 3px solid var(--cs-red); outline-offset: 3px; }

	/* No stacking context on the sections - no `position` + `z-index`, no
	   `isolation` - and none is needed: nothing inside a section is
	   positioned, so there is no child that could paint over the site
	   header on the way past. */

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

	.cts-eyebrow {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.16em;
		color: var(--cs-red);
	}

	.cts-title {
		margin-top: 10px;
		font-size: clamp(27px, 7.6vw, 32px);
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.03em;
		color: var(--cs-ink);
		word-break: keep-all;
	}

	/* The pictures: sized by width, square or 9:16 from their own
	   attributes, blended into the field. */
	.cts-art {
		width: 100%;
		height: auto;
	}

	/* ======================================================================
	   1. THE HERO - camtalk/intro.php's principle

	   The picture is the hero and the words stand on it at the foot of the
	   first screen; the breadcrumb is at its head. The type is intro's:
	   22-24px gutter, heading 29-36px / 1.18 / -0.035em / 800, description
	   15px under it at 13.5-15px / 1.62 / -0.03em / 400, and intro's ENG and
	   short-screen settings. What differs is the ground: dark ink on the
	   page's rose, so the soft ramp under the words is rose, not black.
	   ====================================================================== */

	.cts-page {
		--cs-hero-gutter: clamp(22px, 5.8vw, 24px);
		/* The assistant's launcher is fixed in the bottom-right corner: 14px
		   off the edge, 55px tall on this page. The words end 16px above
		   it, so the description never runs under the pill. */
		--cs-hero-foot: calc(14px + 55px + 16px);
	}

	/* Header + hero = the first screen: the header is `position: absolute`
	   over the top of the page, so the hero starts at 0, is 100svh tall and
	   pads itself clear of the bar. `min-height`, so a short screen or a
	   long translation grows it rather than hiding any of the words.
	   `position: relative` without a z-index, and no `isolation`: the
	   picture has to blend with the page's field, which a stacking context
	   here would cut it off from. `overflow: hidden` keeps the picture's
	   blank margin, which runs past the left edge, off the page. */
	.cts-hero {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100svh;
		padding: var(--cs-header) 0 0;
		overflow: hidden;
		background: #fdf2f5;
	}

	/* THE PICTURE, placed exactly as live.php's (2026-10-13): at its own
	   941 : 1672 - never stretched - anchored to the RIGHT edge, 22px under
	   the bar. It is a cut-out of the original artwork (its white ground
	   keyed to transparent, the phone's soft shadow kept), so it stands on
	   the hero's rose and wherever its left edge falls there is nothing to
	   see. Its height is set by where the words are, with live's numbers:
	   the two artworks share one layout (phone centred, foot at 85-88% of
	   the height), so the same rule gives the same picture-to-words
	   relation. ENG, whose words are taller, has its own number below. */
	.cts .cts-hero__art {
		position: absolute;
		top: calc(var(--cs-header) + 22px);
		right: 0;
		width: auto;
		height: max(360px, calc((100vh - 300px) / 0.841));
		height: max(360px, calc((100svh - 300px) / 0.841));
		max-width: none;
	}
	.cts-page.lang-en .cts-hero__art {
		height: max(360px, calc((100vh - 345px) / 0.841));
		height: max(360px, calc((100svh - 345px) / 0.841));
	}

	.cts-crumb {
		position: relative;
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		min-height: 30px;
		padding: 14px var(--cs-hero-gutter) 0;
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.01em;
		color: rgba(23, 23, 29, 0.66);
	}
	.cts-crumb b { color: var(--cs-ink); font-weight: 700; }
	.cts-crumb span { margin: 0 6px; color: rgba(23, 23, 29, 0.34); }

	/* THE WORDS, at the foot, on a ramp that belongs to them - as intro's
	   foot gradient belongs to its copy. It starts 96px above the heading
	   (the block's own top padding), is quoted in pixels from that edge so
	   it lands the same in both languages, and it is never opaque over the
	   phone: at the heading it is 80% rose, so the phone is still there
	   behind the type; it closes to the page's own rose only at the hero's
	   foot, which is where the next section's field begins. */
	.cts-hero__copy {
		position: relative;
		flex: 0 0 auto;
		margin-top: auto;
		padding: 96px var(--cs-hero-gutter) calc(var(--cs-hero-foot) + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg,
			rgba(255, 246, 248, 0) 0,
			rgba(255, 246, 248, 0.14) 28px,
			rgba(255, 246, 248, 0.40) 58px,
			rgba(255, 246, 248, 0.64) 90px,
			rgba(255, 246, 248, 0.80) 124px,
			rgba(255, 246, 248, 0.88) 170px,
			rgba(255, 246, 248, 0.93) 230px,
			#fdf2f5 100%);
	}

	.cts-hero__title {
		font-size: clamp(29px, 8.7vw, 36px);
		font-weight: 800;
		line-height: 1.18;
		letter-spacing: -0.035em;
		color: var(--cs-ink);
		word-break: keep-all;
	}
	/* The one accent in the heading - the thing the page is about. It is
	   `<em>` in the string so it travels with the translation. */
	.cts-hero__title em,
	.cts-cta__title em {
		font-style: normal;
		color: var(--cs-red);
	}

	.cts-hero__desc {
		margin-top: 15px;
		font-size: clamp(13.5px, 3.8vw, 15px);
		font-weight: 400;
		line-height: 1.62;
		letter-spacing: -0.03em;
		color: var(--cs-ink-2);
		word-break: keep-all;
	}

	/* ENG, as intro sets it. */
	.cts-page.lang-en .cts-hero__title { font-size: clamp(29px, 8vw, 36px); letter-spacing: -0.045em; }
	.cts-page.lang-en .cts-hero__desc { font-size: 14px; line-height: 1.55; letter-spacing: -0.015em; }

	/* ======================================================================
	   2. HOW TO ENJOY LIVE
	   ====================================================================== */

	.cts-how {
		padding: clamp(20px, 6vw, 28px) var(--cs-gutter) clamp(20px, 6vw, 28px);
		text-align: center;
		background:
			radial-gradient(90% 16% at 50% 30%, rgba(255, 190, 207, 0.32) 0%, rgba(255, 190, 207, 0) 72%),
			radial-gradient(90% 16% at 50% 76%, rgba(255, 190, 207, 0.30) 0%, rgba(255, 190, 207, 0) 72%);
	}

	.cts-head { margin-bottom: clamp(30px, 8vw, 38px); }

	.cts-features {
		display: grid;
		gap: clamp(46px, 12.5vw, 58px);
	}

	.cts-feature__num {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.12em;
		color: var(--cs-red);
	}
	/* a short red rule either side of the number */
	.cts-feature__num::before,
	.cts-feature__num::after {
		content: "";
		width: 14px;
		height: 2px;
		border-radius: 1px;
		background: rgba(232, 37, 63, 0.38);
	}

	.cts-feature__title {
		margin-top: 10px;
		font-size: clamp(23px, 6.4vw, 26px);
		font-weight: 800;
		line-height: 1.36;
		letter-spacing: -0.035em;
		color: var(--cs-ink);
		word-break: keep-all;
	}

	.cts-feature__desc {
		margin-top: 12px;
		font-size: clamp(14px, 3.9vw, 15px);
		line-height: 1.7;
		letter-spacing: -0.015em;
		color: var(--cs-warm);
		word-break: keep-all;
	}

	.cts-feature__art {
		max-width: 440px;
		margin: clamp(10px, 3vw, 16px) auto 0;
	}
	/* THE EDGES. The pictures keep their own colours - no blend, no filter
	   of any kind - and each is drawn on white, so its frame would be a
	   white square on the rose. A mask of opacity only takes the square
	   away: the outer --cts-edge of the frame fades to nothing on all four
	   sides, which is blank margin in every picture, so the white ground
	   melts into the field while every pixel of the subject stays exactly
	   what it is. */
	.cts-feature__art {
		--cts-edge: 7%;
		--cts-edge-b: var(--cts-edge);
		-webkit-mask-image:
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 var(--cts-edge), #000 calc(100% - var(--cts-edge)), rgba(0, 0, 0, 0) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 var(--cts-edge), #000 calc(100% - var(--cts-edge-b)), rgba(0, 0, 0, 0) 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 var(--cts-edge), #000 calc(100% - var(--cts-edge)), rgba(0, 0, 0, 0) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 var(--cts-edge), #000 calc(100% - var(--cts-edge-b)), rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}
	/* The tag picture runs to both edges of its frame - the hashtags are cut
	   by it - so its sides fade over a longer run. */
	.cts-feature__art--sides { --cts-edge: 11%; }

	/* ======================================================================
	   3. THE CLOSING
	   ====================================================================== */

	.cts-cta {
		padding: clamp(40px, 11vw, 52px) var(--cs-gutter)
			calc(clamp(52px, 14vw, 64px) + env(safe-area-inset-bottom));
		text-align: center;
		background:
			radial-gradient(100% 60% at 50% 34%, rgba(255, 168, 192, 0.42) 0%, rgba(255, 168, 192, 0) 74%),
			linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, #fff 100%);
	}

	.cts-cta__title {
		font-size: clamp(27px, 7.6vw, 32px);
		font-weight: 800;
		line-height: 1.34;
		letter-spacing: -0.035em;
		color: var(--cs-ink);
		word-break: keep-all;
	}

	.cts-cta__desc {
		margin-top: 14px;
		font-size: clamp(14px, 3.9vw, 15px);
		line-height: 1.7;
		letter-spacing: -0.015em;
		color: var(--cs-warm);
		word-break: keep-all;
	}

	/* Two a row, and the third on a row of its own at the full measure -
	   every button a full thumb wide at 360. */
	.cts-stores {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		max-width: 420px;
		margin: clamp(24px, 6.4vw, 30px) auto 0;
	}
	.cts-store {
		flex: 1 1 140px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		padding: 0 18px;
		border-radius: 999px;
		border: 1px solid rgba(232, 37, 63, 0.16);
		background: #fff;
		color: var(--cs-ink);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: -0.01em;
		box-shadow: 0 8px 18px -10px rgba(214, 38, 72, 0.30);
	}
	.cts-store img {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}

	.cts-avail {
		max-width: 30em;
		margin: clamp(26px, 7vw, 32px) auto 0;
	}
	/* `balance` evens the lines out, so the fine print - kept word for word -
	   does not end on a single word at any width. */
	.cts-avail p {
		text-wrap: balance;
		font-size: 12.5px;
		line-height: 1.65;
		letter-spacing: -0.01em;
		color: var(--cs-soft);
		word-break: keep-all;
	}
	.cts-avail p + p { margin-top: 6px; }
}

/* A short screen keeps the same composition and only tightens it -
   intro's own numbers for `max-height: 700px`: the breadcrumb 10px under the
   bar, the heading at 30px, the description 11px under it at 1.52, and a
   shorter run-in to the ramp. The foot is still the launcher's. */
@media only screen and (max-width: 1000px) and (max-height: 700px) {
	.cts-page .cts-crumb { padding-top: 10px; }
	.cts-page .cts-hero__title { font-size: 30px; }
	.cts-page .cts-hero__desc { margin-top: 11px; line-height: 1.52; }
	.cts-page .cts-hero__copy { padding-top: 74px; }
}