@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/raw.php - 법적고지, the phone.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint, and under `.crw-page` (a class only this
   page puts on <body>, js/camtalk-raw-mobile.js) or `.crw`, the page's own
   <main>, which a wide window never shows. The shared bar is not restyled:
   it is the site's transparent one over the dark hero and turns white past
   150px (js/common.js), as on every page.

   THE SYSTEM
     ink      #111214 titles, #3b3d44 text, #6b6e76 lines under titles,
              #8a8c93 the spaced eyebrows
     graphite #1c1d21 the open document, the ① discs
     greys    #f3f3f5 the documents' keys, #f5f5f7 item panels,
              #ececef edges
     type     the site's Paperozi
     sizes    at 390: gutter 16, bar + hero 196, hero title 32, intro 22,
              document title 25, chapter 17, article 16, text 14 / 1.62,
              keys 32 tall in three columns, cards 12 radius, 11 apart

   STABILITY. Ordinary vertical scrolling: no fixed ground, no parallax, no
   pinned section. The hero's box is sized before its picture arrives. The
   document is there at once; only a card's own open / close moves (grid
   rows 0fr <-> 1fr), and reduced motion makes that instant.
   ========================================================================== */

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

	/* ---- the shared bar, white from the first frame (2026-10-13) ---------------
	   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 linked by this page
	   only) and on the way back up, for every ?pn=. The class itself is never
	   touched - no timer, no script; gnb_fixed still pins the bar past 150px
	   as on every page. Same values as common.css's .gnb_invert, as on
	   공지사항 / 업데이트노트 / FAQ. */
	.gnb {
		border-bottom-color: #e5e5e5;
		color: #333;
		background-color: #fff;
	}
	.gnb .right img { filter: invert(100%); opacity: .2; }
	.gnb .logo a b { color: #cc0c0c; }

	.crw-page {
		--rw-ink: #111214;
		--rw-text: #3b3d44;
		--rw-mute: #6b6e76;
		--rw-eyebrow: #8a8c93;
		--rw-dark: #1c1d21;
		--rw-line: #ececef;
		--rw-gutter: 16px;
		--rw-header: 66px;                          /* .gnb's height on the phone */
		--rw-ease: cubic-bezier(.22, .7, .2, 1);
	}

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

	.crw-page .ct-raw-desktop { display: none; }

	.crw-page .crw[hidden] { display: block; }
	.crw {
		position: relative;
		z-index: 0;
		isolation: isolate;                         /* never ties with the bar (z-index 1) */
		color: var(--rw-ink);
		background: #fff;
		overflow: hidden;
	}
	.crw img { display: block; max-width: none; }
	:where(.crw) :where(h1, h2, h3, h4, h5, p, ul, ol, li) { margin: 0; padding: 0; }
	.crw ul { list-style: none; }
	:where(.crw) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.crw a { -webkit-tap-highlight-color: transparent; }
	.crw :focus-visible {
		outline: 2px solid var(--rw-dark);
		outline-offset: 2px;
	}
	.crw-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* ======================================================================
	   1. HERO - a square under the white bar
	   ====================================================================== */

	/* It starts under the bar (absolute at the top of the page), so the
	   bar's 66px are counted once, as this margin. A SQUARE since
	   2026-10-13 (as tall as the screen is wide, capped for a tablet): the
	   crumbs at its top, the title and LEGAL NOTICE in its middle. */
	.crw-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		height: min(100vw, 620px);
		margin-top: var(--rw-header);
		padding: 13px var(--rw-gutter) 13px;
		background: #1d1d20;
		color: #fff;
		overflow: hidden;
	}
	.crw-hero__img {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;                          /* the square dark waves shared with 공지사항 / 업데이트노트 / FAQ: the whole drawing */
		object-position: 50% 50%;
	}
	/* readability only (the old graphite picture's full veil would bury
	   these waves): a soft dark pool under the words in the middle, where
	   the red line crosses, and a light one under the crumbs */
	.crw-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(72% 30% at 50% 47%, rgba(8, 7, 9, .66) 0%, rgba(8, 7, 9, .38) 55%, rgba(8, 7, 9, 0) 100%),
			linear-gradient(180deg, rgba(8, 7, 9, .45) 0, rgba(8, 7, 9, 0) 70px);
	}

	.crw-crumbs {
		display: flex;
		align-items: center;
		gap: 7px;
		min-height: 20px;
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: rgba(255, 255, 255, .74);
		white-space: nowrap;
	}
	.crw-crumbs__home {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		margin: -2px -4px -2px -5px;
		color: #fff;
	}
	.crw-crumbs__home svg { width: 15px; height: 15px; }
	.crw-crumbs__bar {
		flex: none;
		width: 1px;
		height: 10px;
		background: rgba(255, 255, 255, .3);
	}
	.crw-crumbs__sep {
		flex: none;
		width: 11px;
		height: 11px;
		color: rgba(255, 255, 255, .6);
	}
	.crw-crumbs__here { font-weight: 700; color: #fff; }

	.crw-hero__words {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: auto 0;                             /* the middle of the square, below the crumbs */
		padding-bottom: 20px;                       /* optical middle: the crumbs weigh on the top */
		text-align: center;
	}
	.crw-hero__title {
		font-size: clamp(32px, 8.7vw, 36px);       /* 34px at 390: the square is taller than the old band */
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.03em;
		color: #fff;
		word-break: keep-all;
	}
	.crw-hero__eyebrow {
		margin-top: 9px;
		margin-right: -.46em;                       /* the last letter's own spacing */
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .46em;
		color: rgba(255, 255, 255, .62);
		white-space: nowrap;
	}

	/* ======================================================================
	   2. INTRO - on the white page, left
	   ====================================================================== */

	.crw-body { padding: 0 var(--rw-gutter) 34px; }

	.crw-eyebrow {
		font-size: 10px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: .3em;
		color: var(--rw-eyebrow);
		text-transform: uppercase;
	}
	.crw-intro { padding: 26px 2px 0; }
	.crw-intro__title {
		margin-top: 9px;
		font-size: 22px;
		font-weight: 800;
		line-height: 1.38;
		letter-spacing: -0.04em;
		color: var(--rw-ink);
		word-break: keep-all;
	}
	.crw-intro__desc {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.55;
		letter-spacing: -0.025em;
		color: var(--rw-mute);
		word-break: keep-all;
	}

	/* ======================================================================
	   3. THE DOCUMENTS - one panel, three columns
	   ====================================================================== */

	.crw-docs {
		margin-top: 18px;
		padding: 6px;
		border: 1px solid var(--rw-line);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 8px 20px -14px rgba(20, 20, 26, .2);
	}
	.crw-docs__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 5px;
	}
	.crw-docs__list li { display: flex; min-width: 0; }
	.crw-docbtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2px;
		width: 100%;
		min-height: 32px;
		padding: 6px 5px 6px 8px;
		border-radius: 8px;
		background: #f3f3f5;
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: #2a2b30;
		text-decoration: none;
		transition: background-color .15s, color .15s;
	}
	.crw-docbtn__name {
		min-width: 0;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.crw-docbtn__chev {
		flex: none;
		width: 9px;
		height: 9px;
		color: #8b8d94;
	}
	.crw-docbtn[aria-current="page"] {
		background: var(--rw-dark);
		color: #fff;
		font-weight: 700;
	}
	.crw-docbtn[aria-current="page"] .crw-docbtn__chev { color: rgba(255, 255, 255, .8); }

	/* ======================================================================
	   4. THE OPEN DOCUMENT
	   ====================================================================== */

	.crw-doc { margin-top: 26px; }
	.crw-doc__head { padding: 0 2px; }
	.crw-doc__title {
		margin-top: 7px;
		font-size: 25px;
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.04em;
		color: var(--rw-ink);
		word-break: keep-all;
	}
	.crw-doc__desc {
		margin-top: 6px;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: -0.025em;
		color: var(--rw-mute);
		word-break: keep-all;
	}
	.crw-doc__desc[hidden] { display: none; }

	/* the chapters' bar: one row, it alone scrolls sideways */
	.crw-chapters {
		margin-top: 14px;
		border: 1px solid #efeff2;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 4px 12px -10px rgba(20, 20, 26, .2);
	}
	.crw-chapters[hidden] { display: none; }
	.crw-chapters__list {
		display: flex;
		gap: 2px;
		padding: 0 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.crw-chapters__list::-webkit-scrollbar { display: none; }
	.crw-chapters__list li { flex: none; }
	.crw-chap {
		position: relative;
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 10px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.03em;
		color: #74777f;
		text-decoration: none;
		white-space: nowrap;
		transition: color .15s;
	}
	.crw-chap[aria-current="location"] { font-weight: 700; color: var(--rw-ink); }
	.crw-chap[aria-current="location"]::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 0;
		height: 2px;
		border-radius: 2px 2px 0 0;
		background: var(--rw-ink);
	}

	/* the document's own name, as its source opens */
	.crw-srctitle {
		margin: 16px 2px 0;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.45;
		letter-spacing: -0.025em;
		color: #2b2c31;
		word-break: keep-all;
	}

	.crw-cards {
		display: grid;
		gap: 11px;
		margin-top: 12px;
	}
	.crw-chapter,
	.crw-group {
		display: grid;
		gap: 11px;
		scroll-margin-top: calc(var(--rw-header) + 10px);
	}

	/* ---- the card ----------------------------------------------------------- */
	.crw-card {
		position: relative;
		padding: 15px 16px 16px;
		border: 1px solid var(--rw-line);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 2px 8px -6px rgba(20, 20, 26, .12);
		scroll-margin-top: calc(var(--rw-header) + 10px);
	}
	.crw-card__chapter {
		padding-right: 40px;
		font-size: 17px;
		font-weight: 800;
		line-height: 1.4;
		letter-spacing: -0.035em;
		color: var(--rw-ink);
		word-break: keep-all;
	}
	.crw-card__chapter + .crw-card__h { margin-top: 12px; }

	/* the whole name is the button; the round key sits in the card's corner */
	.crw-card__btn {
		display: block;
		width: 100%;
		min-height: 28px;
		padding: 2px 40px 2px 0;
		text-align: left;
	}
	.crw-card__title {
		display: block;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.45;
		letter-spacing: -0.035em;
		color: var(--rw-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.crw-card--chapter > .crw-card__h .crw-card__title { font-size: 17px; font-weight: 800; }
	.crw-card__chapter ~ .crw-card__h .crw-card__title { font-size: 16px; font-weight: 700; }
	.crw-card__chev {
		position: absolute;
		top: 13px;
		right: 13px;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		border: 1px solid #ededf0;
		border-radius: 50%;
		background: #f7f7f8;
		color: #2a2b30;
	}
	.crw-card__chev svg {
		width: 14px;
		height: 14px;
		transition: transform .26s var(--rw-ease);
	}
	.crw-card.is-open .crw-card__chev svg { transform: rotate(180deg); }

	.crw-card__body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .26s var(--rw-ease);
	}
	.crw-card.is-open .crw-card__body { grid-template-rows: 1fr; }
	.crw-card__in {
		min-height: 0;
		overflow: hidden;
	}
	.crw-card__in::before {
		content: "";
		display: block;
		height: 10px;
	}
	.crw-card.is-instant .crw-card__body,
	.crw-card.is-instant .crw-card__chev svg { transition: none !important; }

	/* the words before any heading: always open, no key */
	.crw-card--plain { padding-top: 6px; }

	/* ---- the text --------------------------------------------------------------- */
	.crw-card__in p,
	.crw-card__in li {
		font-size: 14px;
		line-height: 1.62;
		letter-spacing: -0.02em;
		color: var(--rw-text);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.crw-card__in p + p { margin-top: 3px; }
	.crw-card__in .crw-gap { margin-top: 10px; }
	.crw-card__in strong,
	.crw-card__in b { font-weight: 700; color: var(--rw-ink); }
	.crw-card__in a {
		display: inline;
		color: var(--rw-ink);
		text-decoration: underline;
		text-underline-offset: 2px;
		overflow-wrap: anywhere;
	}

	/* ① clause: a small graphite disc with its number */
	.crw-cl {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr);
		column-gap: 9px;
		align-items: start;
	}
	.crw-cl__n {
		position: relative;
		display: grid;
		place-items: center;
		width: 20px;
		height: 20px;
		margin-top: 2px;
		border-radius: 50%;
		background: var(--rw-dark);
	}
	.crw-cl__n::before {
		content: attr(data-n);
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		color: #fff;
	}

	/* "1." items: the mark hangs, the words align */
	.crw-it {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 6px;
		align-items: start;
	}
	.crw-it__m {
		min-width: 14px;
		font-variant-numeric: tabular-nums;
		color: var(--rw-mute);
	}

	/* a run of items under a sentence: a light panel */
	.crw-sub {
		margin-top: 8px;
		padding: 10px 12px;
		border-radius: 10px;
		background: #f5f5f7;
	}
	.crw-cl + .crw-sub,
	.crw-cl + .crw-sub.crw-gap { margin-left: 29px; }
	.crw-sub .crw-it + .crw-it { margin-top: 4px; }

	.crw-table {
		max-width: 100%;
		margin-top: 8px;
		overflow-x: auto;
	}
	.crw-table table { border-collapse: collapse; font-size: 13px; }
	.crw-table th,
	.crw-table td { padding: 6px 8px; border: 1px solid var(--rw-line); }

	/* a heading that names the cards after it */
	.crw-labelbox { padding: 6px 2px 0; }
	.crw-label {
		font-size: 15px;
		font-weight: 800;
		line-height: 1.45;
		letter-spacing: -0.03em;
		color: var(--rw-ink);
		word-break: keep-all;
	}
	.crw-labelbox .crw-card__chapter { padding-right: 0; margin-bottom: 4px; }

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

	.lang-en .crw-hero__title,
	.lang-en .crw-intro__title,
	.lang-en .crw-doc__title { letter-spacing: -0.02em; }
	/* the English names are longer: a little more room for the words */
	.lang-en .crw-docs { padding: 5px; }
	.lang-en .crw-docs__list { gap: 4px; }
	.lang-en .crw-docbtn { padding: 6px 3px 6px 7px; font-size: 11px; letter-spacing: -0.03em; }
	.lang-en .crw-card__in p,
	.lang-en .crw-intro__desc,
	.lang-en .crw-doc__desc { letter-spacing: -0.005em; }
	.lang-en .crw-card__title,
	.lang-en .crw-card__chapter { letter-spacing: -0.015em; }

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

	@media (max-width: 374px) {
		.crw-docbtn { padding-left: 7px; padding-right: 4px; }
		/* below 375px three English names would take three lines: the small
		   chevron gives its room to the words (the dark key still marks the
		   open document) */
		.lang-en .crw-docbtn { padding: 6px 5px 6px 7px; letter-spacing: -0.03em; }
		.lang-en .crw-docbtn__chev { display: none; }
		.crw-intro__title { font-size: 21px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.crw-card__body,
		.crw-card__chev svg,
		.crw-docbtn,
		.crw-chap { transition: none !important; }
	}
}