@charset "utf-8";

/* ==========================================================================
   CamTalk / inquiry/model.php - 모델문의, the phone.

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

   THE SYSTEM (shared with the agency / partner phone pages)
     red      #f5123f             the accent words, labels, the button
     ink      #16161c / #5a5c66   headings / copy
     ground   the stage's black (hero, banner); milk #fbfafa with white
              cards between them
     type     the site's Paperozi
     gutter   20px at 360 .. 23px at 430
     cards    white, a 1px #ececef edge and one faint long drop

   THE ICONS are inline SVG with their colours, light and highlights in
   the SVG itself (see inquiry/model.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; the hero photograph's size depends on the
   width alone. 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) {

	.cmo-page {
		--mo-red: #f5123f;
		--mo-ink: #16161c;
		--mo-ink-2: #5a5c66;
		--mo-gutter: clamp(20px, 5.4vw, 23px);
		--mo-header: 66px;                          /* .gnb's height on the phone */
		--mo-ground: #fbfafa;
		--mo-night: #050506;                         /* the stage photograph's top, sampled */
		--mo-edge: #ececef;
	}

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

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

	/* the two info 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.cmo-page) { scroll-behavior: smooth; }
	}
	.cmo-roles,
	.cmo-process { scroll-margin-top: calc(var(--mo-header) + 6px); }

	.cmo-info__icon,
	.cmo-role__icon,
	.cmo-step__icon {
		display: block;
		flex: none;
		overflow: visible;
	}

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

	.cmo-tag {
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--mo-red);
	}
	.cmo-title {
		margin-top: 10px;
		font-size: clamp(26px, 7.4vw, 31px);       /* 29px at 390 */
		font-weight: 800;
		line-height: 1.28;
		letter-spacing: -0.045em;
		color: var(--mo-ink);
		word-break: keep-all;
	}
	.cmo-title em { color: var(--mo-red); }
	.cmo-desc {
		margin-top: 10px;
		font-size: clamp(14.5px, 3.95vw, 16px);    /* 15.4px at 390 */
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.035em;
		color: var(--mo-ink-2);
		word-break: keep-all;
	}

	/* ======================================================================
	   1. HERO - one screen with the bar; the words at the foot
	   ====================================================================== */

	/* The bar lies over the top 66px of this block (the site's own bar:
	   transparent with white type over the dark, white once the page has
	   scrolled - js/common.js), so the block is one screen and the bar is
	   counted once. The info cards overlap its foot by --mo-lap, so the block
	   is a screen PLUS that overlap. The photograph - the stage without its
	   empty dark top (941 x 1552: cut at y 120, so the top of the question mark
	   still clears the bar) - covers the block, fitted by height, held
	   at 62% across so the woman, her train and the question mark stay in;
	   its size depends on the block only, so scrolling rescales nothing.
	   The crumb stays at the top; the title group stands at the foot. */
	.cmo-hero {
		--mo-lap: 26px;
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		min-height: calc(100vh + var(--mo-lap));
		min-height: calc(100svh + var(--mo-lap));
		overflow: hidden;
		background: var(--mo-night);
		color: #fff;
	}
	.cmo-hero__pic {
		position: absolute;
		z-index: -2;
		inset: 0;
	}
	.cmo .cmo-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 62% 0;
	}
	/* a soft dark ramp under the words at the foot (and a faint one under
	   the bar for the crumb) - the photograph stays visible through both */
	.cmo-hero::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background:
			linear-gradient(0deg, rgba(5, 5, 6, 0.8) 0%, rgba(5, 5, 6, 0.55) 26%, rgba(5, 5, 6, 0) 50%),
			linear-gradient(180deg, rgba(5, 5, 6, 0.5) 0, rgba(5, 5, 6, 0) 150px);
	}

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

	/* The group at the foot: its bottom clears the AI launcher (the lowest
	   ~80px of the screen) plus the cards' overlap. Its padding-top is the
	   least room kept above it: when the screen is too short for both, the
	   block grows by itself, and the words keep below the woman's head
	   (which ends ~44% down the picture; 270px keeps it clear for the
	   Korean group even on a 384 x 693 screen). */
	.cmo-hero__words {
		position: relative;
		margin-top: auto;
		padding: 270px var(--mo-gutter) calc(var(--mo-lap) + clamp(78px, 9.5svh, 90px));
	}
	/* The group's foot stays where it was (the padding above); smaller type
	   leaves its room above the words. */
	.cmo-hero__title {
		position: relative;
		font-size: clamp(45px, 13vw, 54px);         /* 50.7px at 390 */
		font-weight: 900;
		line-height: 1.1;
		letter-spacing: -0.045em;
		word-break: keep-all;
	}
	/* the short red rule over the title, as in the reference */
	.cmo-hero__title::before {
		content: "";
		position: absolute;
		left: 2px;
		top: -14px;
		width: 28px;
		height: 3px;
		border-radius: 2px;
		background: var(--mo-red);
	}
	.cmo-hero__title span { color: #fff; }
	.cmo-hero__title em { color: var(--mo-red); }
	.cmo-hero__sub {
		margin-top: 14px;
		font-size: clamp(19px, 5.4vw, 22px);        /* 21px at 390 */
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: -0.04em;
		color: #fff;
		word-break: keep-all;
	}
	.cmo-hero__desc {
		margin-top: 12px;
		font-size: clamp(15px, 4.3vw, 17.5px);      /* 16.8px at 390 */
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.035em;
		color: #d4d5dc;
		word-break: keep-all;
	}
	.cmo-hero__title,
	.cmo-hero__sub,
	.cmo-hero__desc { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }

	/* A short screen gives up spacing first, never type size. */
	@media (max-height: 760px) {
		.cmo-crumb { padding-top: calc(var(--mo-header) + 12px); }
		.cmo-hero__words { padding-top: 270px; }
		.cmo-hero__sub { margin-top: 12px; }
		.cmo-hero__desc { margin-top: 10px; }
	}

	/* ======================================================================
	   2. INFO - two cards in one row, over the hero's foot
	   ====================================================================== */

	.cmo-info {
		position: relative;
		z-index: 1;
		margin-top: -26px;                          /* = the hero's --mo-lap */
		padding: 0 var(--mo-gutter) 6px;
	}
	.cmo .cmo-info__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.cmo-info__row > li { display: flex; }
	.cmo-info__card {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 15px 14px 17px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--mo-edge);
		box-shadow: 0 14px 28px -20px rgba(20, 20, 30, 0.35);
		color: var(--mo-ink);
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cmo-info__card:active { transform: scale(0.985); }
	.cmo-info__card:focus-visible { outline: 3px solid var(--mo-red); outline-offset: 2px; }
	.cmo-info__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.cmo-info__pic {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #fdf1f3;
	}
	.cmo-info__icon { width: 34px; height: 34px; }
	/* a jump down the page, so the mark points down */
	.cmo-info__go {
		width: 26px;
		height: 26px;
		padding: 5px;
		border-radius: 50%;
		background: #f5f5f6;
		color: #8a8c96;
	}
	.cmo-info__title {
		margin-top: 12px;
		font-size: clamp(16.5px, 4.5vw, 18px);     /* 17.5px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
	}
	.cmo-info__desc {
		margin-top: 6px;
		font-size: clamp(13.5px, 3.6vw, 14.5px);   /* 14px at 390 */
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: -0.04em;
		color: var(--mo-ink-2);
		word-break: keep-all;
		text-wrap: pretty;                          /* a narrow card: no one-word last line */
	}

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

	/* The same cards as the partners of inquiry/ad.php: white on a light
	   neutral ground, the red mark at the left, the label and the words
	   beside it, read left to right, top to bottom. A row's two cards are one
	   height (grid rows stretch); a long line wraps and the row grows. Not
	   links. */
	.cmo-roles { padding: clamp(40px, 11vw, 48px) var(--mo-gutter) clamp(30px, 8vw, 36px); background: #f6f5f4; }
	.cmo .cmo-roles__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 22px;
	}
	.cmo-role {
		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);
	}
	.cmo-role__pic { display: flex; align-items: center; justify-content: center; }
	/* the mark without a disc, as on the ad page; one box for all eight */
	.cmo-role__icon { width: clamp(28px, 8vw, 34px); height: clamp(28px, 8vw, 34px); }
	.cmo-role__text { display: flex; flex-direction: column; min-width: 0; }
	.cmo-role__en {
		font-size: clamp(9.5px, 2.6vw, 10.5px);
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: 0.04em;
		color: var(--mo-red);
		overflow-wrap: normal;
		word-break: keep-all;
	}
	.cmo-role__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(--mo-ink);
		word-break: keep-all;
	}

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

	.cmo-process { padding: clamp(40px, 11vw, 48px) var(--mo-gutter) 6px; }
	.cmo .cmo-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 22px;
	}
	.cmo-step {
		display: flex;
		flex-direction: column;
		padding: 16px 15px 12px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--mo-edge);
		box-shadow: 0 10px 24px -22px rgba(20, 20, 30, 0.3);
	}
	.cmo-step__no {
		font-size: clamp(11.5px, 3.1vw, 12.5px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.08em;
		color: var(--mo-red);
	}
	.cmo-step__title {
		margin-top: 6px;
		font-size: clamp(17px, 4.6vw, 18.5px);     /* 18px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
		color: var(--mo-ink);
		word-break: keep-all;
	}
	/* the pictures stand in a band of one height at the foot of the card,
	   so a row's pictures line up whatever its titles do */
	.cmo-step__media {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 92px;
		margin-top: auto;
		padding-top: 8px;
	}
	.cmo-step__icon { width: 80px; height: 80px; }

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

	/* Composed as the final band of inquiry/ad.php: a solid section from the
	   left edge of the screen to the right (no margin, corners, frame or
	   shadow), its ground the whole desk photograph (2172 x 724), never
	   masked or stretched. `cover` fits it to the band's FIXED height, so
	   its full height shows and the plaque with its heart stands at full
	   size; it is held at 53% across, which puts the plaque's left side ~56%
	   across at every phone width and lets the camera run off the right
	   edge. The words sit left in the room's own dark; the one veil is a
	   faint local shade under them. */
	.cmo-cta { padding: 0; }
	.cmo-cta__card {
		position: relative;
		z-index: 0;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center;
		height: clamp(236px, 62vw, 270px);         /* 242px at 390 */
		background: #0b0a0b;                        /* under the picture while it loads */
		color: #fff;
	}
	.cmo-cta__pic {
		position: absolute;
		z-index: -2;
		inset: 0;
	}
	.cmo .cmo-cta__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 53% 50%;
	}
	.cmo-cta__card::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(5, 5, 6, 0.55) 0%, rgba(5, 5, 6, 0.32) 38%, rgba(5, 5, 6, 0) 54%);
	}
	/* the words' column ends before the plaque (it starts ~56% across) */
	.cmo-cta__words {
		position: relative;
		width: 54%;
		padding: 22px 0 22px clamp(20px, 5.6vw, 24px);
	}
	.cmo-cta__eyebrow {
		font-size: clamp(10px, 2.7vw, 11px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.2em;
		color: #ff4766;
	}
	.cmo-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: #fff;
		word-break: keep-all;
	}
	.cmo-cta__title em { color: #ff2d55; }
	.cmo-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: #c9cad1;
		word-break: keep-all;
	}
	/* red with white words and arrow; 44px high for the thumb, and never
	   wider than 180px, so even at the moment it enters at the screen foot
	   it is clear of the AI launcher corner */
	.cmo-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: linear-gradient(90deg, #ff2a55 0%, #f20a3c 100%);
		box-shadow: 0 12px 22px -14px rgba(242, 10, 60, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		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;
	}
	.cmo-btn span,
	.cmo-btn .cmo-btn__arrow { color: #fff; }
	.cmo-btn__arrow { width: 17px; height: 17px; flex: 0 0 auto; }
	.cmo-btn:active { transform: scale(0.98); }
	.cmo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

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

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening. */
	/* "Model Inquiry" stays on one line */
	.cmo-page.lang-en .cmo-hero__title { font-size: clamp(42px, 12vw, 50px); letter-spacing: -0.04em; }
	.cmo-page.lang-en .cmo-hero__sub { letter-spacing: -0.025em; }
	.cmo-page.lang-en .cmo-hero__desc,
	.cmo-page.lang-en .cmo-desc,
	.cmo-page.lang-en .cmo-info__desc,
	.cmo-page.lang-en .cmo-cta__desc { letter-spacing: -0.012em; }
	.cmo-page.lang-en .cmo-title,
	.cmo-page.lang-en .cmo-info__title,
	.cmo-page.lang-en .cmo-role__ko,
	.cmo-page.lang-en .cmo-step__title,
	.cmo-page.lang-en .cmo-cta__title { letter-spacing: -0.028em; }
	.cmo-page.lang-en .cmo-hero__sub,
	.cmo-page.lang-en .cmo-hero__desc,
	.cmo-page.lang-en .cmo-title,
	.cmo-page.lang-en .cmo-desc,
	.cmo-page.lang-en .cmo-info__title,
	.cmo-page.lang-en .cmo-info__desc,
	.cmo-page.lang-en .cmo-step__title,
	.cmo-page.lang-en .cmo-cta__title,
	.cmo-page.lang-en .cmo-cta__desc { word-break: normal; overflow-wrap: break-word; text-wrap: pretty; }
	.cmo-page.lang-en .cmo-role__ko { word-break: normal; overflow-wrap: normal; }

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