@charset "utf-8";

/* ==========================================================================
   CamTalk / service/match.php - 영상채팅, the phone.

   SCOPE. Every rule here is inside `@media only screen and (max-width:
   1000px)`, the project's own breakpoint, and nested under `.ctv-page`, a
   class only this page puts on <body> (js/camtalk-match-mobile.js), or
   under `.ctv`, the page's own <main>, which a wide window never shows. The
   wide window renders pages.service_match exactly as before.

   THE SYSTEM, taken off the reference:
     red        #f5123f            saturated rose-red: accents, eyebrows, icons
     ink        #16161c / #555864  headings / copy
     blush      #fff5f7 .. #fdebf2 the light sections and the Global card
     night      #1b1418            the closing banner, under its picture
     type       the site's Paperozi; 800 headings, tracking pulled in to
                -0.04em; small English eyebrows at 800 with 0.26em tracking
     gutter     18px at 360 .. 23px at 430 (clamped)

   THE PICTURES keep their own colours: no blend, no filter, no opacity on
   any of them. The full-width pictures sit on a pale ground of their own,
   so their top and foot fade out with an opacity MASK (the alpha channel
   only, and only across empty wall and floor) and no rectangle shows on the
   page's field. The beauty portraits and the closing picture have none.

   STABILITY. Ordinary vertical scrolling: no pinning, no snap, no scroll
   handler. The one screen-height is the hero's `100svh` - the height WITH
   the address bar, so the bar sliding away resizes nothing. Every picture
   has width and height in the markup, so nothing moves while it loads.

   STACKING. The only z-index is the hero's own 0 (with `isolation`), which
   keeps its picture, ramp and words inside it and under the fixed site
   header (see the header note in css/common.css: `.gnb` is z-index 1).
   Everything else is ordered by the document alone.
   ========================================================================== */

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

	.ctv-page {
		--cv-gutter: clamp(18px, 5.4vw, 23px);
		--cv-red: #f5123f;
		--cv-ink: #16161c;
		--cv-ink-2: #555864;
		--cv-card-ink: #26272d;
		--cv-header: 66px;           /* .gnb's own height on the phone, measured */
	}

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

	/* Column flex: whitespace between sections in the source would
	   otherwise be an anonymous line box each. */
	.ctv-page .ctv[hidden] { display: flex; }
	.ctv {
		flex-direction: column;
		color: var(--cv-ink);
		background: #fff;
	}
	.ctv img { display: block; max-width: 100%; }
	.ctv a { text-decoration: none; }
	.ctv ul { list-style: none; margin: 0; padding: 0; }
	/* Zero-specificity reset, so every class below still sets its margins. */
	:where(.ctv) :where(h1, h2, h3, p) { margin: 0; }
	.ctv a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

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

	/* ---- shared: eyebrow, heading, line ----------------------------------- */

	.ctv-sec {
		padding-top: clamp(50px, 13.6vw, 58px);
		text-align: center;
	}
	.ctv-head { padding: 0 var(--cv-gutter); }

	/* The trailing tracking is given back with a negative right margin, so
	   the spaced-out capitals sit on the centre line. */
	.ctv-eyebrow {
		display: inline-block;
		margin-right: -0.26em;
		font-size: 10.5px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		color: var(--cv-red);
	}

	.ctv-title {
		margin-top: 12px;
		font-size: clamp(23px, 6.75vw, 27.5px);
		font-weight: 800;
		line-height: 1.34;
		letter-spacing: -0.045em;
		color: var(--cv-ink);
		word-break: keep-all;
	}

	.ctv-desc {
		margin-top: 12px;
		font-size: clamp(13.5px, 3.72vw, 15px);
		font-weight: 400;
		line-height: 1.66;
		letter-spacing: -0.03em;
		color: var(--cv-ink-2);
		word-break: keep-all;
	}

	.ctv-art { width: 100%; height: auto; }

	/* ---- shared: the white cards (hero features, safety) ------------------ */

	.ctv-cards {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(6px, 2.1vw, 10px);
		padding: 0 var(--cv-gutter);
	}
	.ctv-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: clamp(82px, 23.2vw, 96px);
		padding: 13px 3px 11px;
		border: 1px solid rgba(24, 24, 32, 0.05);
		border-radius: 15px;
		background: #fff;
		box-shadow:
			0 14px 26px -16px rgba(170, 36, 70, 0.34),
			0 2px 8px -3px rgba(20, 20, 30, 0.08);
		text-align: center;
		font-size: clamp(10.5px, 2.95vw, 12px);
		font-weight: 700;
		line-height: 1.28;
		letter-spacing: -0.04em;
		color: var(--cv-card-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.ctv-card__icon {
		flex: 0 0 auto;
		width: clamp(26px, 7.4vw, 30px);
		height: clamp(26px, 7.4vw, 30px);
		color: var(--cv-red);
	}

	/* ======================================================================
	   1. HERO - one screen with the header, the words at the foot
	   ====================================================================== */

	/* camtalk/vod.php's hero, measured on the running page: the section is
	   `100svh` (the height WITH the address bar, so the bar sliding away
	   resizes nothing) and a min-height, so a long translation grows it
	   rather than clipping; the picture fills it; the body is padded clear
	   of the fixed bar at the top and holds the words at its foot, with
	   VOD's own gutter. `isolation` keeps the layers inside this box; the
	   section itself sits at z-index 0, under the bar (.gnb is 1). */
	.ctv-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100svh;
		overflow: hidden;
		background: #fbeef1;
	}

	/* The phone is the hero's picture. 941 : 1672 is wider in proportion
	   than any phone screen, so `cover` scales it by height and takes a
	   little off each side - the face, the phone and the handwriting stay. */
	.ctv .ctv-hero__art {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 30%;
	}

	/* Two light-rose ramps, each local to its words: a short one under the
	   bar for the breadcrumb row, and one at the foot, sized in pixels to
	   the block it carries - fully light under the words, gone about 110px
	   above them, which is below the face on every phone checked. */
	.ctv-hero__shade {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(
				to bottom,
				rgba(255, 247, 249, 0.9) 0%,
				rgba(255, 247, 249, 0.78) 50%,
				rgba(255, 247, 249, 0) 100%
			) top / 100% 150px no-repeat,
			linear-gradient(
				to top,
				rgba(255, 244, 247, 0.97) 0px,
				rgba(255, 244, 247, 0.95) 70px,
				rgba(255, 244, 247, 0.88) 200px,
				rgba(255, 244, 247, 0.70) 290px,
				rgba(255, 244, 247, 0.36) 340px,
				rgba(255, 244, 247, 0.10) 380px,
				rgba(255, 244, 247, 0) 400px
			) bottom / 100% 400px no-repeat;
	}

	/* VOD's body box. The foot keeps 86px free: the assistant's launcher
	   stands in the lowest ~70px on the right and is left where it is. */
	.ctv-hero__body {
		position: relative;
		z-index: 2;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		padding: calc(var(--cv-header) + 14px) clamp(16px, 4.7vw, 20px)
			calc(86px + env(safe-area-inset-bottom, 0px));
	}

	/* The breadcrumb and the badge share one row under the bar. */
	.ctv-hero__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: auto;
		padding-bottom: 24px;
	}

	.ctv-crumb {
		display: flex;
		align-items: center;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: rgba(22, 22, 28, 0.66);
		white-space: nowrap;
	}
	.ctv-crumb b { color: var(--cv-ink); font-weight: 700; }
	.ctv-crumb span { margin: 0 6px; color: rgba(22, 22, 28, 0.36); }

	.ctv-badge {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 8px 5px 7px;
		border-radius: 6px;
		background: rgba(255, 233, 239, 0.94);
		font-size: 9.5px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.18em;
		color: var(--cv-red);
		white-space: nowrap;
	}
	.ctv-badge svg { width: 9px; height: 9px; flex: 0 0 auto; }

	/* The heading at the largest size its longest line allows on one line
	   (실시간 영상채팅), set tight as VOD's; the description as VOD's
	   second line. */
	.ctv-hero__title {
		font-size: clamp(36px, 10.6vw, 44px);
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: -0.045em;
		color: var(--cv-ink);
		word-break: keep-all;
	}
	.ctv-hero__title em {
		font-style: normal;
		color: var(--cv-red);
	}

	.ctv-hero__desc {
		margin-top: clamp(12px, 3.4vw, 16px);
		font-size: clamp(14.5px, 4.1vw, 16px);
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.03em;
		color: #3f404a;
		word-break: keep-all;
	}

	/* The four cards, their own compact row right after the hero. `.ctv ul`
	   resets a list's padding and outranks one class, hence `.ctv`. */
	.ctv-feats {
		padding-top: 14px;
		background: linear-gradient(180deg, #fff4f7 0%, #fff 100%);
	}
	.ctv .ctv-cards--hero { padding: 0 var(--cv-gutter); }
	.ctv-cards--hero .ctv-card { min-height: clamp(72px, 20vw, 82px); }

	/* ======================================================================
	   2. REAL-TIME CONNECTION
	   ====================================================================== */

	.ctv .ctv-rt__art {
		margin-top: 18px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 6%, #000 92%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 6%, #000 92%, rgba(0, 0, 0, 0) 100%);
	}

	/* ======================================================================
	   3. GLOBAL FRIENDS - a rose section, edge to edge
	   ====================================================================== */

	/* The rose ground is the section's own, across the whole screen: no
	   card, border, radius or shadow. It comes in from white over its first
	   44px and goes back to white at its foot, so neither neighbour meets it
	   on an edge. */
	.ctv-gf {
		padding: clamp(40px, 11vw, 46px) 0 clamp(18px, 5vw, 24px);
		background: linear-gradient(180deg, #fff 0, #fdedf3 44px, #fff2f6 46%, #fdecf2 86%, #fff 100%);
	}
	.ctv-gf__card { padding: 0; }
	/* the text keeps the inset it had inside the card */
	.ctv-gf__card .ctv-head { padding: 0 calc(clamp(14px, 4.2vw, 18px) + 16px); }

	/* One line at 390, as on the reference; it may wrap on a narrow phone. */
	.ctv-title--card {
		font-size: clamp(18.5px, 5.45vw, 22.5px);
		letter-spacing: -0.05em;
	}

	/* The globe is drawn on white: all four edges fade into the rose. */
	.ctv .ctv-gf__art {
		margin-top: 14px;
		-webkit-mask-image:
			linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%, #000 90%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%, #000 90%, rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}

	/* ======================================================================
	   4. SPECIAL MOMENTS - one screen under the bar
	   ====================================================================== */

	/* Eyebrow, heading, line and the phone with its gifts, spaced so the
	   whole block fits one screen under the bar at 390x844 (778px): 28 +
	   ~163 of words + 12 + the picture at the full width (576px). The
	   picture keeps its proportion and its full width - its gifts reach both
	   of its side edges, so it is never narrowed onto the field - and a
	   shorter screen or a longer translation lets the block grow. */
	.ctv-sm { padding-top: clamp(26px, 7.2vw, 30px); }
	.ctv-sm .ctv-desc { margin-top: 10px; }

	/* Its top and foot fade into the field (alpha only), within the empty
	   wall above the heart (from 2.4% down) and the floor below the phone
	   (which ends at 96.8%). */
	.ctv .ctv-sm__art {
		margin-top: 12px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 2%, #000 97.2%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 2%, #000 97.2%, rgba(0, 0, 0, 0) 100%);
	}

	/* ======================================================================
	   5. BEAUTY FILTER - three portraits, a tile and a name under each
	   ====================================================================== */

	/* One light white-to-blush field for the whole block, with two soft
	   blooms, as on the reference, back to white at its foot so the next
	   block starts without a seam. The block is sized by what is in it.
	   SPECIAL MOMENTS and SAFE ENVIRONMENT use the same field (2026-09-29),
	   edge to edge; their pictures keep their own colours, and only their
	   top and foot - empty wall and floor - fade into it. */
	.ctv-bf { padding-bottom: clamp(34px, 9.4vw, 40px); }
	.ctv-sm,
	.ctv-bf,
	.ctv-safe {
		background:
			radial-gradient(46% 16% at 8% 18%, rgba(255, 196, 214, 0.36) 0%, rgba(255, 196, 214, 0) 70%),
			radial-gradient(40% 14% at 94% 8%, rgba(255, 196, 214, 0.42) 0%, rgba(255, 196, 214, 0) 70%),
			linear-gradient(180deg, #fff 0%, #fff7f9 30%, #fdf0f4 74%, #fff 100%);
	}

	/* the short rose rule under the eyebrow */
	.ctv-eyebrow--rule::after {
		content: '';
		display: block;
		width: 30px;
		height: 2px;
		margin: 9px auto 0;
		border-radius: 2px;
		background: #f4a3b8;
		transform: translateX(-0.13em);
	}

	/* second line of the heading: rose into coral */
	.ctv-bf .ctv-title em {
		font-style: normal;
		color: #ee4a78;
		background: linear-gradient(90deg, #ec3e76 0%, #f4697f 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* `.ctv ul` resets every list's margin and padding and outranks a single
	   class, so the page's own lists name `.ctv` too. */
	.ctv .ctv-bf__row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(8px, 2.4vw, 10px);
		margin-top: 24px;
		padding: 0 clamp(12px, 3.6vw, 16px);
	}
	.ctv-bf__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}

	/* Portraits of one size, at their own 396 : 683. No filter, no mask:
	   the pictures are the source's pixels. */
	.ctv .ctv-bf__pic {
		width: 100%;
		height: auto;
		aspect-ratio: 396 / 683;
		object-fit: cover;
		border-radius: 16px;
		box-shadow:
			0 16px 26px -18px rgba(150, 40, 70, 0.45),
			0 2px 6px -2px rgba(20, 20, 30, 0.08);
	}

	/* One tile per portrait, over its foot by a little under half its size,
	   then the name. `position: relative` puts it over the picture. */
	.ctv-bf__tile {
		--tile: clamp(40px, 11.6vw, 47px);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--tile);
		height: var(--tile);
		margin-top: calc(var(--tile) * -0.42);
		border-radius: 14px;
		background: #fff;
		box-shadow:
			0 10px 18px -10px rgba(170, 36, 70, 0.42),
			0 1px 4px -1px rgba(20, 20, 30, 0.1);
	}
	.ctv-bf__tile svg { width: 45%; height: 45%; }
	.ctv-bf__tile--none { color: #62656f; }
	.ctv-bf__tile--cat,
	.ctv-bf__tile--spark {
		background: linear-gradient(180deg, #fff 0%, #ffeef3 100%);
		color: #ec3e76;
	}

	.ctv-bf__name {
		margin-top: 8px;
		font-size: clamp(12px, 3.35vw, 13.5px);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.03em;
		color: var(--cv-card-ink);
		word-break: keep-all;
	}

	/* ======================================================================
	   6. SAFE ENVIRONMENT
	   ====================================================================== */

	/* The heading may take two lines on a phone; balanced, it breaks as
	   "안전하고 편안한 / 영상채팅" rather than leaving one word alone. */
	.ctv-safe .ctv-title { text-wrap: balance; }
	.ctv-safe .ctv-title em {
		font-style: normal;
		color: var(--cv-red);
	}

	/* The guarded phone at the full width of the screen. Its top and foot
	   fade into the page in the empty wall and floor only - the phone's top
	   is 3.4% down the picture and its foot 93%. */
	.ctv .ctv-safe__art {
		margin-top: 10px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 2.5%, #000 95%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 2.5%, #000 95%, rgba(0, 0, 0, 0) 100%);
	}
	.ctv .ctv-cards--safe {
		margin-top: 6px;
		padding: 0 var(--cv-gutter);
	}

	/* ======================================================================
	   7. THE CLOSING - the matching picture, then the words and the button
	   ====================================================================== */

	.ctv-cta {
		position: relative;
		margin-top: clamp(50px, 13.6vw, 58px);
		overflow: hidden;
		background: #1b1418;
		color: #fff;
	}

	/* The picture across the banner at its own 941 : 964, uncropped: the
	   two faces are at its two edges. The only darkening is its foot, under
	   the words - clothes, below both phones (which end at 73%). */
	.ctv-cta__media { position: relative; }
	.ctv .ctv-cta__art { width: 100%; height: auto; }
	.ctv-cta__scrim {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(27, 20, 24, 0) 72%,
			rgba(27, 20, 24, 0.6) 86%,
			#1b1418 100%);
	}

	/* The words start over that foot and go on down the banner. */
	.ctv-cta__body {
		position: relative;
		margin-top: calc(clamp(62px, 17vw, 74px) * -1);
		padding: 0 calc(var(--cv-gutter) + 6px)
			calc(clamp(40px, 11vw, 48px) + env(safe-area-inset-bottom, 0px));
	}

	.ctv-cta__script {
		display: inline-block;
		font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
		font-size: clamp(24px, 7vw, 29px);
		font-weight: 600;
		line-height: 1.1;
		letter-spacing: 0;
		color: #ffbfd0;
		transform: rotate(-7deg);
		transform-origin: 0 100%;
	}

	.ctv-cta__title {
		margin-top: 22px;
		font-size: clamp(32px, 9.3vw, 38px);
		font-weight: 800;
		line-height: 1.22;
		letter-spacing: -0.05em;
		color: #fff;
		word-break: keep-all;
	}

	.ctv-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		max-width: 360px;
		min-height: 58px;
		margin: 28px auto 0;
		padding: 0 22px;
		border-radius: 999px;
		background: linear-gradient(90deg, #ff2a55 0%, #f20a3c 100%);
		box-shadow:
			0 18px 32px -16px rgba(255, 24, 72, 0.75),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
		color: #fff;
		font-size: 16.5px;
		font-weight: 700;
		letter-spacing: -0.03em;
		white-space: nowrap;
	}
	.ctv-cta__cam { width: 24px; height: 24px; flex: 0 0 auto; }
	.ctv-cta__arrow { width: 19px; height: 19px; flex: 0 0 auto; }

	/* ---- ENG ---------------------------------------------------------------
	   Latin runs wider and needs a little less of the Korean tightening. */
	.ctv-page.lang-en .ctv-hero__title { font-size: clamp(29px, 8vw, 33px); line-height: 1.12; letter-spacing: -0.035em; }
	.ctv-page.lang-en .ctv-title { letter-spacing: -0.035em; }
	.ctv-page.lang-en .ctv-title--card { font-size: clamp(19px, 5.4vw, 22px); }
	.ctv-page.lang-en .ctv-desc,
	.ctv-page.lang-en .ctv-hero__desc { letter-spacing: -0.01em; line-height: 1.58; }
	.ctv-page.lang-en .ctv-card { letter-spacing: -0.02em; font-size: clamp(10px, 2.8vw, 11.5px); }
	/* English descriptions carry no forced breaks; the browser balances them,
	   so no line ends on a single orphaned word at 360. */
	.ctv-page.lang-en .ctv-desc,
	.ctv-page.lang-en .ctv-hero__desc,
	.ctv-page.lang-en .ctv-title { text-wrap: balance; }
	.ctv-page.lang-en .ctv-cta__title { font-size: clamp(30px, 8.6vw, 36px); letter-spacing: -0.04em; }
}