@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/camtalkplay.php - 캠톡플레이, every width.

   SCOPE. Every rule is nested under `.ctp` or `.ctp-page`, a class only this
   page puts on <body> (js/camtalk-camtalkplay-mobile.js), so nothing here
   reaches another page. The rules at the top are the phone, which is what
   the reference draws; two blocks at the foot give the same sections more
   room - 600-1000px (a tablet) and 1001px up (the wide window).

   THE REFERENCE is drawn at 465px with 7-9px body type, which no phone can
   read. So the proportions, colours, shapes and order are the reference's,
   and the type is set at sizes a phone can read - which makes every card a
   little taller than it is drawn.

   THE SYSTEM.
     gutter    16px at 390, clamped 14-18px
     red       #e5112a, the reference's own (the PLAY of the masthead)
     fields    #f9f8f7 warm white, #f4f3f2 for the guide, #19191c for the
               shelf, #141c26 / #121a24 navy for the two dark cards
     display   Anton for the CAMTALK PLAY lines, Nanum Pen Script for the
               hero's handwritten tagline - both loaded by inc/top.php for
               this page only; everything else is the site's own family.

   common.css resets EVERY element to border 0 / margin 0 / inherit, gives
   <li> `word-break: break-all` and <a> `display: inline-block`. The first is
   why buttons need no reset here; the second would split Korean words
   mid-syllable in every list, so each list below sets `keep-all` itself.
   ========================================================================== */


.ctp-page {
	--cp-gutter: clamp(14px, 4.1vw, 18px);
	--cp-red: #e5112a;
	--cp-ink: #141416;
	--cp-ink-2: #3c3c42;
	--cp-text: #66666d;
	--cp-muted: #8c8c93;
	--cp-bg: #f9f8f7;
	--cp-card: #f0efee;
	--cp-guide: #f4f3f2;
	--cp-night: #19191c;
	--cp-navy: #141c26;
	--cp-navy-2: #121a24;
	--cp-yellow: #f4dd04;
	--cp-pink: #fdecee;
	--cp-header: 65px;            /* .gnb's own height on the phone */
	--cp-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
	--cp-script: 'Nanum Pen Script', cursive;
}

.ctp, .ctp *, .ctp *::before, .ctp *::after { box-sizing: border-box; }

/* Column flex: whitespace between sections would otherwise be an
   anonymous line box each. No `overflow-x` here - it would make <main> a
   vertical scroller that latches the finger (see camtalker's notes). */
.ctp {
	display: flex;
	flex-direction: column;
	background: var(--cp-bg);
	color: var(--cp-ink);
}
.ctp img { display: block; max-width: 100%; }
.ctp a { text-decoration: none; }
.ctp ul, .ctp ol { list-style: none; }
.ctp li { word-break: keep-all; }
:where(.ctp) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.ctp) button { background: none; cursor: pointer; }
.ctp a:focus-visible,
.ctp button:focus-visible,
.ctp summary:focus-visible { outline: 2px solid var(--cp-red); outline-offset: 3px; }

/* The bar is transparent with white type over the hero; its hairline
   would be a rule across the photograph. js/common.js makes it white past
   150px and the line comes back with it. */
.ctp-page .gnb:not(.gnb_invert) { border-bottom-color: transparent; }

.ctp-ico {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

.ctp-head { text-align: center; }

.ctp-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--cp-red);
}

.ctp-title {
	margin-top: 8px;
	font-size: clamp(19px, 5.4vw, 22px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.035em;
	color: var(--cp-ink);
	word-break: keep-all;
	text-wrap: balance;
}

.ctp-lede {
	max-width: 30em;
	margin: 8px auto 0;
	font-size: 12px;
	line-height: 1.65;
	letter-spacing: -0.02em;
	color: var(--cp-text);
	word-break: keep-all;
	text-wrap: balance;
}

.ctp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.ctp-btn--red {
	background: var(--cp-red);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(229, 17, 42, 0.65);
}
.ctp-btn--line {
	border: 1px solid rgba(255, 255, 255, 0.78);
	color: #fff;
}
.ctp-btn--kakao {
	background: var(--cp-yellow);
	color: #17171a;
}

/* ======================================================================
   1. HERO

   Header and hero are one screen-top: the hero starts at y=0 and `.gnb`
   is `position: absolute` over it, so the copy is padded clear of the
   bar. The height follows the copy (`min-height`), not the screen - the
   reference's hero is a band, not a full screen.

   The replacement first slide is a single photographic composite.
   Slides two and three retain their existing compositions. Object-fit keeps
   the photographs proportional; the shade supplies contrast for the copy.
   ====================================================================== */

.ctp-hero {
	position: relative;
	z-index: 0;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: clamp(440px, 117vw, 540px);
	overflow: hidden;
	background: #120e0d;
	color: #fff;
	touch-action: pan-y;
}

.ctp-hero__slides { position: absolute; inset: 0; z-index: -2; }
.ctp .ctp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 100% 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.ctp .ctp-hero__img.is-on { opacity: 1; }

/* The first slide uses one photograph with the physical magazines composited in. */
.ctp .ctp-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% bottom;
}
/* Three ramps: the room behind the copy, the bar at the head, and the
   foot where the pager sits. None of them reaches her face. */
