@charset "utf-8";

/* ==========================================================================
   camtalkqa.com - the stand-alone CamTalk FAQ (2026-10-30).

   The look is camtalk.kr's renewed FAQ (customer/faq.php,
   css/camtalk-faq-mobile.css up to 1000px and css/camtalk-faq-desktop.css
   above it): its hero over the dark waves, its category blocks with the red
   mark and rose capsule, its Q rows that open in place, its chips, search,
   result line and empty state. Its values are taken as they are; what is
   new here is only what a page of its own needs - the compact header
   (instead of the main site's mega menu), the search and chips on a phone
   too, and a short footer.

   One breakpoint, the main site's: up to 1000px the phone, from 1001px
   the wide window.

   THE SYSTEM (as on camtalk.kr)
     red      phone #d4112f labels / Q, wide #f5123f; discs #ff2f55 -> #e00b37
     rose     #fdebee phone, #fff0f3 wide - capsules and Q discs
     ink      #1b1c21 / #17181d questions, #575a63 / #4a4c55 answers
     grounds  phone: a warm #f8f6f4 page, white blocks; wide: white
     type     Paperozi (Paperlogy), as the main site
   ========================================================================== */

@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* ======================================================================
   0. BASE
   ====================================================================== */

:root {
	--fq-red: #d4112f;
	--fq-red-hi: #f5123f;
	--fq-rose: #fdebee;
	--fq-ink: #1b1c21;
	--fq-ink-2: #575a63;
	--fq-mute: #8b8e97;
	--fq-line: #ececf0;
	--fq-line-2: #f1f1f4;
	--fq-ground: #f8f6f4;
	--fq-gutter: 15px;
	--fq-top: 56px;                             /* the header's height */
	--fq-w: 1160px;                             /* the wide column */
	--fq-ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-anchor: none;                      /* the script keeps the tapped row in place itself */
	scroll-padding-top: calc(var(--fq-top) + 12px);
}
body {
	margin: 0;
	min-width: 320px;
	font-family: "Paperozi", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fq-ink);
	background: var(--fq-ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
:where(ul) { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
:where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fq-red); outline-offset: 2px; }
mark {
	background: linear-gradient(transparent 55%, rgba(245, 18, 63, .18) 55%);
	color: inherit;
	border-radius: 2px;
}
.cfq-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.qa-skip {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 20;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--fq-ink);
	color: #fff;
	font-size: 14px;
}
.qa-skip:focus { top: 8px; }

/* ======================================================================
   1. THE HEADER - white, compact, pinned
   ====================================================================== */

