@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/faq.php - FAQ, the phone.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint. This file is linked by inc/top.php on this
   page only, so the few rules for the shared bar (.gnb) below reach no other
   page; everything else is under `.cfq-page` (a class only this page puts on
   <body>, js/camtalk-faq-mobile.js) or `.cfq`, the page's own <main>, which a
   wide window never shows.

   THE SYSTEM
     red      #d4112f labels and Q, #f5123f -> #e00b37 the category discs
     rose     #fdebee capsules and the Q discs
     ink      #1b1c21 questions, #575a63 answers, #8b8e97 the category lines
     grounds  a warm #f8f6f4 page, white blocks; the hero a warm light wash
     lines    #eeebe8 block edges, #ebebee question edges
     type     the site's Paperozi; "FAQ" alone is Playfair Display (only its
              three letters are fetched, phone only - inc/top.php)
     sizes    at 390: gutter 15, block padding 12-13, blocks 15 apart,
              questions 7 apart, corners 16 / 11, questions and answers
              13.5px, the category name 14.5px, "FAQ" 56px

   STABILITY. Ordinary vertical scrolling, no scroll handler. Every box has
   its size before its picture arrives. Answers open by animating grid rows
   from 0fr to 1fr (no height measured in script); reduced motion makes
   that instant.
   ========================================================================== */

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

	/* ---- the shared bar, white from the first frame ----------------------------
	   js/common.js gives .gnb the class gnb_invert (white ground, dark type,
	   red "Cam") past 150px and takes it away above. On this page the phone's
	   bar looks like that in BOTH states, so it is white at the very top, on
	   the first frame (this sheet is render-blocking) and on the way back up.
	   The class itself is never touched; gnb_fixed still pins the bar past
	   150px as on every page. Same values as common.css's .gnb_invert. */
	.gnb {
		border-bottom-color: #e5e5e5;
		color: #333;
		background-color: #fff;
	}
	.gnb .right img { filter: invert(100%); opacity: .2; }
	.gnb .logo a b { color: #cc0c0c; }

	/* the page moves itself by the height a closed answer gave back (see the
	   script); the browser's own scroll anchoring must not move it twice */
	html { overflow-anchor: none; }

	.cfq-page {
		--fq-red: #d4112f;
		--fq-rose: #fdebee;
		--fq-ink: #1b1c21;
		--fq-ink-2: #575a63;
		--fq-mute: #8b8e97;
		--fq-ground: #f8f6f4;
		--fq-gutter: 15px;
		--fq-header: 66px;                          /* .gnb's height on the phone */
		--fq-ease: cubic-bezier(.22, .7, .2, 1);
	}

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

	.cfq-page .ct-faq-desktop { display: none; }

	.cfq-page .cfq[hidden] { display: block; }
	.cfq {
		color: var(--fq-ink);
		background: var(--fq-ground);
		overflow: hidden;
	}
	.cfq img { display: block; max-width: none; }
	:where(.cfq) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
	.cfq ul { list-style: none; }
	.cfq li { word-break: keep-all; overflow-wrap: anywhere; }
	:where(.cfq) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cfq :focus-visible {
		outline: 2px solid var(--fq-red);
		outline-offset: 2px;
	}

	/* ======================================================================
	   1. HERO - a square of dark waves, the words at the left
	   ====================================================================== */

	/* It starts under the bar (absolute at the top of the page), so the
	   bar's 66px are counted once, as this margin. Since 2026-10-13 it is a
	   SQUARE (as tall as the screen is wide, capped for a tablet) of the
	   dark waves shared with 공지사항 and 업데이트노트. The words are one
	   group in the middle of the square, both ways, centred lines (the bar
	   above is not part of that area: the square starts under it). */
	.cfq-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: min(100vw, 620px);
		margin-top: var(--fq-header);
		margin-bottom: 16px;
		padding: 20px var(--fq-gutter);
		text-align: center;
		background: #0c0b0d;
		color: #fff;
		overflow: hidden;
	}
	.cfq .cfq-hero__img {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;                          /* a square file in a square box: the whole drawing */
		object-position: 50% 50%;
	}
	/* readability only: a soft dark pool under the words in the middle */
	.cfq-hero__shade {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			radial-gradient(78% 36% at 50% 50%, rgba(8, 7, 9, .72) 0%, rgba(8, 7, 9, .42) 55%, rgba(8, 7, 9, 0) 100%);
	}
	.cfq-hero__words { position: relative; }
	.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: 7px;
		font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
		font-size: clamp(60px, 16.4vw, 70px);      /* 64px at 390: the square is taller than the old band */
		font-weight: 700;
		line-height: .98;
		letter-spacing: -0.01em;
		color: #fff;
		text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	}
	.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;
	}

	/* ======================================================================
	   2. CATEGORIES - one white block each, one after another
	   ====================================================================== */

	.cfq-groups {
		display: grid;
		gap: 15px;
		padding: 4px var(--fq-gutter) 32px;
	}
	.cfq-group {
		padding: 13px 12px 12px;
		border: 1px solid #eeebe8;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 8px 20px -16px rgba(70, 45, 35, .22);
	}

	/* the head: a red disc with the white mark, the name on a rose capsule
	   that starts under the disc, and the short line below */
	.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 {
		border: 1px solid #ebebee;
		border-radius: 11px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20, 20, 30, .03);
		transition: border-color .2s;
	}
	.cfq-item.is-open { border-color: #f4d3da; }

	/* 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: 42px;
		padding: 7px 12px 7px 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: 13.5px;
		font-weight: 600;
		line-height: 1.42;
		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 */
	.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: 13.5px;
		line-height: 1.65;
		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 {
		display: inline;
		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; }

	/* ---- ENG: longer words, same sizes ---------------------------------------- */

	.lang-en .cfq-q__text { letter-spacing: -0.01em; }
	.lang-en .cfq-group__title { letter-spacing: -0.015em; }
	.lang-en .cfq-a__body,
	.lang-en .cfq-group__desc,
	.lang-en .cfq-hero__desc { letter-spacing: -0.005em; }

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

	@media (max-width: 374px) {
		.cfq-a__body { margin-left: 12px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.cfq-a,
		.cfq-a__in,
		.cfq-q__chev,
		.cfq-item { transition: none !important; }
	}
}