.ctp-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(8, 6, 6, 0.55) 0, rgba(8, 6, 6, 0.18) 58px, rgba(8, 6, 6, 0) 96px),
		linear-gradient(to top, rgba(8, 6, 6, 0.45) 0, rgba(8, 6, 6, 0) 90px),
		linear-gradient(90deg,
			rgba(9, 7, 6, 0.78) 0%,
			rgba(9, 7, 6, 0.62) 26%,
			rgba(9, 7, 6, 0.34) 46%,
			rgba(9, 7, 6, 0.10) 60%,
			rgba(9, 7, 6, 0) 70%);
}

.ctp-hero__copy {
	position: relative;
	padding: calc(var(--cp-header) + 14px) var(--cp-gutter) 64px;
	max-width: 300px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.ctp-hero__script {
	font-family: var(--cp-script);
	font-size: clamp(24px, 6.6vw, 28px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #f6e3e6;
	transform: rotate(-2deg);
	transform-origin: left center;
}

.ctp-hero__title {
	margin-top: 10px;
	font-family: var(--cp-display);
	font-size: clamp(34px, 9.4vw, 40px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.012em;
	color: #fff;
	white-space: nowrap;
}
.ctp-hero__title em,
.ctp-mag__title em { font-style: normal; color: var(--cp-red); }

.ctp-hero__lead {
	margin-top: 14px;
	font-size: clamp(14.5px, 4vw, 16.5px);
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -0.035em;
	word-break: keep-all;
}
.ctp-hero__lead b { font-weight: 800; }

.ctp-hero__desc {
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 1.55;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.82);
	word-break: keep-all;
}

.ctp-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
	text-shadow: none;
}
.ctp-hero__actions .ctp-btn { width: 190px; }
.ctp-hero__actions .ctp-btn--line { background: rgba(10, 8, 8, 0.22); }

.ctp-hero__pager {
	position: absolute;
	right: var(--cp-gutter);
	bottom: 14px;
	display: none;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.ctp-hero__count { margin-right: 8px; letter-spacing: 0.04em; }
.ctp-hero__count b { color: #fff; font-weight: 700; }
.ctp-hero__nav {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
}
.ctp-hero__nav .ctp-ico { width: 17px; height: 17px; }
.ctp-hero__bar { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.55); }

/* ENG runs longer: the lead gets the width it needs and the buttons follow. */
.ctp-page.lang-en .ctp-hero__copy { max-width: 320px; }
.ctp-page.lang-en .ctp-hero__script { font-size: clamp(23px, 6.2vw, 27px); }
.ctp-page.lang-en .ctp-hero__lead { letter-spacing: -0.02em; }
.ctp-page.lang-en .ctp-hero__actions .ctp-btn { width: 210px; }

/* ======================================================================
   2. INTRO - the zigzag
   ====================================================================== */

.ctp-intro { padding: 32px var(--cp-gutter) 22px; }

.ctp-themes { margin-top: 18px; }
.ctp-theme {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}
.ctp-theme + .ctp-theme { margin-top: 10px; }
.ctp-theme--flip .ctp-theme__art { order: 2; }

/* The picture fills its half of the row whatever the card beside it
   needs; `cover` keeps it from ever stretching. */
.ctp .ctp-theme__art {
	width: 100%;
	height: 100%;
	min-height: 150px;
	object-fit: cover;
	object-position: 50% 32%;
	border-radius: 0;
	background: #e6e2df;
}
.ctp-theme:nth-child(1) .ctp-theme__art { object-position: 61% center; }
.ctp-theme:nth-child(2) .ctp-theme__art { object-position: 30% center; }
.ctp-theme:nth-child(3) .ctp-theme__art { object-position: 76% center; }
.ctp-theme:nth-child(4) .ctp-theme__art { object-position: 28% center; }

.ctp-theme__body {
	padding: 14px 12px 15px 15px;
	border-radius: 7px;
	background: var(--cp-card);
}
.ctp-theme__num {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cp-muted);
}
.ctp-theme__title {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}
.ctp-theme__desc {
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.55;
	letter-spacing: -0.04em;
	color: var(--cp-text);
	word-break: keep-all;
}

/* ======================================================================
   3. MAGAZINE - the shelf

   A native scroll-snap strip: the finger moves it, the arrows and the
   dots only ask it to scroll. The strip runs to both edges of the
   screen and its padding lines the first cover up with the gutter.
   ====================================================================== */

.ctp-mag {
	position: relative;
	z-index: 0;
	isolation: isolate;
	padding: 26px 0 20px;
	background: var(--cp-night);
	color: #fff;
	scroll-margin-top: 64px;
}

.ctp-mag__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding: 0 var(--cp-gutter);
}
.ctp-mag__heading { min-width: 0; max-width: 100%; }
.ctp-mag__title {
	font-family: var(--cp-display);
	font-size: clamp(24px, 6.9vw, 29px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.012em;
	white-space: nowrap;
}
.ctp-mag__desc {
	margin-top: 7px;
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.72);
	word-break: keep-all;
}
.ctp-mag__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 4px 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.92);
	white-space: nowrap;
}
.ctp-mag__all .ctp-ico { width: 13px; height: 13px; transition: transform 0.25s ease; }
.ctp-mag__all-less { display: none; }
.ctp-mag__all[aria-expanded="true"] .ctp-mag__all-more { display: none; }
.ctp-mag__all[aria-expanded="true"] .ctp-mag__all-less { display: inline; }
.ctp-mag__all[aria-expanded="true"] .ctp-ico { transform: rotate(-90deg); }