.qa-top {
	position: sticky;
	top: 0;
	z-index: 10;
	height: var(--fq-top);
	border-bottom: 1px solid #e9e7e5;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
.qa-top__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 0 max(var(--fq-gutter), env(safe-area-inset-right)) 0 max(var(--fq-gutter), env(safe-area-inset-left));
}
.qa-logo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	color: #333;
	white-space: nowrap;
}
/* the main site's wordmark (.gnb .logo a, in its white state) */
.qa-logo__word {
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
}
.qa-logo__word b { font-weight: 700; color: #cc0c0c; }
.qa-logo__tag {
	padding: 4px 7px 3px;
	border-radius: 999px;
	background: var(--fq-rose);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--fq-red);
}
.qa-top__end {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.qa-lang {
	display: inline-flex;
	padding: 2px;
	border: 1px solid #e3e4e9;
	border-radius: 999px;
	background: #fff;
}
.qa-lang button {
	min-width: 40px;
	height: 28px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #6f727c;
	transition: background-color .2s, color .2s;
}
.qa-lang button[aria-pressed="true"] { background: var(--fq-ink); color: #fff; }
.qa-home {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 11px 0 12px;
	border: 1px solid #e3e4e9;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fq-ink);
	white-space: nowrap;
	transition: border-color .2s, background-color .2s;
}
.qa-home:hover { border-color: #cfd1d8; background: #fafafb; }
.qa-home svg { width: 14px; height: 14px; color: var(--fq-red); }
.qa-home__long { display: none; }

/* ======================================================================
   2. HERO - the dark waves, the words in the middle (phone: a square)
   ====================================================================== */

.cfq-hero {
	position: relative;
	z-index: 0;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: min(84vw, 540px);
	padding: 20px var(--fq-gutter);
	text-align: center;
	background: #0c0b0d;
	color: #fff;
	overflow: hidden;
}
.cfq-hero picture { display: contents; }
.cfq-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.cfq-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(80% 42% at 50% 50%, rgba(8, 7, 9, .74) 0%, rgba(8, 7, 9, .44) 55%, rgba(8, 7, 9, 0) 100%);
}
.cfq-hero__words { position: relative; max-width: 640px; }
.cfq-hero__eyebrow {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .34em;
	margin-right: -.34em;                       /* the last letter's own spacing: optically centred */
	color: #ff4a6b;                             /* the red, lifted for the dark ground */
	white-space: nowrap;
}
.cfq-hero__title {
	margin-top: 12px;
	font-size: clamp(32px, 9.4vw, 44px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.04em;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	word-break: keep-all;
	text-wrap: balance;
}
.cfq-hero__desc {
	margin-top: 11px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, .86);
	word-break: keep-all;
	text-wrap: pretty;
}

/* ======================================================================
   2b. CAMTALK SECURITY - camtalk.kr's block (assets/security.css is its
   css/camtalk-security.css, unchanged), fitted to this page's column.
   Only where it sits and how wide it is change here, plus, on a phone,
   the few lines the original sets under 12px.
   ====================================================================== */

.cfq .csec {
	padding: 16px 0 0;
	background: none;
}
.cfq .csec__card { width: calc(100% - 2 * var(--fq-gutter)); }

@media (max-width: 1000px) {
	/* the kicker at 12px (the original's 9px is too small to read) still on
	   the wordmark's line, with tighter tracking */
	.cfq .csec__kicker { font-size: 12px; letter-spacing: .12em; }
	.cfq .csec__badges li { font-size: 12px; }
	.cfq .csec__dd-note,
	.cfq .csec__trust { font-size: 12px; }
	.cfq .csec__trust { white-space: normal; letter-spacing: .24em; }
	.cfq .csec__disclaimer { font-size: 12px; }
	.cfq .csec__sys-text { font-size: 12.5px; }
}
/* too narrow for one line: the kicker goes under the wordmark, without its
   divider (a divider at the start of a line would hang in the air) */
@media (max-width: 419px) {
	.cfq .csec__brand { flex-direction: column; align-items: flex-start; gap: 8px; }
	.cfq .csec__kicker { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* four badges need room: two by two until there is */
@media (max-width: 479px) {
	.cfq .csec__badges { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
	.cfq .csec__badges li:nth-child(3) { border-left: 0; }
}

/* ======================================================================
   3. TOOLS - the search, then the categories
   ====================================================================== */

.cfq-tools {
	position: relative;
	z-index: 1;
	margin: 16px var(--fq-gutter) 0;
	padding: 10px;
	border: 1px solid #eeebe8;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 28px -18px rgba(70, 45, 35, .35);
}
.cfq-search { position: relative; }
.cfq-search__icon {
	position: absolute;
	left: 13px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: #6f727c;
	pointer-events: none;
}
.cfq-search__input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 44px 0 40px;
	border: 1px solid #e6e7ec;
	border-radius: 12px;
	background: #f8f8fa;
	font: inherit;
	font-size: 16px;                            /* 16px: iOS does not zoom into the field */
	letter-spacing: -0.02em;
	color: var(--fq-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.cfq-search__input::placeholder { color: #9a9ca5; opacity: 1; }
.cfq-search__input::-webkit-search-cancel-button,
.cfq-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cfq-search__input:hover { border-color: #d9dbe1; }
.cfq-search__input:focus {
	outline: none;
	border-color: #f2a3b4;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(245, 18, 63, .08);
}
.cfq-search__clear {
	position: absolute;
	right: 4px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border-radius: 50%;
	color: #6f727c;
}
.cfq-search__clear:hover { background: #eeeff2; color: var(--fq-ink); }
.cfq-search__clear svg { width: 18px; height: 18px; }

/* the chips wrap: every category is in view, none cut at the edge */
.cfq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.cfq-chip {
	min-height: 34px;
	padding: 6px 13px;
	border: 1px solid #e3e4e9;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--fq-ink);
	text-align: center;
	word-break: keep-all;
	transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.cfq-chip:hover { border-color: #cfd1d8; background: #fafafb; }
.cfq-chip[aria-pressed="true"],
.cfq-chip[aria-pressed="true"]:hover {
	border-color: var(--fq-red-hi);
	background: var(--fq-red-hi);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 14px -6px rgba(245, 18, 63, .55);
}

.cfq-result {
	margin: 14px var(--fq-gutter) 0;
	padding: 0 3px;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--fq-mute);
	word-break: keep-all;
}

/* ======================================================================
   4. CATEGORIES - one white block each (camtalk.kr's phone)
   ====================================================================== */

.cfq-groups {
	display: grid;
	gap: 15px;
	padding: 16px var(--fq-gutter) 36px;
}
.cfq-result:not([hidden]) + .cfq-groups { padding-top: 10px; }
.cfq-group {
	scroll-margin-top: calc(var(--fq-top) + 12px);
	padding: 13px 12px 12px;
	border: 1px solid #eeebe8;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 20px -16px rgba(70, 45, 35, .22);
}
.cfq-group__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 100%;
	min-height: 32px;
	padding-right: 14px;
	border-radius: 999px;
	background: var(--fq-rose);
}
.cfq-group__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(150deg, #ff2f55 0%, #e00b37 100%);
	box-shadow: 0 3px 8px -3px rgba(224, 11, 55, .55);
	color: #fff;
}
.cfq-group__icon svg { width: 17px; height: 17px; }
.cfq-group__title {
	padding: 5px 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--fq-red);
	word-break: keep-all;
}
.cfq-group__desc {
	margin-top: 7px;
	padding-left: 2px;
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--fq-mute);
	word-break: keep-all;
	text-wrap: pretty;
}

.cfq-list {
	display: grid;
	gap: 7px;
	margin-top: 11px;
}
.cfq-item {
	scroll-margin-top: calc(var(--fq-top) + 12px);
	border: 1px solid #ebebee;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .03);
	word-break: keep-all;
	overflow-wrap: anywhere;
	transition: border-color .2s;
}
.cfq-item.is-open { border-color: #f4d3da; }
.cfq-item__h { font: inherit; }

/* the whole row is the button; a long question wraps and the row grows */
.cfq-q {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px 8px 8px;
	border-radius: 11px;
	text-align: left;
}
.cfq-q__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fq-rose);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	color: var(--fq-red);
}
.cfq-q__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.03em;
	color: var(--fq-ink);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cfq-q__chev {
	flex: none;
	width: 16px;
	height: 16px;
	color: #9a9ca4;
	transition: transform .26s var(--fq-ease), color .2s;
}
.cfq-item.is-open .cfq-q__chev { transform: rotate(180deg); color: var(--fq-red); }

/* the answer, in the same card, under its question (grid rows 0fr -> 1fr) */
.cfq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s var(--fq-ease);
}
.cfq-item.is-open .cfq-a { grid-template-rows: 1fr; }
.cfq-a__in {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear .28s;
}
.cfq-item.is-open .cfq-a__in {
	visibility: visible;
	transition-delay: 0s;
}
.cfq-a__body {
	margin: 0 12px 0 43px;                      /* under the question's words */
	padding: 9px 0 13px;
	border-top: 1px solid #f3eeee;
	font-size: 14px;
	line-height: 1.68;
	letter-spacing: -0.02em;
	color: var(--fq-ink-2);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cfq-a__body p + p,
.cfq-a__body ul,
.cfq-a__body ol { margin-top: 8px; }
.cfq-a__body ul { list-style: disc; padding-left: 18px; }
.cfq-a__body ol { list-style: decimal; padding-left: 20px; }
.cfq-a__body a {
	color: var(--fq-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cfq-item.is-instant .cfq-a,
.cfq-item.is-instant .cfq-a__in,
.cfq-item.is-instant .cfq-q__chev { transition: none !important; }

/* ---- the empty result ---------------------------------------------------- */

.cfq-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 16px var(--fq-gutter) 36px;
	padding: 40px 20px 36px;
	border: 1px dashed #dcd8d4;
	border-radius: 16px;
	background: #fff;
	text-align: center;
}
.cfq-empty__icon { width: 40px; height: 40px; color: #c3c5cc; }
.cfq-empty__title {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--fq-ink);
	word-break: keep-all;
}
.cfq-empty__desc {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: -0.02em;
	color: var(--fq-mute);
	word-break: keep-all;
	text-wrap: balance;
}
.cfq-empty__reset {
	min-height: 44px;
	margin-top: 18px;
	padding: 0 22px;
	border: 1px solid #f0c4cc;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--fq-red-hi);
	transition: background-color .2s;
}
.cfq-empty__reset:hover { background: #fff5f7; }
.cfq.is-empty .cfq-groups { padding-bottom: 0; }

/* ---- without the script: every answer open, no tools ------------------ */

.no-js .cfq-tools { display: none; }
.no-js .cfq-groups { padding-top: 20px; }
.no-js .cfq-a { grid-template-rows: 1fr; }
.no-js .cfq-a__in { visibility: visible; }
.no-js .cfq-q { cursor: default; }
.no-js .cfq-q__chev { display: none; }

/* ======================================================================
   5. FOOTER
   ====================================================================== */

.qa-foot {
	border-top: 1px solid #ebe7e3;
	background: #f2efec;
	color: #7c7f88;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.01em;
}
.qa-foot__in {
	padding: 22px var(--fq-gutter) calc(26px + env(safe-area-inset-bottom));
}
.qa-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.qa-foot__links a {
	font-weight: 600;
	color: #4a4c55;
	white-space: nowrap;
}
.qa-foot__links a:hover { color: var(--fq-red); text-decoration: underline; text-underline-offset: 2px; }
.qa-foot__company {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	margin-top: 12px;
}
.qa-foot__company span { overflow-wrap: anywhere; }
.qa-foot__copy { margin-top: 6px; }

/* ---- ENG: longer words ------------------------------------------------- */

.lang-en .cfq-q__text { letter-spacing: -0.01em; word-break: normal; overflow-wrap: break-word; }
.lang-en .cfq-group__title { letter-spacing: -0.015em; }
.lang-en .cfq-hero__title { letter-spacing: -0.03em; }
.lang-en .cfq-a__body,
.lang-en .cfq-group__desc,
.lang-en .cfq-hero__desc,
.lang-en .cfq-result,
.lang-en .cfq-empty__desc { letter-spacing: -0.005em; }
.lang-en .cfq-a__body { word-break: normal; overflow-wrap: break-word; }
.lang-en .cfq-chip { letter-spacing: -0.01em; }

/* ---- phones: the header's three parts keep clear of each other in ENG too */

.qa-logo { flex: none; }                       /* never squeezed: the tag goes first */

@media (max-width: 599px) {
	.qa-top__end { gap: 6px; }
	.qa-lang button { min-width: 36px; padding: 0 7px; }
	.qa-home { padding: 0 9px 0 11px; }
}
/* the Q&A tag where the row has no room for it ("Website" is longer than 홈페이지) */
@media (max-width: 419px) {
	.lang-en .qa-logo__tag { display: none; }
}
@media (max-width: 389px) {
	.qa-logo__tag { display: none; }
}

/* ---- the narrowest phones ---------------------------------------------- */

@media (max-width: 374px) {
	:root { --fq-gutter: 12px; }
	.cfq-a__body { margin-left: 12px; }
}
@media (max-width: 359px) {
	.qa-home { justify-content: center; width: 34px; padding: 0; }
	.qa-home__short { display: none; }
}

/* a tablet held either way: the phone's layout, given room */
@media (min-width: 600px) and (max-width: 1000px) {
	:root { --fq-gutter: 24px; --fq-top: 64px; }
	.qa-home__long { display: inline; }
	.qa-home__short { display: none; }
	.cfq-hero { height: 440px; }
	.cfq-tools, .cfq-result, .cfq-groups, .cfq-empty, .cfq .csec__card { max-width: 760px; }
	.cfq-tools, .cfq-result, .cfq-empty { margin-left: auto; margin-right: auto; }
	.cfq-tools { width: calc(100% - 2 * var(--fq-gutter)); }
	.cfq-result, .cfq-empty { width: calc(100% - 2 * var(--fq-gutter)); }
	.cfq-groups { margin: 0 auto; }
	.cfq-q__text { font-size: 15px; }
	.cfq-a__body { font-size: 15px; }
}

/* ======================================================================
   6. THE WIDE WINDOW (from 1001px) - camtalk.kr's desktop FAQ
   ====================================================================== */

@media only screen and (min-width: 1001px) {

	:root {
		--fq-red: #f5123f;
		--fq-rose: #fff0f3;
		--fq-ink: #17181d;
		--fq-ink-2: #4a4c55;
		--fq-mute: #8b8e98;
		--fq-gutter: 40px;
		--fq-top: 72px;
	}
	body { background: #fff; }

	.qa-top { border-bottom-color: var(--fq-line); }
	.qa-top__in {
		width: calc(100% - 2 * var(--fq-gutter));
		max-width: var(--fq-w);
		margin: 0 auto;
		padding: 0;
	}
	.qa-logo { gap: 9px; }
	.qa-logo__word { font-size: 20px; }
	.qa-logo__tag { font-size: 12px; padding: 5px 9px 4px; }
	.qa-top__end { gap: 12px; }
	.qa-lang button { min-width: 46px; height: 32px; font-size: 13px; }
	.qa-home { height: 38px; padding: 0 14px 0 16px; font-size: 14px; }
	.qa-home__long { display: inline; }
	.qa-home__short { display: none; }

	/* Update Note's band, as camtalk.kr's desktop FAQ */
	.cfq-hero {
		height: clamp(320px, 25vw, 380px);
		padding: 0 var(--fq-gutter);
	}
	.cfq-hero__img { object-position: 50% 34%; }
	.cfq-hero__shade {
		background:
			radial-gradient(46% 62% at 50% 52%, rgba(8, 7, 9, .72) 0%, rgba(8, 7, 9, .44) 55%, rgba(8, 7, 9, 0) 100%),
			linear-gradient(180deg, rgba(8, 7, 9, 0) 60%, rgba(8, 7, 9, .35) 100%);
	}
	.cfq-hero__words { max-width: 900px; }
	.cfq-hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin: 0;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.01em;
		color: rgba(255, 255, 255, .88);
	}
	.cfq-hero__eyebrow::before {
		content: "";
		flex: none;
		width: 20px;
		height: 6px;
		border-radius: 3px;
		background: linear-gradient(90deg, #f5123f, #ff7f96);
		box-shadow: 0 0 12px rgba(245, 18, 63, .6);
	}
	.cfq-hero__title {
		margin-top: 10px;
		font-size: clamp(42px, 3.4vw, 52px);
		line-height: 1.12;
		text-shadow: none;
	}
	.cfq-hero__desc { margin-top: 12px; font-size: 18px; line-height: 1.5; }

	/* the column */
	.cfq-tools,
	.cfq-result,
	.cfq-groups,
	.cfq-empty {
		width: calc(100% - 2 * var(--fq-gutter));
		max-width: var(--fq-w);
		margin-left: auto;
		margin-right: auto;
	}

	/* the security block: as wide as the column, 36px under the hero */
	.cfq .csec { padding-top: 36px; }
	.cfq .csec__card {
		width: calc(100% - 2 * var(--fq-gutter));
		max-width: var(--fq-w);
	}

	.cfq-tools {
		margin-top: 28px;
		padding: 12px;
		border-color: var(--fq-line);
		border-radius: 18px;
		box-shadow: 0 1px 2px rgba(20, 20, 30, .03), 0 14px 34px -26px rgba(20, 20, 30, .22);
	}
	.cfq-search__icon { left: 16px; width: 19px; height: 19px; margin-top: -9.5px; }
	.cfq-search__input { height: 50px; padding-left: 46px; font-size: 16px; }
	.cfq-filters { gap: 6px; margin-top: 12px; }
	.cfq-chip {
		min-height: 42px;
		padding: 0 20px;
		font-size: 15px;
		white-space: nowrap;
	}

	.cfq-result {
		margin-top: 18px;
		padding: 0 4px;
		font-size: 14px;
	}

	.cfq-groups {
		gap: 24px;
		margin-top: 24px;
		padding: 0 0 96px;
	}
	.cfq-result:not([hidden]) + .cfq-groups { margin-top: 12px; padding-top: 0; }
	.cfq-group {
		padding: 0;
		border-color: var(--fq-line);
		border-radius: 18px;
		box-shadow: 0 1px 2px rgba(20, 20, 30, .03), 0 14px 34px -26px rgba(20, 20, 30, .22);
		overflow: hidden;
	}
	.cfq-group__head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		align-items: center;
		padding: 28px 32px 24px;
		border-bottom: 1px solid var(--fq-line-2);
		background: linear-gradient(180deg, #fffafb 0%, #fff 100%);
	}
	.cfq-group__badge { display: contents; }
	.cfq-group__icon {
		grid-row: 1 / span 2;
		width: 48px;
		height: 48px;
		box-shadow: 0 6px 14px -6px rgba(224, 11, 55, .55);
	}
	.cfq-group__icon svg { width: 24px; height: 24px; }
	.cfq-group__title {
		grid-column: 2;
		padding: 0;
		font-size: 22px;
		font-weight: 800;
		letter-spacing: -0.04em;
		color: var(--fq-ink);
	}
	.cfq-group__desc {
		grid-column: 2;
		margin-top: 4px;
		padding: 0;
		font-size: 16px;
		line-height: 1.5;
	}

	.cfq-list { display: block; margin: 0; }
	.cfq-item {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transition: background-color .2s;
	}
	.cfq-item + .cfq-item { border-top: 1px solid var(--fq-line-2); }
	.cfq-item.is-open { background: #fffbfc; }

	.cfq-q {
		gap: 16px;
		min-height: 76px;
		padding: 18px 32px;
		border-radius: 0;
	}
	.cfq-q:hover .cfq-q__text { color: #000; }
	.cfq-q:focus-visible { outline-offset: -3px; }
	.cfq-q__mark { width: 34px; height: 34px; font-size: 16px; }
	/* 20 at 1001, 20.6 at 1440, 21.4 at 1920 */
	.cfq-q__text {
		font-size: clamp(20px, .16vw + 18.3px, 21.5px);
		transition: color .2s;
	}
	.cfq-q__chev {
		width: 36px;
		height: 36px;
		padding: 9px;
		border-radius: 50%;
		background: #f4f4f6;
		color: #6f727c;
		transition: transform .26s var(--fq-ease), color .2s, background-color .2s;
	}
	.cfq-q:hover .cfq-q__chev { background: #eeeff2; color: var(--fq-ink); }
	.cfq-item.is-open .cfq-q__chev { background: var(--fq-rose); color: var(--fq-red); }

	.cfq-a__body {
		margin: 0 84px 0 82px;
		padding: 2px 0 26px;
		border-top: 0;
		font-size: 17.5px;
		line-height: 1.75;
	}
	.cfq-a__body p + p,
	.cfq-a__body ul,
	.cfq-a__body ol { margin-top: 10px; }
	.cfq-a__body a { text-underline-offset: 3px; }

	.cfq-empty {
		margin-top: 24px;
		margin-bottom: 96px;
		padding: 56px 32px 52px;
		border-color: #dfe0e5;
		border-radius: 18px;
	}
	.cfq-empty__icon { width: 48px; height: 48px; }
	.cfq-empty__title { margin-top: 14px; font-size: 20px; }
	.cfq-empty__desc { margin-top: 8px; font-size: 16px; }
	.cfq-empty__reset { margin-top: 20px; padding: 0 24px; font-size: 15px; }

	.qa-foot { background: #fafafb; border-top-color: var(--fq-line); font-size: 13px; }
	.qa-foot__in {
		width: calc(100% - 2 * var(--fq-gutter));
		max-width: var(--fq-w);
		margin: 0 auto;
		padding: 32px 0 40px;
	}

	.lang-en .cfq-group__title { letter-spacing: -0.02em; }
	.lang-en .cfq-q__text { letter-spacing: -0.012em; }

	@media (max-width: 1199px) {
		:root { --fq-gutter: 32px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.cfq-a,
	.cfq-a__in,
	.cfq-q__chev,
	.cfq-q__text,
	.cfq-item,
	.cfq-chip,
	.cfq-search__input,
	.cfq-empty__reset,
	.qa-lang button { transition: none !important; }
}