@charset "utf-8";

/* ==========================================================================
   CamTalk / service/live.php - 라이브, the phone.

   SCOPE. Every rule here is inside `@media only screen and (max-width:
   1000px)`, the project's own breakpoint, and nested under `.ctl-page`, a
   class only this page puts on <body> (js/camtalk-live-mobile.js). The wide
   window renders pages.service_live exactly as before; this file says
   nothing about it. service/camtalker.php and its stylesheet are not
   touched - the tokens below are COPIED from them, so the two pages read as
   one system:

     red        #e8253f            the site's own
     ink        #17171d / #43434d  headings / body copy
     warm copy  #5c4a51            copy on rose, as camtalker's cards
     blush      #fff3f6 / #fdf5f6  camtalker's two fields
     type       the site's Paperozi, 800 for headings with the tracking
                pulled in (-0.03em .. -0.035em), 1.7-1.75 leading for copy
     gutter     16px at 360 .. 20px at 430, clamped

   ONE FIELD. The page is a single light rose gradient on <main>; the
   sections have no background of their own, only soft blooms that fade to
   nothing at their edges - so there is no join between sections to see.

   THE PICTURES keep their original colours - there is no blend and no
   filter on any of them. The hero's phone is a cut-out with a real alpha
   channel (hero-cut.webp: its white ground and the grey of its shadow taken
   out as transparency, the phone and the hearts untouched), and the
   feature pictures, drawn on white, fade out at their edges with an
   opacity mask, so no white square stands on the rose.

   STABILITY. No viewport-height unit anywhere, no pinning, no snap, no
   scroll handler; every picture has width and height in the markup and is
   sized by width, so nothing moves or resizes while the page scrolls.
   ========================================================================== */

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

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

	.ctl, .ctl *, .ctl *::before, .ctl *::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. */
	.ctl-page .ct-live-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. */
	.ctl-page .ctl[hidden] { display: flex; }
	.ctl {
		flex-direction: column;
		color: var(--cl-ink);
		background: linear-gradient(to bottom,
			#fff7f9 0%,
			#ffeef3 14%,
			#fff5f7 30%,
			#ffeff4 48%,
			#fff6f8 66%,
			#ffedf2 84%,
			#fff8fa 100%);
	}
	.ctl img { display: block; max-width: 100%; }
	.ctl a { text-decoration: none; }
	.ctl ol { list-style: none; margin: 0; padding: 0; }
	/* Zero-specificity reset, so every class below still sets its margins. */
	:where(.ctl) :where(h1, h2, h3, p) { margin: 0; }
	.ctl a:focus-visible { outline: 3px solid var(--cl-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 ------------------------------------------------------------ */

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

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

	/* The pictures: sized by width, square or 9:16 from their own
	   attributes, in their own colours. */
	.ctl-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.
	   ====================================================================== */

	.ctl-page {
		--cl-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. */
		--cl-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. */
	.ctl-hero {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100svh;
		padding: var(--cl-header) 0 0;
		overflow: hidden;
		background:
			radial-gradient(80% 40% at 64% 40%, rgba(255, 170, 194, 0.34) 0%, rgba(255, 170, 194, 0) 72%),
			radial-gradient(70% 24% at 16% 30%, rgba(255, 206, 219, 0.45) 0%, rgba(255, 206, 219, 0) 72%);
	}

	/* THE PICTURE, over the whole hero, at its own 941 : 1672 - never
	   stretched - and anchored to the RIGHT edge, so the artwork's right
	   border, where two hearts are cut, is the screen's edge rather than a
	   line inside the hero. It is a cut-out - its ground is transparent -
	   so wherever its left edge falls there is nothing to see.

	   ITS HEIGHT IS SET BY WHERE THE WORDS ARE, not by a share of the hero.
	   The phone's foot is 84.1% of the way down the artwork (measured off
	   its dark pixels), and the words' top is the screen less the foot, the
	   words and their gap - so the artwork is sized to bring the phone's
	   foot about 40px below the heading's top: the phone stands over the
	   whole screen above the words, and only its last row goes under the
	   ramp. 300px is 88 (header, breadcrumb) + 85 (the launcher's foot) +
	   167 (the Korean heading and description) - 40; ENG, whose words are
	   taller, has its own number below. Never less than 360px tall. */
	.ctl .ctl-hero__art {
		position: absolute;
		top: calc(var(--cl-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;
	}
	.ctl-page.lang-en .ctl-hero__art {
		height: max(360px, calc((100vh - 345px) / 0.841));
		height: max(360px, calc((100svh - 345px) / 0.841));
	}

	.ctl-crumb {
		position: relative;
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		min-height: 30px;
		padding: 14px var(--cl-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);
	}
	.ctl-crumb b { color: var(--cl-ink); font-weight: 700; }
	.ctl-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. */
	.ctl-hero__copy {
		position: relative;
		flex: 0 0 auto;
		margin-top: auto;
		padding: 96px var(--cl-hero-gutter) calc(var(--cl-hero-foot) + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg,
			rgba(255, 238, 243, 0) 0,
			rgba(255, 238, 243, 0.14) 28px,
			rgba(255, 238, 243, 0.40) 58px,
			rgba(255, 238, 243, 0.64) 90px,
			rgba(255, 238, 243, 0.80) 124px,
			rgba(255, 238, 243, 0.88) 170px,
			rgba(255, 238, 243, 0.93) 230px,
			#ffeef3 100%);
	}

	.ctl-hero__title {
		font-size: clamp(29px, 8.7vw, 36px);
		font-weight: 800;
		line-height: 1.18;
		letter-spacing: -0.035em;
		color: var(--cl-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. */
	.ctl-hero__title em,
	.ctl-cta__title em {
		font-style: normal;
		color: var(--cl-red);
	}

	.ctl-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(--cl-ink-2);
		word-break: keep-all;
	}

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

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

	.ctl-how {
		padding: clamp(20px, 6vw, 28px) var(--cl-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%);
	}

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

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

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

	.ctl-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(--cl-ink);
		word-break: keep-all;
	}

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

	.ctl-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 --ctl-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. */
	.ctl-feature__art {
		--ctl-edge: 7%;
		--ctl-edge-b: var(--ctl-edge);
		-webkit-mask-image:
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 var(--ctl-edge), #000 calc(100% - var(--ctl-edge)), rgba(0, 0, 0, 0) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 var(--ctl-edge), #000 calc(100% - var(--ctl-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(--ctl-edge), #000 calc(100% - var(--ctl-edge)), rgba(0, 0, 0, 0) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 var(--ctl-edge), #000 calc(100% - var(--ctl-edge-b)), rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}
	/* Two pictures end ON their frame rather than inside it - the flags on
	   a light grey floor, the hands cut by the bottom edge - so their foot
	   fades over a longer run. */
	.ctl-feature__art--fade { --ctl-edge-b: 18%; }

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

	.ctl-cta {
		padding: clamp(40px, 11vw, 52px) var(--cl-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%);
	}

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

	.ctl-cta__desc {
		margin-top: 14px;
		font-size: clamp(14px, 3.9vw, 15px);
		line-height: 1.7;
		letter-spacing: -0.015em;
		color: var(--cl-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. */
	.ctl-stores {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		max-width: 420px;
		margin: clamp(24px, 6.4vw, 30px) auto 0;
	}
	.ctl-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(--cl-ink);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: -0.01em;
		box-shadow: 0 8px 18px -10px rgba(214, 38, 72, 0.30);
	}
	.ctl-store img {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}

	.ctl-avail {
		max-width: 30em;
		margin: clamp(26px, 7vw, 32px) auto 0;
	}
	.ctl-avail p {
		font-size: 12.5px;
		line-height: 1.65;
		letter-spacing: -0.01em;
		color: var(--cl-soft);
		word-break: keep-all;
	}
	.ctl-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) {
	.ctl-page .ctl-crumb { padding-top: 10px; }
	.ctl-page .ctl-hero__title { font-size: 30px; }
	.ctl-page .ctl-hero__desc { margin-top: 11px; line-height: 1.52; }
	.ctl-page .ctl-hero__copy { padding-top: 74px; }
}