.ctp-mag__list {
	--cp-card-w: calc((100vw - 2 * var(--cp-gutter) - 2 * 10px) / 3.3);
	display: flex;
	gap: 10px;
	margin-top: 18px;
	padding: 0 var(--cp-gutter) 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cp-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ctp-mag__list::-webkit-scrollbar { display: none; }
.ctp-mag:not(.is-grid) .ctp-mag__list { cursor: grab; touch-action: pan-x pan-y; }
.ctp-mag:not(.is-grid) .ctp-issue__btn { cursor: grab; }
.ctp-mag__list.is-dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; cursor: grabbing; }
.ctp-mag__list.is-dragging .ctp-issue__btn { cursor: grabbing; }
/* the strip's own right padding, which Safari drops from a scroller */
.ctp-mag__list::after { content: ''; flex: 0 0 1px; }

.ctp-issue {
	flex: 0 0 var(--cp-card-w);
	scroll-snap-align: start;
}
.ctp-issue__btn {
	display: block;
	width: 100%;
	color: inherit;
	text-align: left;
}
/* Every cover sits in the same box; No.01 is A4 and narrower, so it is
   height-fitted and centred - physically what it is beside the others. */
.ctp-issue__cover {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 480 / 628;
}
.ctp .ctp-issue__cover img {
	width: auto;
	height: 100%;
	border-radius: 3px;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ctp-issue__btn:active .ctp-issue__cover img { transform: none; }
.ctp-issue__date {
	display: block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.ctp-issue__no {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ctp-issue__no i { font-style: normal; opacity: 0.7; }

.ctp-mag__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding: 0 calc(var(--cp-gutter) - 8px);
}
.ctp-mag__arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: #fff;
	transition: opacity 0.2s ease;
}
.ctp-mag__arrow .ctp-ico { width: 18px; height: 18px; }
.ctp-mag__arrow[disabled] { opacity: 0.28; cursor: default; }
.ctp-mag__dots { display: flex; align-items: center; gap: 4px; }
.ctp-mag__playback { display: flex; align-items: center; gap: 14px; }
.ctp-mag__autoplay .ctp-mag__play-icon,
.ctp-mag__autoplay[aria-pressed="true"] .ctp-mag__pause-icon { display: none; }
.ctp-mag__autoplay[aria-pressed="true"] .ctp-mag__play-icon { display: block; }
.ctp-mag__dot {
	display: grid;
	place-items: center;
	width: 18px;
	height: 22px;
}
.ctp-mag__dot::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.38);
	transition: width 0.25s ease, background-color 0.25s ease;
}
.ctp-mag__dot[aria-current="true"] { width: 26px; }
.ctp-mag__dot[aria-current="true"]::before { width: 18px; background: var(--cp-red); }

/* 전체 매거진 보기: the same list, laid out as a grid of three. */
.ctp-mag.is-grid .ctp-mag__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 10px;
	overflow: visible;
	scroll-snap-type: none;
}
.ctp-mag.is-grid .ctp-mag__list::after { display: none; }
.ctp-mag.is-grid [data-ctp-clone] { display: none; }
.ctp-mag__list.is-repositioning { scroll-snap-type: none; scroll-behavior: auto; }
.ctp-mag.is-grid .ctp-mag__nav { display: none; }
.ctp-mag.is-grid { padding-bottom: 26px; }

/* ======================================================================
   4. CONNECTION
   ====================================================================== */

.ctp-conn {
	padding: 34px var(--cp-gutter) 28px;
	text-align: center;
}
.ctp-conn .ctp-title { margin-top: 0; }

