@charset "utf-8";

/* ==========================================================================
   CamTalk / inquiry/ad.php - 광고문의, the phone.

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

   THE SYSTEM (shared with the agency / model phone pages)
     red      #f5123f             the accent words, labels, icons
     ink      #16161c / #5a5c66   headings / copy
     ground   the night (hero); white and a warm milk #fbf8f6 below; the
              band's warm cream at the foot, sampled from its picture
     type     the site's Paperozi
     gutter   20px at 360 .. 23px at 430
     cards    white, a 1px warm #efe8e5 edge and one faint long drop

   THE ICONS are inline SVG with their colours, light and highlights in
   the SVG itself (see inquiry/ad.php); CSS gives each only a box.

   STABILITY. Ordinary vertical scrolling: no pinning, no snap, no scroll
   handler. The one screen-high block is `svh`, so the browser's bars
   sliding away resize nothing. Every picture has width and height.

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

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

	.cad-page {
		--ad-red: #f5123f;
		--ad-ink: #16161c;
		--ad-ink-2: #5a5c66;
		--ad-gutter: clamp(20px, 5.4vw, 23px);
		--ad-header: 66px;                          /* .gnb's height on the phone */
		--ad-milk: #fbf8f6;
		--ad-edge: #efe8e5;
	}

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

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

	/* the two biz cards jump to parts 3 and 4: glide there, and stop clear
	   of the fixed bar */
	@media (prefers-reduced-motion: no-preference) {
		html:has(body.cad-page) { scroll-behavior: smooth; }
	}
	.cad-partners,
	.cad-process { scroll-margin-top: calc(var(--ad-header) + 6px); }

	.cad-card__icon,
	.cad-ptn__icon,
	.cad-step__icon {
		display: block;
		flex: none;
		overflow: visible;
	}

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

	.cad-tag {
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--ad-red);
	}
	.cad-title {
		margin-top: 10px;
		font-size: clamp(27px, 7.7vw, 32px);       /* 30px at 390 */
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--ad-ink);
		word-break: keep-all;
	}
	.cad-title em { color: var(--ad-red); }
	.cad-desc {
		margin-top: 12px;
		font-size: clamp(15px, 4vw, 16px);          /* 15.6px at 390 */
		font-weight: 500;
		line-height: 1.62;
		letter-spacing: -0.035em;
		color: var(--ad-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

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

	/* The bar is the site's own (transparent with white type over the night
	   sky, white once the page has scrolled - js/common.js) and lies over
	   the top 66px of this block, so the block is exactly one screen and
	   the bar is counted once. If the words ever needed more room, the
	   block would grow instead of clipping them. */
	.cad-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		min-height: 100svh;
		overflow: hidden;
		background: #0c1017;                        /* the sky at the picture's top, sampled */
		color: #fff;
	}

	/* The photograph covers the whole block, never stretched; on a phone it
	   is cut only at its sides, and it is held at its right edge, so the
	   red screen and the logo stay whole (the skyline at the left gives
	   way). Its size follows the block, which is `svh`: nothing rescales
	   while scrolling. */
	.cad .cad-hero__img {
		position: absolute;
		z-index: -2;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 100% 50%;
	}
	/* A soft dark pool under the words only, at the street's foot left -
	   no box, the screen above untouched; plus a faint top veil for the
	   crumb under the bar. */
	.cad-hero__shade {
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(120% 40% at 0% 82%, rgba(6, 8, 12, 0.74) 0%, rgba(6, 8, 12, 0.48) 50%, rgba(6, 8, 12, 0) 100%),
			linear-gradient(180deg, rgba(8, 10, 15, 0.45) 0, rgba(8, 10, 15, 0) 150px);
	}

	.cad-crumb {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: calc(var(--ad-header) + 16px) var(--ad-gutter) 0;
		font-size: clamp(13.5px, 3.6vw, 14.5px);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: #c3c6cf;
	}
	.cad-crumb b { font-weight: 700; color: #fff; }
	.cad-crumb__sep { width: 14px; height: 14px; flex: 0 0 auto; color: #9a9da8; }

	/* The words at the foot, on the street: their foot stays above the AI
	   launcher's corner (the lowest ~80px at the right), their head below
	   the red screen at every phone size. */
	.cad-hero__words {
		position: relative;
		padding: 0 var(--ad-gutter) clamp(112px, 15svh, 136px);   /* raised above the old 96-112px */
	}
	/* The group's foot stays where it was (the padding above); smaller type
	   leaves its room above the words. */
	.cad-hero__title {
		position: relative;
		padding-top: 20px;
		font-size: clamp(48px, 13.9vw, 58px);       /* 54px at 390 */
		font-weight: 900;
		line-height: 1.1;
		letter-spacing: -0.045em;
		color: #fff;
		word-break: keep-all;
	}
	/* the short red rule over the title, as in the reference */
	.cad-hero__title::before {
		content: "";
		position: absolute;
		left: 3px;
		top: 0;
		width: 32px;
		height: 3px;
		border-radius: 2px;
		background: var(--ad-red);
	}
	.cad-hero__desc {
		margin-top: 12px;
		font-size: clamp(17px, 4.85vw, 20px);       /* 18.9px at 390 */
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: -0.035em;
		color: #f0f1f4;
		word-break: keep-all;
	}
	.cad-hero__title,
	.cad-hero__desc { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38); }

	/* ======================================================================
	   2. BUSINESS PARTNERSHIP - heading and two cards
	   ====================================================================== */

	.cad-biz { padding: clamp(40px, 11vw, 48px) var(--ad-gutter) clamp(34px, 9vw, 40px); background: #fff; }
	.cad .cad-cards {
		display: grid;
		gap: 12px;
		margin-top: 24px;
	}
	.cad-cards > li { display: flex; }
	/* one card per row: the mark at the left, the words beside it, the
	   jump's mark in the corner - room for the copy at every phone width */
	.cad-card {
		position: relative;
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		width: 100%;
		padding: 18px 18px 19px 18px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--ad-edge);
		box-shadow: 0 14px 30px -24px rgba(60, 20, 20, 0.32);
		color: var(--ad-ink);
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cad-card:active { transform: scale(0.985); }
	.cad-card:focus-visible { outline: 3px solid var(--ad-red); outline-offset: 2px; }
	.cad-card__pic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #fdf1f3;
	}
	.cad-card__icon { width: 40px; height: 40px; }
	.cad-card__text { display: flex; flex-direction: column; min-width: 0; padding-top: 3px; }
	/* only the title line keeps clear of the jump's mark in the corner;
	   the copy below it has the whole width */
	.cad-card__title {
		padding-right: 30px;
		font-size: clamp(17px, 4.6vw, 18.5px);     /* 18px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
	}
	.cad-card__desc {
		margin-top: 6px;
		font-size: clamp(14px, 3.85vw, 15px);      /* 15px at 390 */
		font-weight: 500;
		line-height: 1.58;
		letter-spacing: -0.04em;
		color: var(--ad-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}
	/* a list that must not break inside, e.g. (라이브·스토리·탐색·쪽지) */
	.cad-nw { white-space: nowrap; }
	/* a jump down the page, so the mark points down */
	.cad-card__go {
		position: absolute;
		top: 16px;
		right: 14px;
		width: 26px;
		height: 26px;
		padding: 5px;
		border-radius: 50%;
		background: #fdf1f3;
		color: var(--ad-red);
	}

	/* ======================================================================
	   3. PARTNERS - eight cards, two columns x four rows
	   ====================================================================== */

	/* Read left to right, top to bottom, in the reference's order. White
	   cards on a light neutral ground, the red mark at the left, the label and
	   the name beside it. A row's two cards are one height (grid rows
	   stretch); a long name wraps and the row grows. Not links: no arrows. */
	.cad-partners { padding: clamp(40px, 11vw, 48px) var(--ad-gutter) clamp(36px, 10vw, 42px); background: #f6f5f4; }
	.cad .cad-ptns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 22px;
	}
	.cad-ptn {
		display: grid;
		grid-template-columns: clamp(28px, 8vw, 34px) minmax(0, 1fr);
		gap: 8px;
		align-items: center;
		padding: 14px 9px 14px 10px;
		border-radius: 14px;
		background: #fff;
		border: 1px solid #ecebea;
		box-shadow: 0 8px 18px -14px rgba(40, 20, 20, 0.22);
	}
	.cad-ptn__pic { display: flex; align-items: center; justify-content: center; }
	/* the mark without a disc, as in the reference; one box for all eight */
	.cad-ptn__icon { width: clamp(28px, 8vw, 34px); height: clamp(28px, 8vw, 34px); }
	.cad-ptn__text { display: flex; flex-direction: column; min-width: 0; }
	.cad-ptn__en {
		font-size: clamp(9.5px, 2.6vw, 10.5px);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.04em;
		color: #8d8784;
		overflow-wrap: normal;
		word-break: keep-all;
	}
	.cad-ptn__ko {
		margin-top: 3px;
		font-size: clamp(14px, 3.85vw, 15.5px);   /* 15px at 390 */
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: -0.045em;
		color: var(--ad-ink);
		word-break: keep-all;
	}

	/* ======================================================================
	   4. PROCESS - four steps, 2 x 2
	   ====================================================================== */

	.cad-process { padding: clamp(40px, 11vw, 48px) var(--ad-gutter) clamp(40px, 11vw, 48px); background: #fff; }
	.cad .cad-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 22px;
	}
	.cad-step {
		display: flex;
		flex-direction: column;
		padding: 16px 15px 18px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--ad-edge);
		box-shadow: 0 12px 26px -22px rgba(60, 20, 20, 0.3);
	}
	.cad-step__no {
		font-size: clamp(11.5px, 3.1vw, 12.5px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.08em;
		color: var(--ad-red);
	}
	.cad-step__media {
		display: flex;
		align-items: center;
		height: 74px;
		margin: 8px 0 8px -4px;
	}
	.cad-step__icon { width: 68px; height: 68px; }
	.cad-step__title {
		font-size: clamp(16.5px, 4.5vw, 18px);     /* 17.5px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--ad-ink);
		word-break: keep-all;
	}
	.cad-step__desc {
		margin-top: 5px;
		font-size: clamp(13.5px, 3.6vw, 14.5px);   /* 14px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.04em;
		color: var(--ad-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

	/* ======================================================================
	   5. CTA - one wide band, edge to edge: the words left, the cube right
	   ====================================================================== */

	/* A solid section from the left edge of the screen to the right: no
	   outer margin, no corners, no frame, no shadow; the footer follows it
	   directly. Composed as the reference - a low, wide band: the whole cube
	   photograph is its ground, the words and the black button sit left in
	   its light, the glass cube stands right, opposite the title.

	   THE PICTURE is the source photograph whole (2172 x 724), never masked,
	   never stretched: `cover` fits it to the band's HEIGHT (the band is far
	   narrower than 3:1), so its full height shows - the cube fills the
	   height of the scene - and only its left wall and right edge give way.
	   It is held at 72% across, which puts the cube's right side ~2% from the
	   screen's edge at every phone width (the cube runs from 63.1% to 85.5%
	   of the picture's width). The band's height is FIXED per width, so the
	   picture's scale - and where the cube stands - never depends on the
	   language; the words are written to fit it. The one veil is a light
	   gradient local to the words, gone before the cube. */
	.cad-cta {
		position: relative;
		z-index: 0;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center;
		height: clamp(236px, 62vw, 270px);         /* 242px at 390 */
		background: #f4dcc8;                        /* under the picture while it loads */
		color: var(--ad-ink);
	}
	.cad-cta__pic {
		position: absolute;
		z-index: -2;
		inset: 0;
	}
	.cad .cad-cta__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 72% 50%;
	}
	.cad-cta::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(90deg,
			rgba(252, 244, 235, 0.9) 0%,
			rgba(252, 244, 235, 0.78) 30%,
			rgba(252, 244, 235, 0.42) 44%,
			rgba(252, 244, 235, 0) 55%);
	}

	/* the words' column ends before the cube (it starts ~54% across) */
	.cad-cta__words {
		position: relative;
		width: 53%;
		padding: 22px 0 22px clamp(20px, 5.6vw, 24px);
	}
	.cad-cta__eyebrow {
		font-size: clamp(10px, 2.7vw, 11px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.22em;
		color: var(--ad-red);
	}
	.cad-cta__title {
		margin-top: 8px;
		font-size: clamp(19px, 5.3vw, 22px);       /* 20.7px at 390 */
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.05em;
		color: #1a1416;
		word-break: keep-all;
	}
	.cad-cta__title em { color: var(--ad-red); }
	.cad-cta__desc {
		margin-top: 7px;
		font-size: clamp(12.5px, 3.35vw, 13.5px);  /* 13px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.04em;
		color: #4f433e;
		word-break: keep-all;
	}
	/* black with white words and arrow, as in the reference; 44px high for
	   the thumb, and never wider than 180px, so even at the moment it enters
	   at the screen's foot it is clear of the AI launcher's corner */
	.cad-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 44px;
		max-width: 180px;
		margin-top: 14px;
		padding: 0 16px 0 18px;
		border-radius: 999px;
		background: #141416;
		box-shadow: 0 12px 22px -14px rgba(20, 20, 22, 0.55);
		font-size: clamp(14px, 3.75vw, 15px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cad-btn span,
	.cad-btn .cad-btn__arrow { color: #fff; }
	.cad-btn__arrow { width: 17px; height: 17px; flex: 0 0 auto; }
	.cad-btn:active { transform: scale(0.98); }
	.cad-btn:focus-visible { outline: 3px solid var(--ad-red); outline-offset: 3px; }
	/* Latin runs wider: the English title keeps its two lines in the column */
	.cad-page.lang-en .cad-cta__title { font-size: clamp(17px, 4.8vw, 20px); letter-spacing: -0.03em; }

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

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening. */
	.cad-page.lang-en .cad-hero__title { letter-spacing: -0.035em; }
	.cad-page.lang-en .cad-hero__desc,
	.cad-page.lang-en .cad-desc,
	.cad-page.lang-en .cad-card__desc,
	.cad-page.lang-en .cad-step__desc,
	.cad-page.lang-en .cad-cta__desc { letter-spacing: -0.012em; }
	.cad-page.lang-en .cad-title,
	.cad-page.lang-en .cad-card__title,
	.cad-page.lang-en .cad-ptn__ko,
	.cad-page.lang-en .cad-step__title,
	.cad-page.lang-en .cad-cta__title { letter-spacing: -0.028em; }
	.cad-page.lang-en .cad-hero__title,
	.cad-page.lang-en .cad-hero__desc,
	.cad-page.lang-en .cad-title,
	.cad-page.lang-en .cad-desc,
	.cad-page.lang-en .cad-card__title,
	.cad-page.lang-en .cad-card__desc,
	.cad-page.lang-en .cad-step__title,
	.cad-page.lang-en .cad-step__desc,
	.cad-page.lang-en .cad-cta__title,
	.cad-page.lang-en .cad-cta__desc { word-break: normal; overflow-wrap: break-word; }
	.cad-page.lang-en .cad-ptn__ko { word-break: normal; overflow-wrap: normal; }

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