@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/global.php - 글로벌 (ViewChat), the phone.

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

   THE SYSTEM
     red      #f5123f             eyebrows, the accent word, the button
     ink      #16161c / #555864   headings / copy on light grounds
     blush    #fff5f8 .. #ffe9f0  the light grounds and the translation
     type     the site's Paperozi; 800 headings with the tracking pulled in,
              English eyebrows at 800 with wide tracking
     gutter   22px at 360 .. 24px at 430

   THE PICTURES keep their colours: no blend mode, no filter, no opacity.
   The only darkening is a ramp local to the words over a photograph.

   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 hero, the world and the eye are `isolation: isolate` at
   z-index 0, so their layers stay inside them and under the fixed bar
   (.gnb is 1). The world's heading is z-index 1 over its picture; before
   the world was its own context (2026-10-01) that 1 tied with the bar's,
   and being later in the document the heading painted over the bar.
   ========================================================================== */

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

	.cbg-page {
		--bg-red: #f5123f;
		--bg-ink: #16161c;
		--bg-ink-2: #555864;
		--bg-gutter: clamp(22px, 6vw, 24px);
		--bg-header: 66px;                          /* .gnb's height on the phone */
	}

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

	.cbg-page .cbg[hidden] { display: block; }
	.cbg {
		color: var(--bg-ink);
		background: #fff;
		overflow: hidden;                           /* the eye picture is wider than the screen */
	}
	.cbg img { display: block; max-width: none; }
	.cbg em { font-style: normal; }
	:where(.cbg) :where(h1, h2, p, ul) { margin: 0; padding: 0; }
	.cbg ul { list-style: none; }

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

	/* English eyebrows; the trailing tracking is given back with a negative
	   margin so the spaced capitals sit on the centre line. */
	.cbg-eyebrow {
		display: inline-block;
		margin-right: -0.24em;
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: var(--bg-red);
	}
	.cbg-eyebrow--light { color: #ff5a7e; }
	/* Over the hero's photograph the eyebrow is a small solid label, as on
	   the reference: red on blush, legible over the white shirt behind it. */
	.cbg-eyebrow--tag {
		margin-right: 0;
		padding: 6px 9px 6px 12px;
		border-radius: 999px;
		background: #fff0f4;
		color: var(--bg-red);
	}

	.cbg-kicker {
		font-size: clamp(16.5px, 4.6vw, 18px);
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -0.03em;
		color: #3a3b44;
		word-break: keep-all;
	}

	.cbg-title {
		margin-top: 12px;
		font-size: clamp(30px, 8.7vw, 36px);        /* 34px at 390 */
		font-weight: 800;
		line-height: 1.24;
		letter-spacing: -0.045em;
		color: var(--bg-ink);
		word-break: keep-all;
	}
	.cbg-title em { color: var(--bg-red); }
	.cbg-title--big {
		margin-top: 8px;
		font-size: clamp(36px, 10.5vw, 44px);       /* 41px at 390 */
		line-height: 1.16;
		letter-spacing: -0.05em;
	}
	.cbg-title--light { color: #fff; }

	.cbg-desc {
		margin-top: 14px;
		font-size: clamp(16.5px, 4.5vw, 18px);      /* 17.5px at 390 */
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: -0.03em;
		color: var(--bg-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}
	.cbg-desc--light { color: rgba(255, 255, 255, 0.86); }

	.cbg-head {
		padding: 0 var(--bg-gutter);
		text-align: center;
	}

	/* ---- the rise (js/camtalk-bizglobal-mobile.js) ------------------------------
	   Only blocks the script found below the screen are ever pending. */
	.cbg--rise .cbg-rise {
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.cbg--rise .cbg-rise.is-pending {
		opacity: 0;
		transform: translateY(18px);
	}

	/* ======================================================================
	   1. HERO - one screen with the bar
	   ====================================================================== */

	/* The bar is the site's white one (the page forces it). The hero is the
	   whole screen; the picture fills what is under the bar, anchored to its
	   foot. Its top is continued backdrop, so a tall phone shows more studio
	   wall above VIEWCHAT and a short one gives some of it up - the people
	   and the wordmark are never cut, and nothing is stretched. */
	.cbg-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		height: 100vh;
		height: 100svh;
		min-height: 540px;
		overflow: hidden;
		background: #7c7c7c;                        /* the backdrop at the picture's top */
	}
	.cbg .cbg-hero__img {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--bg-header);
		bottom: 0;
		width: 100%;
		height: calc(100% - var(--bg-header));
		object-fit: cover;
		object-position: 50% 100%;
	}

	/* Two ramps, each local to its words: a faint one under the bar for the
	   breadcrumb, and one at the foot, sized in pixels to the block it
	   carries and gone well below the faces. */
	.cbg-hero__shade {
		position: absolute;
		inset: var(--bg-header) 0 0 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(to bottom, rgba(20, 18, 22, 0.24) 0, rgba(20, 18, 22, 0) 64px) top / 100% 64px no-repeat,
			linear-gradient(to top,
				rgba(14, 10, 14, 0.74) 0px,
				rgba(14, 10, 14, 0.68) 90px,
				rgba(14, 10, 14, 0.54) 200px,
				rgba(14, 10, 14, 0.36) 262px,
				rgba(14, 10, 14, 0.12) 305px,
				rgba(14, 10, 14, 0) 330px) bottom / 100% 330px no-repeat;
	}

	/* The words at the foot, centred; the 86px under them stay free for the
	   assistant's launcher (it stands in the lowest ~70px on the right). */
	.cbg-hero__body {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: calc(var(--bg-header) + 14px) var(--bg-gutter)
			calc(88px + env(safe-area-inset-bottom, 0px));
		color: #fff;
	}

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

	.cbg-hero__words { text-align: center; }

	.cbg-hero__title {
		margin-top: 10px;
		font-size: clamp(30px, 8.7vw, 36px);        /* 34px at 390 */
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.045em;
		color: #fff;
		word-break: keep-all;
	}
	.cbg-hero__desc {
		margin-top: 12px;
		font-size: clamp(16px, 4.36vw, 17.5px);     /* 17px at 390 */
		font-weight: 400;
		line-height: 1.58;
		letter-spacing: -0.03em;
		color: rgba(255, 255, 255, 0.88);
		word-break: keep-all;
	}

	/* A short screen gives up spacing first, never type size. */
	/* On a short screen the picture is width-bound and has already given up
	   its backdrop above VIEWCHAT, so the wordmark reaches the breadcrumb.
	   It is lowered 16px (trimming clothes at the foot, not faces), the
	   breadcrumb rises 6px, and the words' gaps tighten to keep clear of
	   the chins below the wordmark. */
	@media (max-height: 720px) {
		.cbg .cbg-hero__img { object-position: 50% calc(100% + 16px); }
		.cbg-hero__body {
			padding-top: calc(var(--bg-header) + 8px);
			padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
		}
		.cbg-hero__title { margin-top: 7px; }
		.cbg-hero__desc { margin-top: 8px; line-height: 1.5; }
	}

	/* ======================================================================
	   2. MULTI LANGUAGE
	   ====================================================================== */

	.cbg-lang {
		position: relative;
		padding: clamp(54px, 15vw, 64px) 0 clamp(50px, 14vw, 60px);
		background:
			radial-gradient(70% 34% at 50% 58%, rgba(255, 206, 222, 0.42) 0%, rgba(255, 206, 222, 0) 72%),
			radial-gradient(50% 22% at 96% 12%, rgba(255, 220, 232, 0.5) 0%, rgba(255, 220, 232, 0) 70%),
			#fff;
	}

	.cbg-chat {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: clamp(12px, 3.6vw, 16px);
		margin-top: clamp(30px, 8.5vw, 36px);
		padding: 0 var(--bg-gutter);
	}
	.cbg .cbg-chat__avatar {
		width: clamp(82px, 23vw, 100px);
		height: clamp(82px, 23vw, 100px);
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #fff;
		box-shadow: 0 14px 26px -14px rgba(160, 40, 80, 0.45), 0 2px 8px -2px rgba(20, 20, 30, 0.12);
	}
	.cbg-chat__msgs {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-width: 0;
	}
	.cbg-chat__row {
		display: flex;
		align-items: center;
		gap: 6px;
		max-width: 100%;
	}

	.cbg-msg {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		max-width: 100%;
		padding: 11px 14px;
		border-radius: 18px 18px 18px 6px;
		font-size: clamp(14px, 3.85vw, 15.5px);
		font-weight: 500;
		line-height: 1.35;
		letter-spacing: -0.03em;
		color: #26272d;
		word-break: keep-all;
		overflow-wrap: anywhere;
		white-space: nowrap;
	}
	.cbg-msg--src {
		padding-right: 16px;
		background: #fff;
		box-shadow: 0 10px 22px -14px rgba(120, 30, 60, 0.32), 0 1px 4px -1px rgba(20, 20, 30, 0.1);
	}
	.cbg-msg--tr {
		flex: 0 1 auto;
		padding-right: 16px;
		background: #ffe9f0;
		box-shadow: 0 10px 22px -16px rgba(200, 40, 90, 0.34);
	}
	.cbg .cbg-msg__flag {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		border-radius: 50%;
	}
	/* The source language sits on the greeting's corner, as a small badge. */
	.cbg .cbg-msg__flag--corner {
		position: absolute;
		top: -7px;
		right: -7px;
		width: 20px;
		height: 20px;
		box-shadow: 0 2px 6px rgba(20, 20, 30, 0.18);
	}
	.cbg-wave {
		flex: 0 0 auto;
		width: clamp(30px, 9vw, 40px);
		height: auto;
	}

	/* The six languages, one system: the same circle, ring and shadow. */
	.cbg .cbg-flags {
		display: flex;
		justify-content: center;
		gap: clamp(10px, 3.4vw, 16px);
		margin-top: clamp(30px, 8.5vw, 36px);
		padding: 0 var(--bg-gutter);
	}
	.cbg-flags li { flex: 0 0 auto; word-break: keep-all; }
	.cbg .cbg-flags img {
		width: clamp(38px, 11.3vw, 48px);
		height: clamp(38px, 11.3vw, 48px);
		border-radius: 50%;
		box-shadow: 0 8px 16px -8px rgba(20, 20, 30, 0.32);
	}

	/* ======================================================================
	   3. THE WORLD
	   ====================================================================== */

	/* White from the language block, into the picture's own pale sky: its
	   top edge is near-white (#fdfdfd, a touch of rose at the left), so the
	   words sit on the ground and the picture tucks up under them into its
	   empty sky, stopping short of the top portrait (16% down). */
	.cbg-world {
		position: relative;
		z-index: 0;
		isolation: isolate;                         /* the heading's z-index 1 stays in here */
		padding-top: clamp(34px, 9.5vw, 42px);
		/* ends in the picture's own foot tone (#faeef5, sampled), which shows
		   through its softened bottom edge */
		background: linear-gradient(180deg, #fff 0%, #fefcfd 60%, #faeef5 100%);
	}
	.cbg .cbg-world__art {
		position: relative;
		z-index: 0;
		width: 100%;
		height: auto;
		margin-top: calc(-9.4vw);                   /* ~37px at 390 of the picture's 93px of sky */
		/* alpha only, across empty sky (the portraits begin 16% down) and
		   across the pale foot under the lowest portrait (it ends ~5% of
		   the width above the edge, so the 2.6vw here never reaches it) */
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 10%, #000 calc(100% - 2.6vw), rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 10%, #000 calc(100% - 2.6vw), rgba(0, 0, 0, 0) 100%);
	}
	.cbg-world .cbg-head { position: relative; z-index: 1; }

	/* ======================================================================
	   4. GLOBAL COMMUNITY - the eye
	   ====================================================================== */

	/* 100 : 166, so the photograph (16 : 9) covers it by height and the eye -
	   62% across it, 33% of its width - fills the screen's width with a few
	   pixels to spare. The words start at 61% of the height, below the lower
	   lashes (which end at 60%), on a ramp over the cheek only. */
	/* THE SEAM. The world ends pale rose; the photograph starts mid-grey
	   (#6a6969 across its first rows, sampled in the visible window). The
	   photograph's top edge dissolves over --bg-seam (72px at 390) into a
	   ground that runs rose -> muted rose-grey -> that grey, so the two
	   meet in one short, continuous turn. Only hair and brow lie in that
	   band; the lashes start ~32% down. It is part of the block: it scrolls
	   with the page and nothing listens to the scroll. */
	.cbg-comm {
		--bg-seam: clamp(60px, 18.5vw, 84px);
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		aspect-ratio: 100 / 166;
		overflow: hidden;
		background:
			linear-gradient(180deg, #faeef5 0%, #d6c0c9 20%, #a8979e 48%, #7d7679 76%, #6b6969 100%)
				top / 100% var(--bg-seam) no-repeat,
			#2a2a2a;
	}
	.cbg .cbg-comm__img {
		position: absolute;
		top: 0;
		left: 50%;
		height: 100%;
		width: auto;
		transform: translateX(-61.4%);
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.22) calc(var(--bg-seam) * 0.26),
			rgba(0, 0, 0, 0.66) calc(var(--bg-seam) * 0.62), #000 var(--bg-seam));
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.22) calc(var(--bg-seam) * 0.26),
			rgba(0, 0, 0, 0.66) calc(var(--bg-seam) * 0.62), #000 var(--bg-seam));
	}
	.cbg-comm__shade {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(12, 12, 14, 0) 0%,
			rgba(12, 12, 14, 0) 58%,
			rgba(12, 12, 14, 0.30) 68%,
			rgba(12, 12, 14, 0.58) 82%,
			rgba(12, 12, 14, 0.70) 100%);
	}
	.cbg-comm__body {
		position: relative;
		z-index: 2;
		padding: 0 var(--bg-gutter) clamp(40px, 11vw, 48px);
		text-align: center;
	}

	/* ======================================================================
	   5. START
	   ====================================================================== */

	.cbg-start {
		padding: clamp(54px, 15vw, 64px) var(--bg-gutter) clamp(56px, 15vw, 66px);
		text-align: center;
		background:
			radial-gradient(80% 60% at 50% 0%, rgba(255, 214, 227, 0.45) 0%, rgba(255, 214, 227, 0) 70%),
			linear-gradient(180deg, #fff6f9 0%, #fff 100%);
	}
	.cbg-start .cbg-title { margin-top: 0; }

	.cbg-start__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		max-width: 360px;
		min-height: 60px;
		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.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		color: #fff;
		font-size: clamp(16.5px, 4.5vw, 18px);
		font-weight: 700;
		letter-spacing: -0.03em;
		text-decoration: none;
		white-space: nowrap;
	}
	.cbg-start__btn span { color: #fff; }
	.cbg-start__cam { width: 24px; height: 24px; flex: 0 0 auto; color: #fff; }
	.cbg-start__arrow { width: 19px; height: 19px; flex: 0 0 auto; color: #fff; }
	.cbg-start__btn:focus-visible { outline: 3px solid #16161c; outline-offset: 3px; }

	.cbg-stores {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		max-width: 360px;
		margin: 16px auto 0;
	}
	.cbg-store {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 54px;
		padding: 0 12px;
		border-radius: 14px;
		background: #111114;
		color: #fff;
		text-decoration: none;
	}
	.cbg .cbg-store__icon { width: 22px; height: 22px; flex: 0 0 auto; }
	.cbg .cbg-store__icon { filter: invert(1); }            /* the site's black marks, on black */
	.cbg-store__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 15.5px;
		font-weight: 700;
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: #fff;
		white-space: nowrap;
	}
	.cbg-store__copy small {
		font-size: 10.5px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
		color: rgba(255, 255, 255, 0.72);
	}
	.cbg-store:focus-visible { outline: 3px solid var(--bg-red); outline-offset: 3px; }

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening; the English
	   copy carries no forced breaks and is balanced by the browser. */
	.cbg-page.lang-en .cbg-hero__title,
	.cbg-page.lang-en .cbg-title { letter-spacing: -0.03em; }
	.cbg-page.lang-en .cbg-title--big { letter-spacing: -0.035em; }
	/* The English hero line is longer: its own size keeps it to two lines
	   (the Korean is 34px at 390), so it never climbs onto the faces. */
	.cbg-page.lang-en .cbg-hero__title { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.18; }
	.cbg-page.lang-en .cbg-title:not(.cbg-title--big) { font-size: clamp(26px, 7.6vw, 31px); line-height: 1.2; }
	.cbg-page.lang-en .cbg-title--big { font-size: clamp(33px, 9.6vw, 40px); }
	.cbg-page.lang-en .cbg-hero__title,
	.cbg-page.lang-en .cbg-hero__desc,
	.cbg-page.lang-en .cbg-title,
	.cbg-page.lang-en .cbg-desc,
	.cbg-page.lang-en .cbg-kicker { text-wrap: balance; word-break: normal; overflow-wrap: break-word; }
	.cbg-page.lang-en .cbg-desc,
	.cbg-page.lang-en .cbg-hero__desc { letter-spacing: -0.01em; }

	@media (prefers-reduced-motion: reduce) {
		.cbg--rise .cbg-rise,
		.cbg--rise .cbg-rise.is-pending { transition: none; opacity: 1; transform: none; }
	}
}