.ctp-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 18px;
}
.ctp-value { padding: 16px 10px 18px; }
.ctp-value:nth-child(odd) { border-right: 1px solid #e7e4e1; }
.ctp-value:nth-child(-n+2) { border-bottom: 1px solid #e7e4e1; }
.ctp-value__icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	fill: none;
	stroke: var(--cp-red);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ctp-value__icon .ctp-dot { stroke-width: 2.4; }
.ctp-value__title {
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: -0.04em;
	word-break: keep-all;
}
.ctp-value__desc {
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.55;
	letter-spacing: -0.04em;
	color: var(--cp-text);
	word-break: keep-all;
}

/* ======================================================================
   5. MODEL GUIDE
   ====================================================================== */

.ctp-guide {
	padding: 32px var(--cp-gutter) 26px;
	background: var(--cp-guide);
	scroll-margin-top: 64px;
}
.ctp-guide .ctp-head { margin-bottom: 18px; }

.ctp-acc {
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 16, 12, 0.04), 0 8px 22px -12px rgba(20, 16, 12, 0.12);
}
.ctp-acc + .ctp-acc { margin-top: 10px; }

.ctp-acc__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 14px 15px 16px;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ctp-acc__head::-webkit-details-marker { display: none; }
.ctp-acc__num {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--cp-red);
}
.ctp-acc__title {
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -0.04em;
	word-break: keep-all;
}
.ctp-acc__chev {
	margin-left: auto;
	width: 18px;
	height: 18px;
	color: #3a3a40;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}
.ctp-acc[open] .ctp-acc__chev { transform: none; }

.ctp-acc__body { padding: 0 14px 16px; }
.ctp-acc__lede {
	margin-top: -4px;
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: -0.03em;
	color: var(--cp-text);
	word-break: keep-all;
}
.ctp-acc__lede b { color: var(--cp-ink-2); font-weight: 700; }

/* 01 - four steps in one row, the chevrons in the gaps */
.ctp-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.ctp-step {
	position: relative;
	padding: 12px 4px 11px;
	border-radius: 8px;
	background: #f6f6f5;
	text-align: center;
}
.ctp-step + .ctp-step::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 22px;
	width: 5px;
	height: 5px;
	border-top: 1.5px solid #8f8f96;
	border-right: 1.5px solid #8f8f96;
	transform: rotate(45deg);
}
.ctp-step__icon {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	fill: none;
	stroke: #1d1d22;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ctp-step__title {
	display: block;
	margin-top: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: -0.05em;
	word-break: keep-all;
}
.ctp-step__desc {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	line-height: 1.42;
	letter-spacing: -0.05em;
	color: var(--cp-muted);
	word-break: keep-all;
}

.ctp-points { margin-top: 12px; }
.ctp-points li {
	position: relative;
	padding-left: 10px;
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: -0.03em;
	color: var(--cp-text);
}
.ctp-points li + li { margin-top: 3px; }
.ctp-points li::before {
	content: '';
	position: absolute;
	left: 1px;
	top: 0.72em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--cp-muted);
}

.ctp-notice {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--cp-pink);
	font-size: 11px;
	line-height: 1.55;
	letter-spacing: -0.03em;
	color: #cf3246;
	word-break: keep-all;
}
.ctp-notice b { font-weight: 700; }
.ctp-notice__icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ctp-notice__mark { flex: 0 0 auto; font-weight: 800; }

/* 02 - the three +0.25 cards */
.ctp-benefits__label {
	margin-top: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--cp-muted);
}
.ctp-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 6px;
}
.ctp-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 13px 6px 12px;
	border-radius: 9px;
	background: #fbecec;
	text-align: center;
}
.ctp-benefit--grey { background: #f2f1f0; }
.ctp-benefit span {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.05em;
	color: var(--cp-ink-2);
}
.ctp-benefit strong {
	margin-top: 5px;
	font-size: clamp(20px, 5.9vw, 24px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--cp-red);
}

.ctp-foot {
	margin-top: 11px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: -0.03em;
	color: var(--cp-text);
	word-break: keep-all;
}
.ctp-foot b { color: var(--cp-ink-2); font-weight: 700; }
.ctp-foot--note { margin-top: 5px; color: var(--cp-muted); }
.ctp-foot--note b { color: var(--cp-text); }

/* 03 - the picture beside the three effects */
.ctp-effects {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}
/* `height: auto` first: the height attribute is a presentational height
   and would otherwise win over aspect-ratio. */
.ctp .ctp-effects__art {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 54% 40%;
	border-radius: 8px;
	background: #e6e2df;
}
.ctp-effect {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 9px;
	align-items: start;
}
.ctp-effect + .ctp-effect { margin-top: 12px; }
.ctp-effect__icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	fill: none;
	stroke: var(--cp-red);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ctp-effect__title {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: -0.05em;
}
.ctp-effect__desc {
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: var(--cp-text);
	word-break: keep-all;
}

/* 04 - the four grades */
.ctp-grades {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}
.ctp-grade {
	padding: 12px 11px 13px;
	border: 1px solid #efedeb;
	border-radius: 9px;
	background: #fff;
}
.ctp-grade__head {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	column-gap: 8px;
	align-items: center;
}
.ctp-grade__badge {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cp-red);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
}
.ctp-grade__head strong {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.25;
}
.ctp-grade__head small {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--cp-muted);
}
.ctp-grade__desc {
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: var(--cp-text);
	word-break: keep-all;
}

/* the Kakao card */
.ctp-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(96px, 27vw, 116px);
	gap: 12px;
	align-items: center;
	margin-top: 14px;
	padding: 18px 14px 18px 18px;
	border-radius: 10px;
	background: var(--cp-navy);
	color: #fff;
}
.ctp-contact__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #ff5d6e;
}
.ctp-contact__title {
	margin-top: 5px;
	font-size: clamp(15px, 4.2vw, 17px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}
.ctp-contact__desc {
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.55;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.76);
	word-break: keep-all;
}
.ctp-contact .ctp-btn {
	width: 100%;
	margin-top: 13px;
	padding: 0 12px;
	font-size: 12.5px;
	font-weight: 800;
	white-space: normal;
	text-align: center;
}
.ctp-contact__qr {
	padding: 9px 8px 8px;
	border-radius: 8px;
	background: #fff;
	text-align: center;
}
.ctp .ctp-contact__qr img { width: 100%; height: auto; }
.ctp-contact__qr figcaption {
	margin-top: 5px;
	font-size: 9.5px;
	line-height: 1.35;
	letter-spacing: -0.04em;
	color: var(--cp-muted);
	word-break: keep-all;
}

