@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/partner.php - 공식파트너사, the phone.

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

   THE SYSTEM (shared with the goods / popupstore phone pages)
     red      #f5123f             the accent words, icons, the button
     ink      #16161c / #4d4f5a   headings / copy
     ground   milk #fffdfc .. blush #fff4f7
     type     the site's Paperozi
     gutter   22px at 360 .. 24px at 430
     shadow   one family: a long, soft rose drop plus a 1px contact edge

   THE PICTURES keep their colours: no blend mode, no filter, no opacity.
   Each logo is shown whole (its own width, height auto, inside a plate of
   its own ground); over the hero photograph the only veil is a pale wash
   local to the words.

   STABILITY. Ordinary vertical scrolling: no pinning, no snap on the page,
   no scroll handler on the window. The one screen-high block is `svh` (the
   height WITH the address bar), so the bar sliding away resizes nothing.
   Every picture has width and height in the markup. The strip scrolls only
   sideways and owns no vertical gesture.

   STACKING. The hero and the banner card are `isolation: isolate` at
   z-index 0, so their layers stay inside them and under the fixed bar
   (.gnb is 1).
   ========================================================================== */

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

	.cpt-page {
		--pt-red: #f5123f;
		--pt-ink: #16161c;
		--pt-ink-2: #4d4f5a;
		--pt-gutter: clamp(22px, 5.6vw, 24px);
		--pt-header: 66px;                          /* .gnb's height on the phone */
		--pt-milk: #fffdfc;
	}

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

	.cpt-page .cpt[hidden] { display: block; }
	.cpt {
		color: var(--pt-ink);
		background: #fff;
		overflow: hidden;
	}
	.cpt img { display: block; max-width: none; }
	.cpt em { font-style: normal; }
	:where(.cpt) :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; }
	.cpt ul { list-style: none; }
	.cpt li { word-break: keep-all; }
	.cpt a { text-decoration: none; }
	.cpt [hidden] { display: none !important; }

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

	/* The small label of a section: red capitals on a blush pill. */
	.cpt-tag {
		display: inline-block;
		padding: 6px 11px 6px 12px;
		border-radius: 999px;
		background: #ffe9ef;
		color: var(--pt-red);
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.cpt-title {
		margin-top: 14px;
		font-size: clamp(27px, 7.7vw, 32px);        /* 30px at 390 */
		font-weight: 800;
		line-height: 1.28;
		letter-spacing: -0.035em;
		color: var(--pt-ink);
		word-break: keep-all;
	}
	.cpt-desc {
		margin-top: 12px;
		font-size: clamp(15px, 3.98vw, 16px);       /* 15.5px at 390 */
		font-weight: 400;
		line-height: 1.62;
		letter-spacing: -0.03em;
		color: var(--pt-ink-2);
		word-break: keep-all;
		text-wrap: balance;
	}

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

	/* The bar is the site's white one (the page forces it) and lies over the
	   top 66px of this block, so the block is exactly one screen and the bar
	   is counted once. 100svh is the screen WITH the browser's bars, so when
	   they slide away nothing here resizes or rescales. If the words ever
	   needed more room, the block would grow instead of clipping them. */
	.cpt-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--pt-header) + 20px) var(--pt-gutter) 0;
		overflow: hidden;
		background: #f8f9fb;                        /* the window's sky, sampled */
	}

	/* The photograph covers the screen under the bar, never stretched.
	   Cover keeps it whole across the width on a 384x693 Galaxy and crops
	   a little of the sides on taller phones, held at 70% so the man at the
	   right keeps his face. Its window is the ground of the words; the
	   heads start under them on every phone (hair at 38% of the picture).
	   Its top edge melts into the bar's white over 20px. */
	.cpt .cpt-hero__img {
		position: absolute;
		z-index: -2;
		left: 0;
		top: var(--pt-header);
		width: 100%;
		height: calc(100% - var(--pt-header));
		object-fit: cover;
		object-position: 70% 0;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 20px);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 20px);
	}

	/* A pale wash under the words only, strongest at the top left, gone
	   before the heads and before the middle of the width - it lifts the
	   window's dark mullion where the long lines cross it. No box, no edge. */
	.cpt-hero__wash {
		position: absolute;
		z-index: -1;
		left: 0;
		top: var(--pt-header);
		width: 100%;
		height: min(360px, 50svh);
		pointer-events: none;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
		background: radial-gradient(95% 92% at 0% 30%,
			rgba(250, 251, 253, 0.9) 0%,
			rgba(250, 251, 253, 0.72) 45%,
			rgba(250, 251, 253, 0.3) 72%,
			rgba(250, 251, 253, 0) 100%);
	}

	/* the photograph's foot settles into the strip's milk ground */
	.cpt-hero::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 34px;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(255, 253, 252, 0) 0%, rgba(255, 253, 252, 0.55) 60%, var(--pt-milk) 100%);
	}

	.cpt-hero__words { position: relative; }

	.cpt-crumb {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: clamp(13.5px, 3.6vw, 14.5px);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: #5a5c66;
	}
	.cpt-crumb b { font-weight: 700; color: var(--pt-ink); }
	.cpt-crumb__sep { width: 14px; height: 14px; flex: 0 0 auto; color: #8a8c96; }

	.cpt-hero__title {
		margin-top: 18px;
		font-size: clamp(48px, 13.8vw, 58px);       /* 54px at 390 */
		font-weight: 900;
		line-height: 1.1;
		letter-spacing: -0.045em;
		word-break: keep-all;
	}
	.cpt-hero__title span,
	.cpt-hero__title em { display: block; }
	.cpt-hero__title span { color: #111114; }
	.cpt-hero__title em { color: var(--pt-red); }

	.cpt-hero__desc {
		margin-top: 22px;
		font-size: clamp(16.5px, 4.5vw, 18px);      /* 17.5px at 390 */
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.035em;
		color: #26272e;
		word-break: keep-all;
	}
	.cpt-hero__title,
	.cpt-hero__desc { text-shadow: 0 0 16px rgba(250, 251, 253, 0.9), 0 0 3px rgba(250, 251, 253, 0.7); }

	/* A short screen (a Galaxy with its address bar: 693px) gives up
	   spacing first, never type size: the heads are higher there. */
	@media (max-height: 760px) {
		.cpt-hero { padding-top: calc(var(--pt-header) + 14px); }
		.cpt-hero__title { margin-top: 12px; line-height: 1.06; }
		.cpt-hero__desc { margin-top: 15px; line-height: 1.52; }
	}

	/* ======================================================================
	   2. PARTNERS - the strip
	   ====================================================================== */

	.cpt-partners {
		--pt-card-w: clamp(250px, 68vw, 280px);    /* 265px at 390 */
		--pt-card-gap: 15px;
		position: relative;
		padding-top: clamp(26px, 7.2vw, 32px);
		background: linear-gradient(180deg, var(--pt-milk) 0%, #fff8f9 55%, #fff4f6 100%);
	}
	.cpt-partners__tag { display: block; width: fit-content; margin-left: var(--pt-gutter); }

	/* An ordinary sideways scroller: the finger moves it natively, and the
	   script's slow drift is the same scroll position moving on its own -
	   one mechanism, never two. It takes no vertical gesture, so the page
	   scrolls freely over it. */
	.cpt-strip {
		margin-top: 16px;
		padding: 4px var(--pt-gutter) 30px;        /* the foot: the cards' shadow */
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline: var(--pt-gutter);
	}
	.cpt-strip::-webkit-scrollbar { display: none; }
	.cpt-strip:focus-visible { outline: 3px solid var(--pt-red); outline-offset: -3px; }

	.cpt .cpt-strip__list {
		display: flex;
		gap: var(--pt-card-gap);
		width: max-content;
	}

	/* THE CARD: a white sheet with a hairline edge and one soft rose drop.
	   Every card is as tall as the tallest (a stretched flex row). */
	.cpt-card {
		display: flex;
		flex-direction: column;
		flex: 0 0 var(--pt-card-w);
		width: var(--pt-card-w);
		padding: 9px 9px 0;
		border-radius: 20px;
		background: #fff;
		border: 1px solid rgba(150, 70, 95, 0.1);
		box-shadow: 0 16px 30px -22px rgba(130, 30, 62, 0.42), 0 1px 2px rgba(20, 20, 30, 0.05);
		user-select: none;
		-webkit-user-select: none;
	}

	/* THE LOGO PLATE: one proportion for every card, in the logo tile's own
	   ground, so the picture's edge disappears into it. The mark is whole
	   (its width is set per partner, its height follows), centred. */
	.cpt-card__plate {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1.6;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px rgba(20, 20, 30, 0.04);
	}
	.cpt .cpt-card__img {
		height: auto;
		flex: none;
		-webkit-user-drag: none;
		pointer-events: none;
	}

	.cpt-card__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;                    /* an ENG card without a second line */
		gap: 4px;
		flex: 1 0 auto;
		padding: 15px 6px 17px;
		text-align: center;
	}
	.cpt-card__name {
		font-size: clamp(18px, 4.9vw, 19.5px);     /* 19px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: var(--pt-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cpt-card__sub {
		font-size: clamp(14px, 3.72vw, 15px);      /* 14.5px at 390 */
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: #7b7d88;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* No drift (reduced motion, or every partner fits): the partners
	   themselves, which stop on a card edge when flicked. */
	.cpt-strip--still { scroll-snap-type: x mandatory; }
	.cpt-strip--still .cpt-card { scroll-snap-align: start; }

	/* ======================================================================
	   3. PARTNERSHIP - heading and four plates
	   ====================================================================== */

	.cpt-ship {
		padding: clamp(34px, 9.5vw, 42px) var(--pt-gutter) 8px;
		text-align: center;
		background: linear-gradient(180deg, #fff4f6 0, #fff 150px);
	}
	.cpt-ship .cpt-desc { max-width: 31em; margin-left: auto; margin-right: auto; }

	/* 2 x 2; the two plates of a row are one height (a third line in one
	   grows its neighbour, not the other row). */
	.cpt .cpt-plates {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 28px;
	}
	.cpt-plate {
		display: flex;
		flex-direction: column;
		align-items: stretch;                       /* the words take the plate's full width */
		padding: 22px 10px 20px;
		border-radius: 18px;
		background: linear-gradient(180deg, #fff6f8 0%, #ffeff3 100%);
		border: 1px solid rgba(245, 18, 63, 0.07);
	}
	.cpt-plate__icon {
		align-self: center;
		width: 38px;
		height: 38px;
		flex: 0 0 auto;
		fill: none;
		stroke: var(--pt-red);
		stroke-width: 1.45;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.cpt-plate__title {
		margin-top: 13px;
		font-size: clamp(17px, 4.5vw, 18px);       /* 17.5px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: var(--pt-ink);
		word-break: keep-all;
	}
	.cpt-plate__desc {
		margin-top: 7px;
		font-size: clamp(14px, 3.72vw, 15px);      /* 14.5px at 390 */
		font-weight: 500;
		line-height: 1.52;
		letter-spacing: -0.035em;
		color: #5f616b;
		word-break: keep-all;
		text-wrap: balance;
	}

	/* ======================================================================
	   4. BANNER - the handshake
	   ====================================================================== */

	.cpt-cta {
		padding: 28px var(--pt-gutter) clamp(40px, 11vw, 48px);
		background: #fff;
	}

	/* One light card: the words on its white-rose ground at the top, the
	   photograph below them, its upper part dissolving into the same
	   ground - so the card reads as one picture, not a white box over a
	   photo box. The crop keeps both hands whole; the picture is at its
	   own proportions (750:650) across the card's width, never cropped
	   again by cover. */
	.cpt-cta__card {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: 18px;
		border: 1px solid rgba(150, 70, 95, 0.09);
		background: linear-gradient(180deg, #fff 0%, #fff7f9 45%, #fdf0f3 100%);
		box-shadow: 0 18px 34px -30px rgba(130, 30, 62, 0.4);
	}
	.cpt-cta__words {
		position: relative;
		z-index: 1;
		padding: clamp(28px, 7.7vw, 32px) clamp(20px, 5.6vw, 24px) 0;
	}
	.cpt .cpt-cta__img {
		position: relative;
		z-index: 0;
		order: 1;
		width: 100%;
		height: auto;
		margin-top: -54px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.62) 26%, #000 40%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.62) 26%, #000 40%);
	}

	.cpt-cta__eyebrow {
		font-size: clamp(11.5px, 3.1vw, 12.5px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.18em;
		color: var(--pt-red);
	}
	.cpt-cta__title {
		margin-top: 12px;
		font-size: clamp(26px, 7.3vw, 30px);       /* 28.5px at 390 */
		font-weight: 800;
		line-height: 1.28;
		letter-spacing: -0.045em;
		color: var(--pt-ink);
		word-break: keep-all;
	}
	.cpt-cta__title em { color: var(--pt-red); }
	.cpt-cta__desc {
		margin-top: 12px;
		font-size: clamp(15px, 3.98vw, 16px);
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.035em;
		color: var(--pt-ink-2);
		word-break: keep-all;
	}

	.cpt-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 52px;
		margin-top: 22px;
		padding: 0 26px 0 28px;
		border-radius: 999px;
		background: linear-gradient(90deg, #ff2a55 0%, #f20a3c 100%);
		box-shadow: 0 16px 28px -14px rgba(242, 10, 60, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		font-size: clamp(16px, 4.3vw, 17px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cpt-btn span,
	.cpt-btn .cpt-btn__arrow { color: #fff; }
	.cpt-btn__arrow { width: 19px; height: 19px; flex: 0 0 auto; }
	.cpt-btn:active { transform: scale(0.98); }
	.cpt-btn:focus-visible { outline: 3px solid var(--pt-ink); outline-offset: 3px; }

	/* ---- appearance ------------------------------------------------------------
	   The start state exists only under html.cpt-anim (set by the script,
	   never with reduced motion): without the script, everything simply is
	   there. */
	html.cpt-anim .cpt [data-cpt-reveal] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: calc(var(--i, 0) * 60ms);
	}
	html.cpt-anim .cpt [data-cpt-reveal].is-in { opacity: 1; transform: none; }

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening; the English
	   copy carries fewer forced breaks and is balanced by the browser. */
	.cpt-page.lang-en .cpt-hero__title { letter-spacing: -0.035em; }
	.cpt-page.lang-en .cpt-hero__desc { letter-spacing: -0.015em; }
	.cpt-page.lang-en .cpt-title { font-size: clamp(25px, 7vw, 30px); letter-spacing: -0.03em; text-wrap: balance; }
	.cpt-page.lang-en .cpt-desc { letter-spacing: -0.01em; }
	.cpt-page.lang-en .cpt-plate__title { font-size: clamp(16px, 4.25vw, 17px); letter-spacing: -0.025em; text-wrap: balance; }
	.cpt-page.lang-en .cpt-plate__desc { letter-spacing: -0.01em; text-wrap: pretty; }
	.cpt-page.lang-en .cpt-cta__title { letter-spacing: -0.03em; }
	.cpt-page.lang-en .cpt-cta__desc { letter-spacing: -0.01em; text-wrap: balance; }
	.cpt-page.lang-en .cpt-hero__title,
	.cpt-page.lang-en .cpt-hero__desc,
	.cpt-page.lang-en .cpt-title,
	.cpt-page.lang-en .cpt-desc,
	.cpt-page.lang-en .cpt-plate__title,
	.cpt-page.lang-en .cpt-plate__desc,
	.cpt-page.lang-en .cpt-cta__title,
	.cpt-page.lang-en .cpt-cta__desc,
	.cpt-page.lang-en .cpt-card__name,
	.cpt-page.lang-en .cpt-card__sub { word-break: normal; overflow-wrap: break-word; }

	@media (prefers-reduced-motion: reduce) {
		.cpt-btn { transition: none; }
	}
}