@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/press.php - 보도자료, the phone.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint, and under `.cpr-page` (a class only this
   page puts on <body>, js/camtalk-press-mobile.js) or `.cpr`, the page's own
   <main>, which a wide window never shows. The shared bar is not restyled:
   over the dark photograph it is the site's own transparent bar with white
   type, and white once the page has scrolled (js/common.js).

   THE SYSTEM
     red      #f5123f   eyebrows, the accent words, the active filter
     ink      #16171c headings and card titles, #8d9099 dates
     greys    #f3f3f5 the search, #f2f2f4 filters, #ececef card edges
     type     the site's Paperozi
     sizes    at 390: hero gutter 23, title 44, copy 17, eyebrow 13; page
              gutter 18, search 48 tall, filters 40, list title 27, cards
              10 apart, pictures 2.8:1, titles 14.5, dates 11.5

   STABILITY. Ordinary vertical scrolling: no pinning, no scroll handler, no
   parallax, no fixed ground. The hero is `svh` - the screen WITH the
   browser's bars - so when they slide away nothing here resizes and the
   words at the foot do not move. Every card's picture has its box before
   it arrives; the list is there at once, with no entrance animation.

   STACKING. <main> is its own stacking context (isolation), so the white
   page lapping over the hero never ties with the bar (.gnb is z-index 1).
   ========================================================================== */

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

	.cpr-page {
		--pr-red: #f5123f;
		--pr-ink: #16171c;
		--pr-ink-2: #4a4c55;
		--pr-mute: #8d9099;
		--pr-line: #ececef;
		--pr-hero-gutter: clamp(20px, 5.9vw, 25px);   /* 23px at 390 */
		--pr-gutter: clamp(16px, 4.6vw, 20px);        /* 18px at 390 */
		--pr-header: 66px;                            /* .gnb's height on the phone */
		--pr-lap: 22px;                               /* the white page's rounded lap over the hero */
	}

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

	.cpr-page .cpr[hidden] { display: block; }
	.cpr {
		position: relative;
		z-index: 0;
		isolation: isolate;
		color: var(--pr-ink);
		background: #fff;
		overflow: hidden;
	}
	.cpr img { display: block; max-width: none; }
	.cpr em { font-style: normal; }
	:where(.cpr) :where(h1, h2, p, ul, li) { margin: 0; padding: 0; }
	.cpr ul { list-style: none; }
	.cpr a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
	:where(.cpr) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cpr :focus-visible {
		outline: 2px solid var(--pr-red);
		outline-offset: 2px;
	}
	.cpr-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

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

	/* The bar lies over the top 66px of this block, so bar and hero are
	   exactly one screen and the bar is counted once. If the words ever
	   need more room (a very short screen), the block grows instead of
	   clipping them. */
	.cpr-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--pr-header) + 24px) var(--pr-hero-gutter)
			calc(var(--pr-lap) + clamp(88px, 11.5svh, 104px) + env(safe-area-inset-bottom, 0px));
		overflow: hidden;
		background: #0b0907;                          /* the studio's dark at the picture's left, sampled */
		color: #fff;
	}

	/* The photograph covers the whole block, never stretched. A phone sees
	   about a quarter of its width, and that quarter is the monitor's
	   screen: the woman on it is the picture's subject, so the crop is held
	   on her (x 1190 of 1672) - 78.5% puts her on the screen's centre line
	   at every phone shape from 360x800 to 430x932. The bright stage lights
	   at the left give way. */
	.cpr .cpr-hero__img {
		position: absolute;
		z-index: -2;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 78.5% 50%;
	}
	/* A soft dark pool under the words only, rising from the foot and
	   strongest at the left - no box; the woman on the monitor and the
	   lights above stay as they are. */
	.cpr-hero__shade {
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(130% 44% at 0% 86%, rgba(5, 4, 3, 0.72) 0%, rgba(5, 4, 3, 0.42) 52%, rgba(5, 4, 3, 0) 100%),
			linear-gradient(0deg, rgba(5, 4, 3, 0.5) 0%, rgba(5, 4, 3, 0) 34%),
			linear-gradient(180deg, rgba(5, 4, 3, 0.4) 0, rgba(5, 4, 3, 0) 140px);
	}

	/* The words: one group at the foot (the column's justify-content), above
	   the white page's lap and the assistant's launcher corner. */
	.cpr-hero__words {
		position: relative;
		max-width: 22em;
	}
	.cpr-hero__eyebrow {
		font-size: clamp(12.5px, 3.35vw, 14px);       /* 13px at 390 */
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.2em;
		color: var(--pr-red);
	}
	.cpr-hero__title {
		margin-top: 8px;
		font-size: clamp(40px, 11.3vw, 48px);         /* 44px at 390 */
		font-weight: 900;
		line-height: 1.12;
		letter-spacing: -0.04em;
		color: #fff;
		word-break: keep-all;
	}
	.cpr-hero__title em { color: var(--pr-red); }
	.cpr-hero__desc {
		margin-top: 14px;
		font-size: clamp(16px, 4.35vw, 18px);         /* 17px at 390 */
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: -0.03em;
		color: #ececf0;
		word-break: keep-all;
	}
	.cpr-hero__title,
	.cpr-hero__desc { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }

	/* A short screen gives up spacing first, never type size. */
	@media (max-height: 720px) {
		.cpr-hero {
			padding-top: calc(var(--pr-header) + 16px);
			padding-bottom: calc(var(--pr-lap) + 84px + env(safe-area-inset-bottom, 0px));
		}
		.cpr-hero__title { margin-top: 6px; }
		.cpr-hero__desc { margin-top: 10px; line-height: 1.5; }
	}

	/* ======================================================================
	   2. THE WHITE PAGE - its top corners round over the photograph
	   ====================================================================== */

	.cpr-body {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--pr-lap));
		padding: clamp(20px, 5.6vw, 24px) var(--pr-gutter) clamp(44px, 12vw, 56px);
		border-radius: var(--pr-lap) var(--pr-lap) 0 0;
		background: #fff;
	}

	/* ---- the search: one wide light capsule ---------------------------------- */
	.cpr-search {
		position: relative;
		display: flex;
		align-items: center;
		height: 48px;
		border-radius: 24px;
		background: #f3f3f5;
	}
	.cpr-search__icon {
		position: absolute;
		left: 18px;
		top: 50%;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		color: #34353c;
		pointer-events: none;
	}
	.cpr .cpr-search__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0 46px 0 48px;
		border: 0;
		border-radius: 24px;
		background: transparent;
		font: inherit;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: -0.02em;
		color: var(--pr-ink);
		-webkit-appearance: none;
		appearance: none;
		outline: none;
	}
	/* iOS zooms into a field whose type is under 16px - the field keeps 16 */
	@supports (-webkit-touch-callout: none) {
		.cpr .cpr-search__input { font-size: 16px; }
	}
	.cpr .cpr-search__input::placeholder { color: #9a9ca5; opacity: 1; }
	.cpr .cpr-search__input::-webkit-search-cancel-button,
	.cpr .cpr-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
	.cpr-search:focus-within { box-shadow: 0 0 0 2px rgba(245, 18, 63, 0.35); }
	.cpr .cpr-search__clear {
		position: absolute;
		right: 6px;
		top: 50%;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin-top: -18px;
		border-radius: 50%;
		color: #b7b9c0;
	}
	.cpr .cpr-search__clear[hidden] { display: none; }
	.cpr-search__clear svg { width: 20px; height: 20px; }

	/* ---- the filters: one row, swiped sideways --------------------------------
	   The row runs to the screen's edges (the gutter is padding inside it),
	   so the next chip is always cut by the right edge - the visible hint
	   that there is more. Only the row scrolls; the page never does. */
	.cpr-filters {
		display: flex;
		gap: 8px;
		margin: 14px calc(-1 * var(--pr-gutter)) 0;
		padding: 2px var(--pr-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding: 0 var(--pr-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cpr-filters::-webkit-scrollbar { display: none; }
	.cpr .cpr-chip {
		flex: 0 0 auto;
		height: 40px;
		padding: 0 18px;
		border-radius: 20px;
		background: #f2f2f4;
		font-size: clamp(14px, 3.7vw, 15px);          /* 14.4px at 390 */
		font-weight: 600;
		line-height: 40px;
		letter-spacing: -0.02em;
		color: #2b2c33;
		white-space: nowrap;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.cpr .cpr-chip[aria-pressed="true"] {
		background: var(--pr-red);
		color: #fff;
		box-shadow: 0 6px 14px -8px rgba(245, 18, 63, 0.7);
	}

	/* ======================================================================
	   3. THE LIST'S HEADING
	   ====================================================================== */

	.cpr-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		margin-top: clamp(22px, 6.2vw, 26px);
	}
	.cpr-head__eyebrow {
		font-size: clamp(11.5px, 3.1vw, 12.5px);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.18em;
		color: var(--pr-red);
	}
	.cpr-head__title {
		margin-top: 5px;
		font-size: clamp(24px, 6.9vw, 28px);          /* 27px at 390 */
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.04em;
		color: var(--pr-ink);
		word-break: keep-all;
	}
	.cpr-head__title em { color: var(--pr-red); }
	.cpr .cpr-head__all {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 5px;
		min-height: 36px;
		padding: 0 0 2px 6px;
		font-size: clamp(13.5px, 3.6vw, 14.5px);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: #2b2c33;
		white-space: nowrap;
	}
	.cpr .cpr-head__all[hidden] { display: none; }
	.cpr-head__all svg { width: 17px; height: 17px; }

	.cpr-result {
		margin-top: 8px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.02em;
		color: var(--pr-ink-2);
		word-break: keep-all;
	}
	.cpr-result:empty { display: none; }

	/* ======================================================================
	   4. THE GRID - two columns at every phone width
	   ====================================================================== */

	/* minmax(0, 1fr): a picture that has not loaded yet can never widen a
	   column. Rows stretch, so the two cards of a row end together; a card's
	   own height is its content, so no row grows a hollow. */
	.cpr .cpr-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px clamp(8px, 2.6vw, 10px);
		margin-top: 14px;
	}
	.cpr-item { display: flex; min-width: 0; }
	.cpr .cpr-card {
		display: flex;
		flex-direction: column;
		width: 100%;
		border: 1px solid var(--pr-line);
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 8px 18px -14px rgba(20, 20, 30, 0.28);
		overflow: hidden;
		color: inherit;
		transition: transform 0.15s ease;
	}
	.cpr .cpr-card:active { transform: scale(0.985); }

	/* the picture: one shape for every card, its box there before it loads */
	.cpr-card__pic {
		position: relative;
		display: block;
		aspect-ratio: 2.8 / 1;
		background: #eeeef1;
		overflow: hidden;
	}
	.cpr .cpr-card__pic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* press pictures carry their headline at the top and the product or
		   logo in the middle: a 2.8:1 window held high keeps both */
		object-position: 50% 14%;
	}
	.cpr-card__plate {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		background: linear-gradient(135deg, #1b1416 0%, #2a1a1f 100%);
		font-size: 15px;
		font-weight: 800;
		letter-spacing: -0.02em;
		color: #fff;
	}
	.cpr-card__plate b { color: var(--pr-red); font-weight: 800; }

	.cpr-card__body {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 9px 10px 12px;
	}
	/* date (or outlet) left, the category's tag right; a tag that does not
	   fit goes to its own line instead of colliding */
	.cpr-card__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 4px 6px;
		min-height: 18px;
	}
	.cpr-card__date {
		min-width: 0;
		font-size: clamp(11px, 2.95vw, 12px);         /* 11.5px at 390 */
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.01em;
		color: var(--pr-mute);
		overflow-wrap: anywhere;
	}
	.cpr-tag {
		flex: 0 0 auto;
		padding: 2px 8px;
		border-radius: 10px;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}
	.cpr-tag--service { background: #fde7eb; color: #d6102b; }
	.cpr-tag--event   { background: #fde7ef; color: #c8155c; }
	.cpr-tag--partner { background: #e8f0fd; color: #2f6fd6; }
	.cpr-tag--award   { background: #fdf2da; color: #a8670a; }
	.cpr-tag--media   { background: #efeafd; color: #6a4fd2; }
	.cpr-tag--etc     { background: #f0f0f2; color: #5d606a; }

	/* the whole headline, however long - no clamp */
	.cpr-card__title {
		font-size: clamp(14px, 3.72vw, 15px);         /* 14.5px at 390 */
		font-weight: 700;
		line-height: 1.42;
		letter-spacing: -0.035em;
		color: var(--pr-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cpr-card__title mark {
		background: rgba(245, 18, 63, 0.14);
		color: inherit;
		border-radius: 2px;
	}

	/* ---- more / empty ------------------------------------------------------ */
	.cpr .cpr-more {
		display: block;
		width: 100%;
		height: 48px;
		margin-top: 18px;
		border: 1px solid #e3e3e7;
		border-radius: 24px;
		background: #fff;
		font-size: 14.5px;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: #2b2c33;
	}
	.cpr .cpr-more[hidden] { display: none; }

	.cpr-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 18px;
		padding: 34px 20px 30px;
		border-radius: 14px;
		background: #f7f7f9;
		text-align: center;
	}
	.cpr-empty[hidden] { display: none; }
	.cpr-empty__icon { width: 40px; height: 40px; color: #b5b7bf; }
	.cpr-empty__title {
		margin-top: 12px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.45;
		letter-spacing: -0.03em;
		color: var(--pr-ink);
		word-break: keep-all;
	}
	.cpr-empty__desc {
		margin-top: 6px;
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: -0.02em;
		color: var(--pr-ink-2);
		word-break: keep-all;
	}
	.cpr .cpr-empty__reset {
		margin-top: 16px;
		min-height: 42px;
		padding: 0 20px;
		border-radius: 21px;
		background: var(--pr-red);
		font-size: 14px;
		font-weight: 700;
		color: #fff;
	}

	/* ---- English: longer words in the same boxes -------------------------- */
	.cpr-page.lang-en .cpr-hero__title { letter-spacing: -0.035em; }
	.cpr-page.lang-en .cpr-hero__desc { letter-spacing: -0.01em; }
	.cpr-page.lang-en .cpr-head__title { letter-spacing: -0.03em; }
	.cpr-page.lang-en .cpr-card__title { letter-spacing: -0.015em; word-break: normal; }

	@media (prefers-reduced-motion: reduce) {
		.cpr .cpr-chip,
		.cpr .cpr-card { transition: none; }
		.cpr .cpr-card:active { transform: none; }
	}
}