@charset "utf-8";

/* ==========================================================================
   CamTalk / service/globalmatch.php - 글로벌매칭, the phone.

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

   THE TYPE. Sections: Paperozi 800 headings at 33px (1.22) with solid
   #f5123f accents and 17px black copy (1.6), on a 23px inset. The hero is
   quieter: Paperozi's own Bold cut (700, not the 800 of the sections) at
   48px at 390 (2026-09-30; 44px at 360), 1.15 leading and light tracking,
   글로벌 white and 매칭 in the sections' accent red (--cg-red); its line 400
   at 18px, 1.6, soft white; the block on the left at 24px, 114px above the
   bottom - clear of the launcher - growing upwards.

   THE SECTIONS are three full-width grounds, one after the other with no
   gap: each begins in the colour the picture above it ends in, then turns
   to its own tint, so no seam shows where they meet.

   THE HERO keeps its own clip, words and one screen with the header; the
   words are white over a soft dark ramp local to them (the clip is mostly
   black and white type), and the bar has a short light ramp of its own.

   THE THREE SURFACES are one system taken off the layered cards the brief
   points to - soft ground, a large radius, a hairline border, a low shadow
   - at the scale of a section: words at the top, then the picture at the
   surface's full width to its foot. Each surface's ground meets its
   picture in the picture's own edge colour, so there is no mask and no
   seam. No blend, filter or overlay on any picture.

   STABILITY. Ordinary vertical scrolling: no pinning, no snap, no scroll
   handler. Heights use `svh` only (the height WITH the address bar), so
   the bar sliding away changes nothing; every picture has width and
   height in the markup and is sized by width. Sections are `min-height`,
   so a longer translation grows them instead of clipping.
   ========================================================================== */

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

	.ctg-page {
		--cg-red: #f5123f;
		--cg-ink: #16161c;
		--cg-ink-2: #555864;
		--cg-header: 66px;                          /* .gnb's height on the phone */
	}

	.ctg, .ctg *, .ctg *::before, .ctg *::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. */
	.ctg-page .ct-globalmatch-desktop { display: none; }

	.ctg-page .ctg[hidden] { display: block; }
	.ctg {
		color: var(--cg-ink);
		background: #f8f7fa;
	}
	.ctg img { display: block; max-width: 100%; }
	.ctg em { font-style: normal; }
	:where(.ctg) :where(h1, h2, p) { margin: 0; }

	/* The bar is over the clip here, as on camtalk/vod.php: no hairline
	   ruled across the picture. It comes back once js/common.js turns the
	   bar white past 150px. */
	.ctg-page .gnb:not(.gnb_invert) { border-bottom-color: transparent; }

	/* ======================================================================
	   1. THE HERO
	   ====================================================================== */

	.ctg-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100svh;
		overflow: hidden;
		background: #0a0c16;
	}

	/* 9 : 16, and the hero is taller than that on every phone, so `cover`
	   scales it by height and takes a little off each side. The clip keeps
	   its words in the middle of the frame, so it is centred. */
	.ctg-hero__video {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
		pointer-events: none;
		background: #0a0c16;
	}

	/* Two ramps, each local to its words: a short one at the head for the
	   bar, and one at the foot sized in pixels to the block it carries - as
	   on Match - fully there under the words and gone about 110px above
	   them, so the middle of the frame, where the clip keeps its own words
	   and faces, stays picture. The clip cuts to white rooms, hence 0.86. */
	.ctg-hero__shade {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(
				to bottom,
				rgba(6, 8, 16, 0.56) 0%,
				rgba(6, 8, 16, 0.52) 34%,
				rgba(6, 8, 16, 0.40) 58%,
				rgba(6, 8, 16, 0.20) 80%,
				rgba(6, 8, 16, 0) 100%
			) top / 100% 25% no-repeat,
			linear-gradient(
				to top,
				rgba(6, 8, 16, 0.72) 0px,
				rgba(6, 8, 16, 0.66) 90px,
				rgba(6, 8, 16, 0.52) 230px,
				rgba(6, 8, 16, 0.32) 320px,
				rgba(6, 8, 16, 0.14) 370px,
				rgba(6, 8, 16, 0.04) 410px,
				rgba(6, 8, 16, 0) 430px
			) bottom / 100% 430px no-repeat;
	}

	/* Padded clear of the bar, on Match's gutter, the words at the foot: the
	   86px Match keeps free under them for the launcher, plus 28px. */
	.ctg-hero__body {
		position: relative;
		z-index: 2;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		padding: calc(var(--cg-header) + 14px) 24px
			calc(114px + env(safe-area-inset-bottom, 0px));
		color: #fff;
	}

	.ctg-crumb {
		margin-bottom: auto;
		padding-bottom: 24px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: rgba(255, 255, 255, 0.76);
	}
	.ctg-crumb b { color: #fff; font-weight: 700; }
	.ctg-crumb span { margin: 0 6px; color: rgba(255, 255, 255, 0.5); }

	/* Paperozi Bold (700) - its own cut, Paperlogy-7Bold - with room between
	   the letters: calmer than the sections' 800. Sized to the clip behind it
	   (2026-09-30): 44px at 360, 48px at 390, on one line in Korean. */
	.ctg-hero__title {
		font-size: clamp(40px, calc(13.333vw - 4px), 52px);
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.01em;
		color: #fff;
		word-break: keep-all;
	}
	.ctg-hero__title em { color: var(--cg-red); }   /* the same red as the sections' accents */

	/* 18px at 390. The Korean lines are set in the copy itself (three even
	   lines, globalmatch_mobile.hero_desc); `balance` evens out the English. */
	.ctg-hero__desc {
		margin-top: 19px;
		font-size: clamp(17px, 4.615vw, 19px);
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: -0.01em;
		color: rgba(255, 255, 255, 0.82);
		word-break: keep-all;
		text-wrap: balance;
	}

	/* The block stands on the hero's foot and grows upwards. On a screen too
	   short for it under the breadcrumb, the spacing gives way first - never
	   the type - and what still does not fit grows the hero (min-height). */
	@media (max-height: 560px) {
		.ctg-hero__body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
		.ctg-crumb { padding-bottom: 16px; }
		.ctg-hero__desc { margin-top: 16px; }
	}

	/* ======================================================================
	   2-4. THE THREE SURFACES
	   ====================================================================== */

	.ctg-sec { padding: 0; }

	/* Sized by what is in it - the words, then the picture straight under
	   them, at the screen's full width and its own square proportion. No
	   radius, border, shadow or side margin: the ground is the section. */
	.ctg-surface {
		display: flex;
		flex-direction: column;
	}
	.ctg-sec:last-child .ctg-surface { padding-bottom: 28px; }

	/* Centred, as Match's sections, on a 23px inset (20-24px), and the line
	   runs free across it: the copy has no forced breaks. */
	.ctg-head {
		padding: clamp(36px, 10vw, 42px) clamp(22px, 5.9vw, 24px) 0;
		text-align: center;
	}

	/* the section's number, set as Match's eyebrow */
	.ctg-num {
		display: inline-block;
		margin-right: -0.26em;
		font-size: 10.5px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.26em;
		color: var(--cg-red);
	}

	.ctg-title {
		margin-top: 12px;
		font-size: clamp(29px, 8.45vw, 34px);
		font-weight: 800;
		line-height: 1.22;
		letter-spacing: -0.045em;
		color: var(--cg-ink);
		word-break: keep-all;
	}
	/* Match's accent: the brand red, solid */
	.ctg-title em { color: var(--cg-red); }

	.ctg-desc {
		margin-top: 14px;
		font-size: clamp(15.5px, 4.36vw, 17px);
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: -0.03em;
		color: var(--cg-ink-2);
		word-break: keep-all;
		/* no forced breaks: let the browser even out the last line */
		text-wrap: pretty;
	}

	/* The whole picture, at the screen's full width, to the section's foot. */
	.ctg .ctg-art {
		width: 100%;
		height: auto;
		padding-top: 14px;
	}

	/* Each ground: its own soft glow at the head, and the picture's own edge
	   colours where they meet (measured: 01 #fefafb at the top and #fdecf0 at
	   the foot, 02 #fefefe, 03 #fcfcfe). 02 and 03 therefore open in the
	   colour the picture above them ends in and turn to their own tint over
	   the first ~110px - rose, then a cool rose, then a pale blue. The glows
	   end before the picture starts, and by then the ground is the
	   picture's own top colour, so its edge draws no line. */
	.ctg-sec--connect .ctg-surface {
		background:
			radial-gradient(85% 34% at 12% 0%, rgba(255, 184, 206, 0.46) 0%, rgba(255, 184, 206, 0) 72%),
			radial-gradient(60% 20% at 100% 10%, rgba(255, 210, 224, 0.40) 0%, rgba(255, 210, 224, 0) 70%),
			linear-gradient(180deg, #fff3f7 0%, #fefafb 34%, #fefafb 100%);
	}
	.ctg-sec--culture .ctg-surface {
		background:
			radial-gradient(80% 22% at 90% 8%, rgba(220, 212, 255, 0.46) 0%, rgba(220, 212, 255, 0) 72%),
			radial-gradient(60% 20% at 0% 14%, rgba(255, 214, 230, 0.36) 0%, rgba(255, 214, 230, 0) 70%),
			linear-gradient(180deg, #fdecf0 0, #f8f5fe 110px, #fefefe 34%, #fefefe 100%);
	}
	.ctg-sec--global .ctg-surface {
		background:
			radial-gradient(80% 22% at 12% 8%, rgba(190, 216, 255, 0.50) 0%, rgba(190, 216, 255, 0) 72%),
			radial-gradient(60% 20% at 100% 14%, rgba(228, 214, 255, 0.32) 0%, rgba(228, 214, 255, 0) 70%),
			linear-gradient(180deg, #fefefe 0, #f2f6ff 110px, #fcfcfe 34%, #fcfcfe 88%, #fff 100%);
	}

	/* ---- ENG ---------------------------------------------------------------
	   Match's own ENG rules: Latin runs wider and wants less of the Korean
	   tightening; the English copy has no forced breaks, so it is balanced. */
	/* ENG: the Korean size, on two lines that each mean something - "Global",
	   then "Matching" - rather than one line that would run past the gutter. */
	.ctg-page.lang-en .ctg-hero__title { letter-spacing: -0.015em; }
	.ctg-page.lang-en .ctg-hero__title em { display: block; }
	.ctg-page.lang-en .ctg-title { letter-spacing: -0.035em; }
	.ctg-page.lang-en .ctg-desc { letter-spacing: -0.01em; line-height: 1.56; }
	.ctg-page.lang-en .ctg-desc,
	.ctg-page.lang-en .ctg-title { text-wrap: balance; }
	.ctg-page.lang-en .ctg-hero__title,
	.ctg-page.lang-en .ctg-hero__desc,
	.ctg-page.lang-en .ctg-title,
	.ctg-page.lang-en .ctg-desc { word-break: normal; overflow-wrap: break-word; }
}