@charset "utf-8";

/* ==========================================================================
   CamTalk / inquiry/agency.php - 에이전시 제휴문의, the phone.

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

   THE SYSTEM
     red      #f5123f             the accent words, labels, the button
     ink      #16161c / #55575f   headings / copy
     ground   cream #fbf7f2 .. blush #fff1f3, white surfaces
     type     the site's Paperozi
     gutter   18px at 360 .. 22px at 430
     shadow   one family, faint: a long warm drop plus a hairline edge

   THE ICONS are inline SVG, one filled set of 13 (see the icons section).

   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 card 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) {

	.cag-page {
		--ag-red: #f5123f;
		--ag-ink: #16161c;
		--ag-ink-2: #55575f;
		--ag-gutter: clamp(18px, 5.2vw, 22px);
		--ag-header: 66px;                          /* .gnb's height on the phone */
		--ag-cream: #fbf7f2;
		--ag-line: rgba(150, 95, 75, 0.11);
	}

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

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

	/* ---- the icons -------------------------------------------------------------
	   One filled vector set of 13, drawn for this page (see inquiry/agency.php):
	   the colours, the light and the highlights are in the SVG itself, so CSS
	   gives each block only a box (the merits' badge, the directions' disc,
	   the steps' band). Every box is square and overflow stays visible, so
	   no rounded edge or highlight is ever clipped. */
	.cag-merit__icon,
	.cag-field__icon,
	.cag-step__icon {
		display: block;
		flex: none;
		overflow: visible;
	}

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

	.cag-tag {
		display: block;
		width: fit-content;
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--ag-red);
	}
	.cag-title {
		margin-top: 9px;
		font-size: clamp(23px, 6.5vw, 27px);       /* 25.4px at 390 */
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: var(--ag-ink);
		word-break: keep-all;
	}
	.cag-desc {
		margin-top: 8px;
		font-size: clamp(14.5px, 3.9vw, 15.5px);
		font-weight: 500;
		line-height: 1.58;
		letter-spacing: -0.03em;
		color: var(--ag-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

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

	/* The bar is the site's white one (the script holds it on phones) and
	   lies over the top 66px of this block, so the block is one screen and
	   the bar is counted once. 100svh is the screen WITH the browser's bars:
	   nothing resizes or rescales while they slide. */
	.cag-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--ag-header) + 20px) var(--ag-gutter) 0;
		overflow: hidden;
		background: #f3ebe2;                        /* the photo's top edge, sampled */
	}

	/* The photograph covers the screen under the bar, never stretched. On
	   a tall phone cover crops ~10% of the width: it is held at 36% so the
	   photo's own "Grow Together" keeps its first letter and the man at the
	   right keeps his face. The heads start far below the words. */
	.cag .cag-hero__img {
		position: absolute;
		z-index: -2;
		left: 0;
		top: var(--ag-header);
		width: 100%;
		height: calc(100% - var(--ag-header));
		object-fit: cover;
		object-position: 36% 0;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 18px);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 18px);
	}

	/* A pale wash under the words, strongest at the top left; it fades out
	   both to the right and downwards, before the script and the heads. */
	.cag-hero__wash {
		position: absolute;
		z-index: -1;
		left: 0;
		top: var(--ag-header);
		width: 100%;
		height: min(300px, 44svh);
		pointer-events: none;
		background: radial-gradient(100% 95% at 0% 28%,
			rgba(255, 252, 248, 0.88) 0%,
			rgba(255, 252, 248, 0.7) 46%,
			rgba(255, 252, 248, 0.28) 74%,
			rgba(255, 252, 248, 0) 100%);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
	}

	/* the photograph's foot settles into the cream of the merits row */
	.cag-hero::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 40px;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(251, 247, 242, 0) 0%, rgba(251, 247, 242, 0.6) 60%, var(--ag-cream) 100%);
	}

	/* The motto of the text source, top right, with its red rule. */
	.cag-hero__motto {
		position: absolute;
		top: calc(var(--ag-header) + 18px);
		right: var(--ag-gutter);
		font-size: clamp(9.5px, 2.6vw, 10.5px);
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: 0.22em;
		margin-right: -0.22em;                      /* the tracking after the last letter */
		text-align: right;
		color: #2b2b31;
	}
	.cag-hero__motto::after {
		content: "";
		display: block;
		width: 26px;
		height: 2px;
		margin: 7px 0.22em 0 auto;
		background: var(--ag-red);
	}

	.cag-hero__words { position: relative; }

	.cag-crumb {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: clamp(13px, 3.5vw, 14px);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.02em;
		color: #55565e;
	}
	.cag-crumb b { font-weight: 700; color: var(--ag-ink); }
	.cag-crumb__sep { width: 14px; height: 14px; flex: 0 0 auto; color: #8a8c96; }

	.cag-hero__title {
		margin-top: 16px;
		font-size: clamp(34px, 10.4vw, 44px);      /* 40.6px at 390 */
		font-weight: 900;
		line-height: 1.17;
		letter-spacing: -0.045em;
		color: #111114;
		word-break: keep-all;
	}
	.cag-hero__title span { display: block; }
	.cag-hero__title em { color: var(--ag-red); }

	.cag-hero__desc {
		margin-top: 16px;
		font-size: clamp(16px, 4.25vw, 17px);      /* 16.6px at 390 */
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.035em;
		color: #26272e;
		word-break: keep-all;
	}
	.cag-hero__title,
	.cag-hero__desc { text-shadow: 0 0 14px rgba(255, 252, 248, 0.85), 0 0 3px rgba(255, 252, 248, 0.6); }

	/* A short screen (a Galaxy with its address bar: 693px) gives up
	   spacing first, never type size. */
	@media (max-height: 760px) {
		.cag-hero { padding-top: calc(var(--ag-header) + 14px); }
		.cag-hero__motto { top: calc(var(--ag-header) + 13px); line-height: 1.45; }
		.cag-hero__motto::after { margin-top: 5px; }
		.cag-hero__title { margin-top: 11px; line-height: 1.12; }
		.cag-hero__desc { margin-top: 12px; line-height: 1.5; }
	}

	/* ======================================================================
	   2. MERITS - three in one row
	   ====================================================================== */

	.cag-merits {
		padding: 14px clamp(14px, 4.1vw, 18px) 6px;  /* the row runs a little wider than the page's gutter */
		background: var(--ag-cream);
	}
	.cag .cag-merits__row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.cag-merit {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 14px 6px 15px;
		border-radius: 16px;
		background: #fffcf8;
		border: 1px solid var(--ag-line);
		box-shadow: 0 12px 24px -20px rgba(120, 60, 40, 0.32);
		text-align: center;
	}
	.cag-merit__badge {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: clamp(44px, 12.3vw, 52px);           /* 48px at 390, as the old badge */
		height: clamp(44px, 12.3vw, 52px);
		border-radius: 50%;
		background: #ffe8ed;
	}
	.cag-merit__icon {
		width: clamp(31px, 8.7vw, 36px);            /* 34px at 390: the mark ~26px on the 48px badge */
		height: clamp(31px, 8.7vw, 36px);
	}
	.cag-merit__title {
		margin-top: 9px;
		font-size: clamp(14px, 3.85vw, 15.5px);    /* 15px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--ag-ink);
		word-break: keep-all;
	}
	.cag-merit__desc {
		margin-top: 6px;
		font-size: clamp(13px, 3.45vw, 14px);      /* 13.5px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.04em;
		color: #5f616a;
		word-break: keep-all;
		text-wrap: balance;                         /* even lines, no one-word tail */
	}

	/* ======================================================================
	   3. FIELDS - six rows, picture and words alternating
	   ====================================================================== */

	/* A white section of six light white cards: one card per direction
	   (mark and words together), a hairline #ecedef edge, no shadow. The
	   mark stands on a neutral grey disc centred on the whole text group,
	   and the disc changes sides row by row. Only the empty padding at the
	   two ends of the section blends into the neighbours' tone (the merits'
	   cream above, the process's #fdf6f2 below), so the merit cards'
	   shadows end on cream and no hard band edge shows. */
	.cag-fields {
		--ag-disc: clamp(64px, 18.5vw, 76px);       /* 72px at 390 */
		padding: clamp(38px, 10.5vw, 46px) var(--ag-gutter) clamp(30px, 8vw, 36px);
		background: linear-gradient(180deg, var(--ag-cream) 0, #fff 32px, #fff calc(100% - 28px), #fdf6f2 100%);
	}
	.cag .cag-fields__list {
		display: grid;
		gap: clamp(12px, 3.6vw, 15px);              /* 14px at 390 */
		margin-top: clamp(22px, 6vw, 26px);
	}

	.cag-field {
		display: grid;
		grid-template-columns: var(--ag-disc) minmax(0, 1fr);
		gap: clamp(14px, 4.1vw, 18px);
		align-items: center;
		padding: clamp(14px, 4.1vw, 17px) clamp(14px, 4.1vw, 18px);
		border: 1px solid #ecedef;
		border-radius: 18px;
		background: #fff;
	}
	.cag-field--flip { grid-template-columns: minmax(0, 1fr) var(--ag-disc); }
	.cag-field--flip .cag-field__pic { order: 2; }

	.cag-field__pic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--ag-disc);
		height: var(--ag-disc);
		border-radius: 50%;
		background: #f5f5f6;
	}
	/* one box for all six; their optical sizes are drawn into the 48px grid
	   (the marks come out about 37-41px at 390) */
	.cag-field__icon {
		width: clamp(46px, 13.3vw, 54px);           /* 52px at 390 */
		height: clamp(46px, 13.3vw, 54px);
	}

	.cag-field__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.cag-field__en {
		font-size: clamp(10px, 2.7vw, 11px);
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: 0.06em;
		color: #9b918c;
		overflow-wrap: anywhere;
	}
	.cag-field__title {
		margin-top: 5px;
		font-size: clamp(17px, 4.6vw, 18.5px);     /* 18px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--ag-ink);
		word-break: keep-all;
	}
	.cag-field__desc {
		margin-top: 5px;
		font-size: clamp(14px, 3.72vw, 15px);      /* 14.5px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.04em;
		color: #5f616a;
		word-break: keep-all;
		text-wrap: pretty;
	}

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

	.cag-process {
		padding: clamp(38px, 10.5vw, 46px) var(--ag-gutter) 6px;
		background: linear-gradient(180deg, #fdf6f2 0%, #fffaf8 100%);
	}
	.cag .cag-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 20px;
	}
	.cag-step {
		display: flex;
		flex-direction: column;
		padding: 14px 14px 18px;
		border-radius: 18px;
		background: #fff;
		border: 1px solid var(--ag-line);
		box-shadow: 0 14px 26px -24px rgba(130, 40, 50, 0.38);
	}
	/* the four illustrations sit in a band of one height, so the STEP
	   labels of a row line up; like the reference, no disc behind them */
	.cag-step__media {
		position: relative;
		z-index: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 66px;
		margin-bottom: 12px;
	}
	.cag-step__icon {
		width: 64px;
		height: 64px;
	}
	.cag-step__no {
		font-size: clamp(11.5px, 3.1vw, 12.5px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.06em;
		color: var(--ag-red);
	}
	.cag-step__title {
		margin-top: 5px;
		font-size: clamp(16px, 4.3vw, 17px);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--ag-ink);
		word-break: keep-all;
	}
	.cag-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: #5f616a;
		word-break: keep-all;
		text-wrap: pretty;
	}

	/* ======================================================================
	   5. CTA
	   ====================================================================== */

	.cag-cta {
		padding: 30px var(--ag-gutter) clamp(26px, 7.2vw, 32px);
		background: #fffaf8;
		scroll-margin-top: var(--ag-header);
	}
	.cag-cta__card {
		position: relative;
		z-index: 0;
		isolation: isolate;
		overflow: hidden;
		/* the foot keeps the button 76px+ above the card's lower edge: the AI
		   launcher fills the lowest ~68px of the screen on the right */
		padding: clamp(26px, 7.4vw, 32px) clamp(20px, 5.6vw, 24px) 36px;
		border-radius: 20px;
		background: linear-gradient(150deg, #fff5f6 0%, #ffe8ec 100%);
		border: 1px solid rgba(245, 18, 63, 0.08);
	}
	/* the rising arrow: behind everything, at the lower right, its faint
	   tail under the end of the button and its tip clear of the words */
	.cag-cta__arrow {
		position: absolute;
		z-index: -1;
		right: -6px;
		bottom: 8px;
		width: clamp(118px, 34vw, 150px);
		height: auto;
		pointer-events: none;
	}
	.cag-cta__eyebrow {
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.16em;
		color: var(--ag-red);
	}
	.cag-cta__title {
		margin-top: 10px;
		font-size: clamp(23px, 6.4vw, 27px);       /* 25px at 390 */
		font-weight: 800;
		line-height: 1.32;
		letter-spacing: -0.045em;
		color: var(--ag-ink);
		word-break: keep-all;
	}
	.cag-cta__title em { color: var(--ag-red); }
	.cag-cta__desc {
		margin-top: 10px;
		max-width: 300px;
		font-size: clamp(14.5px, 3.9vw, 15.5px);
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.035em;
		color: var(--ag-ink-2);
		word-break: keep-all;
	}

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

	.cag-cta__mail {
		margin-top: 18px;
		font-size: clamp(13px, 3.45vw, 13.5px);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.01em;
		color: #7a7c85;
		overflow-wrap: anywhere;
	}
	.cag-cta__mail span { font-weight: 700; color: var(--ag-ink-2); margin-right: 4px; }

	/* ---- appearance ------------------------------------------------------------
	   The start state exists only under html.cag-anim (set by the script,
	   never with reduced motion). */
	html.cag-anim .cag [data-cag-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.cag-anim .cag [data-cag-reveal].is-in { opacity: 1; transform: none; }

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening. */
	.cag-page.lang-en .cag-hero__title { font-size: clamp(31px, 9.5vw, 41px); letter-spacing: -0.035em; }
	.cag-page.lang-en .cag-hero__desc { letter-spacing: -0.015em; max-width: 330px; }
	.cag-page.lang-en .cag-title { letter-spacing: -0.03em; text-wrap: balance; }
	.cag-page.lang-en .cag-desc { letter-spacing: -0.01em; }
	.cag-page.lang-en .cag-merit__title { font-size: clamp(13.5px, 3.6vw, 14.5px); letter-spacing: -0.025em; }
	.cag-page.lang-en .cag-merit__desc { letter-spacing: -0.015em; }
	.cag-page.lang-en .cag-field__title { font-size: clamp(16px, 4.3vw, 17.5px); letter-spacing: -0.025em; }
	.cag-page.lang-en .cag-field__desc,
	.cag-page.lang-en .cag-step__desc { letter-spacing: -0.015em; }
	.cag-page.lang-en .cag-step__title { letter-spacing: -0.025em; }
	.cag-page.lang-en .cag-cta__title { letter-spacing: -0.03em; }
	.cag-page.lang-en .cag-cta__desc { letter-spacing: -0.01em; }
	.cag-page.lang-en .cag-hero__title,
	.cag-page.lang-en .cag-hero__desc,
	.cag-page.lang-en .cag-title,
	.cag-page.lang-en .cag-desc,
	.cag-page.lang-en .cag-merit__title,
	.cag-page.lang-en .cag-merit__desc,
	.cag-page.lang-en .cag-field__title,
	.cag-page.lang-en .cag-field__desc,
	.cag-page.lang-en .cag-step__title,
	.cag-page.lang-en .cag-step__desc,
	.cag-page.lang-en .cag-cta__title,
	.cag-page.lang-en .cag-cta__desc { word-break: normal; overflow-wrap: break-word; }

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