/* ======================================================================
   6. CLOSING BAND

   The photograph retains its full aspect ratio. At 600px and above the
   copy overlays its empty right side; on phones it follows the photograph.
   ====================================================================== */

.ctp-close {
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	background: #110d12;
	color: #fff;
}
.ctp .ctp-close__art {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.ctp-close__body {
	position: relative;
	margin: 0;
	padding: 24px var(--cp-gutter) calc(30px + env(safe-area-inset-bottom, 0px));
}
.ctp-close__title {
	font-size: clamp(15px, 4.2vw, 17px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.04em;
	word-break: keep-all;
}
.ctp-close__title b {
	font-size: clamp(22px, 6.2vw, 26px);
	font-weight: 800;
}
.ctp-close__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}
.ctp-close__actions .ctp-btn { padding: 0 10px; font-size: 12.5px; }
.ctp-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.ctp-store {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 13px 0 11px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: #050607;
	color: #fff;
}
.ctp-store__mark { width: 18px; height: 18px; flex: 0 0 auto; }
.ctp .ctp-store__mark--apple { filter: invert(1); width: 17px; height: 17px; }
.ctp-store__text {
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.ctp-store__text small {
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.9;
}

/* ======================================================================
   THE COVER DIALOG
   ====================================================================== */

.ctp-lb {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: hidden;
}
.ctp-lb::backdrop { background: rgba(8, 8, 10, 0.9); }
.ctp-lb[open] { display: block; }
.ctp-lb__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 62px 18px calc(28px + env(safe-area-inset-bottom, 0px));
}
.ctp .ctp-lb__img {
	max-width: 100%;
	max-height: calc(100% - 42px);
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
	touch-action: pan-y;
}
.ctp-lb__cap {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-align: center;
	color: rgba(255, 255, 255, 0.92);
}
.ctp-lb__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.ctp-lb__btn .ctp-ico { width: 20px; height: 20px; }
.ctp-lb__btn--close { top: 14px; right: 14px; }
.ctp-lb__btn--prev { left: 8px; top: 50%; margin-top: -21px; }
.ctp-lb__btn--next { right: 8px; top: 50%; margin-top: -21px; }

@media (prefers-reduced-motion: reduce) {
	.ctp .ctp-hero__img,
	.ctp-mag__dot::before,
	.ctp-mag__all .ctp-ico,
	.ctp-acc__chev,
	.ctp .ctp-issue__cover img { transition: none; }
}

/* 600-1000px: tablets keep the phone's order with a little more room, and
   the closing band goes back to the reference's side-by-side. */

/* Revision 7: mobile hero copy + closing CTA overlay. */
@media only screen and (max-width: 599px) {
	.ctp-page .ctp-hero__copy,
	.ctp-page.lang-en .ctp-hero__copy {
		padding-top: calc(var(--cp-header) + 32px);
	}

	/* Keep the benefit image vertically centred against the three-item list. */
	.ctp-page .ctp-effects {
		align-items: center;
	}

	/* Nudge theme 04's crop slightly to the right on phones only. */
	.ctp-page .ctp-theme:nth-child(4) .ctp-theme__art {
		object-position: 20% center;
	}

	.ctp-page .ctp-close {
		display: grid;
		min-height: clamp(470px, 130vw, 580px);
		align-items: stretch;
	}

	/* A shorter phone CTA gives the landscape artwork a wider crop, so more
	   of closing.webp stays visible while it still fills the whole band. */
	.ctp-page .ctp .ctp-close__art {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 15% center;
	}

	.ctp-page .ctp-close__body {
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: clamp(470px, 130vw, 580px);
		padding: 220px var(--cp-gutter) calc(30px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(
			to top,
			rgba(17, 13, 18, 0.94) 0%,
			rgba(17, 13, 18, 0.66) 34%,
			rgba(17, 13, 18, 0.22) 62%,
			rgba(17, 13, 18, 0) 82%
		);
	}

	/* Centre the App Store / Google Play row on phones. */
	.ctp-page .ctp-close .ctp-stores {
		justify-content: center;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
	.ctp-page .ctp-hero__copy { max-width: 380px; padding-left: 28px; }
	.ctp-page .ctp-mag__list { --cp-card-w: calc((100vw - 2 * var(--cp-gutter) - 4 * 10px) / 5.3); }
	.ctp-page .ctp-mag.is-grid .ctp-mag__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ctp-page .ctp-intro,
	.ctp-page .ctp-conn,
	.ctp-page .ctp-guide { padding-left: max(var(--cp-gutter), calc(50% - 300px)); padding-right: max(var(--cp-gutter), calc(50% - 300px)); }
	.ctp-page .ctp-intro { padding-left: 28px; padding-right: 28px; }
	.ctp-page .ctp-theme__body { padding: 22px; }
	.ctp-page .ctp-theme__title { font-size: 19px; }
	.ctp-page .ctp-theme__desc { font-size: 14px; }
	.ctp-page .ctp-close { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
	.ctp-page .ctp .ctp-close__art {
		grid-area: 1 / 1;
		height: auto;
	}
	.ctp-page .ctp-close__body { grid-area: 1 / 1; justify-self: end; width: 43%; padding: 20px 24px 20px 0; }
	.ctp-page .ctp-close__actions { display: flex; flex-wrap: wrap; }
	.ctp-page .ctp-close__actions .ctp-btn { min-height: 38px; }
}

/* A narrow phone (<= 359px): the four steps in two rows of two. */
@media only screen and (max-width: 359px) {
	.ctp-page .ctp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ctp-page .ctp-step:nth-child(3)::before { display: none; }
}

/* ==========================================================================
   THE WIDE WINDOW (1001px and up)

   The reference is a phone page. Given room, its own parts fall into the
   arrangement they suggest: the hero is a band with the copy on the left
   and its own 2400 x 960 picture (picked by <picture> in the markup), the
   zigzag runs at 1280px, the shelf shows six covers, and the four values
   and the four grades stand in one row each, as the reference draws them.
   The closing band is side by side again. Every rule here is a size or a
   column count - the order, the colours and the parts are the phone's.

   `--cp-side` is the page's one horizontal measure: 40px, or whatever
   centres a 1200px column. Each selector repeats `.ctp-page` so it outranks
   the phone rule it resizes whatever that rule's own weight.
   ========================================================================== */
@media only screen and (min-width: 1001px) {

	.ctp-page {
		--cp-gutter: 40px;
		--cp-side: max(40px, calc((100% - 1200px) / 2));
		--cp-header: 96px;            /* .gnb's own height on the wide window */
	}

	/* ---- 1. hero -------------------------------------------------------- */
	.ctp-page .ctp-hero { min-height: clamp(600px, 38vw, 740px); }
	.ctp-page .ctp .ctp-hero__img { object-position: 100% 0; }
	/* Fit the entire first composition to the hero height. A wide viewport
	   must never scale it to the viewport width and crop the model's head.
	   The empty left side fades into the hero background behind the copy. */
	.ctp-page .ctp .ctp-hero__photo {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		max-width: none;
		height: 100%;
		object-fit: contain;
		object-position: right top;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 24%);
		mask-image: linear-gradient(to right, transparent, #000 24%);
	}

	.ctp-page .ctp-hero__shade {
		background:
			linear-gradient(to bottom, rgba(8, 6, 6, 0.58) 0, rgba(8, 6, 6, 0.22) 110px, rgba(8, 6, 6, 0) 170px),
			linear-gradient(to top, rgba(8, 6, 6, 0.5) 0, rgba(8, 6, 6, 0) 150px),
			linear-gradient(90deg,
				rgba(9, 7, 6, 0.84) 0%,
				rgba(9, 7, 6, 0.64) 26%,
				rgba(9, 7, 6, 0.28) 42%,
				rgba(9, 7, 6, 0.06) 55%,
				rgba(9, 7, 6, 0) 62%);
	}
	.ctp-page .ctp-hero__copy,
	.ctp-page.lang-en .ctp-hero__copy {
		max-width: none;
		padding: calc(var(--cp-header) + 60px) var(--cp-side) 110px;
	}
	.ctp-page .ctp-hero__copy > * { max-width: 620px; }
	.ctp-page .ctp-hero__script,
	.ctp-page.lang-en .ctp-hero__script { font-size: 38px; }
	.ctp-page .ctp-hero__title { margin-top: 16px; font-size: 88px; }
	.ctp-page .ctp-hero__lead { margin-top: 24px; font-size: 28px; line-height: 1.4; }
	.ctp-page .ctp-hero__desc { margin-top: 18px; font-size: 17px; line-height: 1.65; }
	.ctp-page .ctp-hero__actions { flex-direction: row; gap: 14px; margin-top: 36px; }
	.ctp-page .ctp-hero__actions .ctp-btn,
	.ctp-page.lang-en .ctp-hero__actions .ctp-btn { width: auto; min-width: 250px; min-height: 58px; padding: 0 30px; font-size: 16px; }
	.ctp-page .ctp-hero__actions .ctp-ico { width: 18px; height: 18px; }
	.ctp-page .ctp-hero__pager { right: var(--cp-side); bottom: 34px; gap: 8px; font-size: 15px; }
	.ctp-page .ctp-hero__nav { width: 40px; height: 40px; }
	.ctp-page .ctp-hero__nav .ctp-ico { width: 22px; height: 22px; }
	.ctp-page .ctp-hero__bar { height: 16px; }

	/* ---- shared --------------------------------------------------------- */
	.ctp-page .ctp-eyebrow { font-size: 14px; letter-spacing: 0.08em; }
	.ctp-page .ctp-title { margin-top: 14px; font-size: 40px; line-height: 1.35; }
	.ctp-page .ctp-lede { margin-top: 16px; font-size: 16px; }
	.ctp-page .ctp-btn { min-height: 52px; font-size: 15px; }

	/* ---- 2. intro ------------------------------------------------------- */
	.ctp-page .ctp-intro { padding: 110px max(32px, calc((100% - 1280px) / 2)) 96px; }
	.ctp-page .ctp-themes { max-width: 1280px; margin: 56px auto 0; }
	.ctp-page .ctp-theme { gap: 18px; }
	.ctp-page .ctp-theme + .ctp-theme { margin-top: 18px; }
	.ctp-page .ctp .ctp-theme__art { min-height: clamp(240px, 24vw, 307px); border-radius: 0; }
	.ctp-page .ctp-theme__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 36px 44px;
		border-radius: 12px;
	}
	.ctp-page .ctp-theme__num { font-size: 15px; }
	.ctp-page .ctp-theme__title { margin-top: 8px; font-size: 26px; }
	.ctp-page .ctp-theme__desc { margin-top: 12px; font-size: 16px; line-height: 1.7; }

	/* ---- 3. magazine ---------------------------------------------------- */
	.ctp-page .ctp-mag { padding: 96px 0 76px; }
	.ctp-page .ctp-mag__head { padding: 0 var(--cp-side); }
	.ctp-page .ctp-mag__title { font-size: 60px; }
	.ctp-page .ctp-mag__desc { margin-top: 14px; font-size: 17px; }
	.ctp-page .ctp-mag__all { gap: 8px; padding: 6px 0; font-size: 16px; }
	.ctp-page .ctp-mag__all .ctp-ico { width: 18px; height: 18px; }
	/* six to the 1200px column; the percentage is the strip's inner width */
	.ctp-page .ctp-mag__list {
		--cp-card-w: calc((100% - 5 * 24px) / 6);
		gap: 24px;
		margin-top: 44px;
		padding: 0 var(--cp-side) 8px;
		scroll-padding-inline: var(--cp-side);
	}
	.ctp-page .ctp-issue__date { margin-top: 16px; font-size: 17px; }
	.ctp-page .ctp-issue__no { margin-top: 4px; font-size: 14px; }
	.ctp-page .ctp .ctp-issue__cover img { border-radius: 4px; }
	.ctp-page .ctp-issue__btn:hover .ctp-issue__cover img { transform: none; }
	.ctp-page .ctp-mag__nav { margin-top: 34px; padding: 0 var(--cp-side); }
	.ctp-page .ctp-mag__arrow {
		width: 48px;
		height: 48px;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 50%;
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}
	.ctp-page .ctp-mag__arrow:not([disabled]):hover { background: rgba(255, 255, 255, 0.08); }
	.ctp-page .ctp-mag__dot { width: 22px; height: 26px; }
	.ctp-page .ctp-mag__dot::before { width: 9px; height: 9px; }
	.ctp-page .ctp-mag__dot[aria-current="true"] { width: 34px; }
	.ctp-page .ctp-mag__dot[aria-current="true"]::before { width: 26px; }
	.ctp-page .ctp-mag.is-grid .ctp-mag__list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 40px 24px; }
	.ctp-page .ctp-mag.is-grid { padding-bottom: 96px; }

	/* ---- 4. connection: the reference's one row of four ---------------- */
	.ctp-page .ctp-conn { padding: 104px var(--cp-side) 110px; }
	.ctp-page .ctp-values { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1120px; margin: 56px auto 0; }
	.ctp-page .ctp-value,
	.ctp-page .ctp-value:nth-child(odd),
	.ctp-page .ctp-value:nth-child(-n+2) { padding: 8px 30px; border-bottom: 0; border-right: 1px solid #e7e4e1; }
	.ctp-page .ctp-value:last-child { border-right: 0; }
	.ctp-page .ctp-value__icon { width: 52px; height: 52px; }
	.ctp-page .ctp-value__title { margin-top: 20px; font-size: 20px; }
	.ctp-page .ctp-value__desc { margin-top: 12px; font-size: 15px; line-height: 1.7; }

	/* ---- 5. model guide ------------------------------------------------- */
	.ctp-page .ctp-guide { padding: 104px var(--cp-side) 110px; }
	.ctp-page .ctp-guide > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
	.ctp-page .ctp-guide .ctp-head { margin-bottom: 48px; }
	.ctp-page .ctp-acc { border-radius: 16px; }
	.ctp-page .ctp-acc + .ctp-acc { margin-top: 18px; }
	.ctp-page .ctp-acc__head { gap: 14px; padding: 26px 32px; }
	.ctp-page .ctp-acc__num,
	.ctp-page .ctp-acc__title { font-size: 22px; }
	.ctp-page .ctp-acc__chev { width: 26px; height: 26px; }
	.ctp-page .ctp-acc__body { padding: 0 32px 32px; }
	.ctp-page .ctp-acc__lede { margin-top: -6px; font-size: 15px; }

	.ctp-page .ctp-steps { gap: 30px; }
	.ctp-page .ctp-step { padding: 28px 16px 26px; border-radius: 12px; }
	.ctp-page .ctp-step + .ctp-step::before { left: -19px; top: 44px; width: 8px; height: 8px; border-top-width: 2px; border-right-width: 2px; }
	.ctp-page .ctp-step__icon { width: 38px; height: 38px; }
	.ctp-page .ctp-step__title { margin-top: 14px; font-size: 17px; }
	.ctp-page .ctp-step__desc { margin-top: 6px; font-size: 14px; line-height: 1.5; }
	.ctp-page .ctp-points { margin-top: 20px; }
	.ctp-page .ctp-points li { padding-left: 14px; font-size: 15px; }
	.ctp-page .ctp-points li::before { width: 4px; height: 4px; }
	.ctp-page .ctp-notice { gap: 10px; margin-top: 18px; padding: 15px 20px; border-radius: 10px; font-size: 14px; }
	.ctp-page .ctp-notice__icon { width: 19px; height: 19px; }

	.ctp-page .ctp-benefits__label { margin-top: 20px; font-size: 13px; }
	.ctp-page .ctp-benefits { gap: 16px; margin-top: 10px; }
	.ctp-page .ctp-benefit { padding: 28px 12px 26px; border-radius: 14px; }
	.ctp-page .ctp-benefit span { font-size: 15px; }
	.ctp-page .ctp-benefit strong { margin-top: 10px; font-size: 42px; }
	.ctp-page .ctp-foot { margin-top: 16px; font-size: 14px; }
	.ctp-page .ctp-foot--note { margin-top: 6px; }

	.ctp-page .ctp-effects { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; align-items: center; }
	.ctp-page .ctp .ctp-effects__art { aspect-ratio: 16 / 9; object-position: 50% 40%; border-radius: 12px; }
	.ctp-page .ctp-effect { grid-template-columns: 30px minmax(0, 1fr); gap: 16px; }
	.ctp-page .ctp-effect + .ctp-effect { margin-top: 22px; }
	.ctp-page .ctp-effect__icon { width: 28px; height: 28px; }
	.ctp-page .ctp-effect__title { font-size: 18px; }
	.ctp-page .ctp-effect__desc { margin-top: 5px; font-size: 15px; }

	.ctp-page .ctp-grades { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
	.ctp-page .ctp-grade { padding: 22px 20px 24px; border-radius: 14px; }
	.ctp-page .ctp-grade__head { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
	.ctp-page .ctp-grade__badge { width: 40px; height: 40px; font-size: 18px; }
	.ctp-page .ctp-grade__head strong { font-size: 18px; }
	.ctp-page .ctp-grade__head small { font-size: 13px; }
	.ctp-page .ctp-grade__desc { margin-top: 14px; font-size: 14px; line-height: 1.6; }

	.ctp-page .ctp-contact {
		grid-template-columns: minmax(0, 1fr) 196px;
		gap: 44px;
		margin-top: 26px;
		padding: 42px 44px 42px 48px;
		border-radius: 16px;
	}
	.ctp-page .ctp-contact__eyebrow { font-size: 14px; }
	.ctp-page .ctp-contact__title { margin-top: 8px; font-size: 32px; }
	.ctp-page .ctp-contact__desc { margin-top: 12px; font-size: 16px; }
	.ctp-page .ctp-contact .ctp-btn { width: auto; min-width: 360px; min-height: 58px; margin-top: 26px; padding: 0 32px; font-size: 16px; }
	.ctp-page .ctp-contact__qr { padding: 16px 14px 12px; border-radius: 12px; }
	.ctp-page .ctp-contact__qr figcaption { margin-top: 8px; font-size: 12px; }

	/* ---- 6. closing band: full photograph, copy in its empty right side -- */
	.ctp-page .ctp-close {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		padding: 0;
	}
	.ctp-page .ctp .ctp-close__art {
		grid-area: 1 / 1;
		width: 100%;
		height: auto;
		max-width: none;
	}
	.ctp-page .ctp-close__body { grid-area: 1 / 1; justify-self: end; width: 40%; margin: 0 4% 0 0; padding: 40px 0; }
	.ctp-page .ctp-close__title { font-size: 28px; }
	.ctp-page .ctp-close__title b { font-size: 46px; }
	.ctp-page .ctp-close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
	.ctp-page .ctp-close__actions .ctp-btn { min-height: 56px; padding: 0 36px; font-size: 16px; }
	.ctp-page .ctp-stores { gap: 12px; margin-top: 16px; }
	.ctp-page .ctp-store { gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 10px; }
	.ctp-page .ctp-store__mark { width: 24px; height: 24px; }
	.ctp-page .ctp .ctp-store__mark--apple { width: 23px; height: 23px; }
	.ctp-page .ctp-store__text { font-size: 18px; }
	.ctp-page .ctp-store__text small { font-size: 10.5px; }

	/* ---- the cover dialog ----------------------------------------------- */
	.ctp-page .ctp-lb__fig { padding: 70px 90px 36px; }
	.ctp-page .ctp-lb__btn { width: 52px; height: 52px; }
	.ctp-page .ctp-lb__btn--prev { left: 24px; margin-top: -26px; }
	.ctp-page .ctp-lb__btn--next { right: 24px; margin-top: -26px; }
	.ctp-page .ctp-lb__btn--close { top: 20px; right: 24px; }
}