@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/raw.php - 법적고지, the wide window (rwd1, 2026-10-26).

   SCOPE. Every rule is inside `@media only screen and (min-width: 1001px)`,
   the other side of the project's breakpoint (css/camtalk-raw-mobile.css
   is `max-width: 1000px` from its first rule to its last). It is linked
   from raw.php only, so the few rules for the shared bar (.gnb) reach no
   other page; everything else is under `.crw-page` (a class only this
   page puts on <body>) or `.crw`, the page's own <main>.

   ONE PAGE FOR BOTH WIDTHS. The wide window lays out the phone's own
   markup and the document js/camtalk-raw-mobile.js builds for both widths
   (one script, one set of handlers, one state - crossing the breakpoint
   changes the layout only). Every ?pn= document, its words, links,
   numbering and dates are the source's own.

   THE MEASURE IS UPDATE NOTE'S. customer/updatenote.php is the model of the
   support pages (css/camtalk-updatenote-desktop.css), and Notice
   (css/camtalk-notice-desktop.css, ntd4) already carries its values; they
   are taken here as they are:
     hero      the bar counted once as a 96px margin; clamp(320px, 25vw,
               380px) tall; the same wide drawing (img/updatenote-desktop/
               hero-wide.webp) cover-fitted at 50% 34%; the same dark pool
               and foot shade; 법적고지 and LEGAL NOTICE one group in the
               hero's middle, both ways, in Update Note's hero type; the
               crumbs over its top left on the column's line
     body      a 1160px column (40px gutters, 32 below 1200px), 36px under
               the hero, 96px over the footer
   Then the page's own parts: the intro, the eight documents in one light
   panel (wrapping, never scrolling), and the open document in a reading
   column of at most 900px - with its chapters beside it from 1200px, in a
   row of their own above it below that.

   THE RESETS of common.css win against single-class rules (`*` colour,
   li break-all, a inline-block, bare buttons) - so text sets its own
   colour and keep-all, element resets are written with :where(), and
   everything hidden with the attribute is hidden here explicitly.
   ========================================================================== */

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

	.crw-page {
		--rd-ink: #111214;
		--rd-text: #3b3d44;
		--rd-mute: #6b6e76;
		--rd-eyebrow: #85878f;
		--rd-dark: #1c1d21;                         /* the phone's graphite: the open document, the ① discs */
		--rd-line: #ececf0;                         /* Update Note's --un-line */
		--rd-header: 96px;                          /* .gnb's height on a wide window (camtalk-header.css) */
		--rd-w: 1160px;                             /* the content column (--ud-w) */
		--rd-read: 900px;                           /* the reading column */
		--rd-side: 220px;                           /* the chapters beside it, from 1200px */
		--rd-gutter: 40px;                          /* --ud-gutter */
		--rd-ease: cubic-bezier(.22, .7, .2, 1);
	}
	/* Update Note's own step (camtalk-updatenote-desktop.css, max-width
	   1199px sets --ud-gutter to 32px) */
	@media (max-width: 1199px) {
		.crw-page { --rd-gutter: 32px; }
	}

	/* ---- the shared bar, white from the first frame ----------------------------
	   As on the phone and on Update Note / Notice's wide windows: js/common.js
	   gives .gnb the class gnb_invert past 150px and takes it away above; on
	   this page the bar looks like that in BOTH states (common.css's
	   .gnb_invert values). The open mega menu keeps its own dark skin
	   (body.ctn-open). The class itself is never touched. */
	body.crw-page:not(.ctn-open) .gnb {
		color: #333;
		background-color: #fff;
	}
	body.crw-page:not(.ctn-open) .gnb .logo,
	body.crw-page:not(.ctn-open) .gnb .menu,
	body.crw-page:not(.ctn-open) .gnb .right { text-shadow: none; }
	body.crw-page:not(.ctn-open) .gnb .right img { filter: invert(100%); opacity: .2; }
	body.crw-page:not(.ctn-open) .gnb .logo a b { color: #cc0c0c; }

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

	.crw-page .crw[hidden] { display: block; }
	.crw {
		position: relative;
		z-index: 0;
		isolation: isolate;                         /* never ties with the bar (z-index 1) */
		color: var(--rd-ink);
		background: #fff;
		overflow-x: clip;
	}
	.crw img { display: block; max-width: none; }
	:where(.crw) :where(h1, h2, h3, h4, h5, p, ul, ol, li) { margin: 0; padding: 0; }
	:where(.crw) :where(ul) { list-style: none; }
	:where(.crw) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
	}
	.crw [hidden]:not([hidden="until-found"]) { display: none !important; }
	.crw :focus-visible {
		outline: 2px solid var(--rd-dark);
		outline-offset: 3px;
	}
	.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 - Update Note's band (.cun-hero and its parts)
	   ====================================================================== */

	.crw-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		margin-top: var(--rd-header);
		height: clamp(320px, 25vw, 380px);
		padding: 0;
		background: #0c0b0d;
		color: #fff;
		overflow: hidden;
	}
	.crw-hero__img {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 34%;
	}
	/* .cun-hero__shade: a dark pool under the words, a little weight at the foot */
	.crw-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		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%);
	}

	/* the crumbs lie over the hero's top left, on the column's line: out of
	   the flow, so the middle group is the hero's own centre (Notice's) */
	.crw-crumbs {
		position: absolute;
		z-index: 1;
		top: 24px;
		left: max(var(--rd-gutter), calc((100% - var(--rd-w)) / 2));
		display: flex;
		align-items: center;
		gap: 9px;
		min-height: 24px;
		font-size: 15px;
		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: 26px;
		height: 26px;
		margin: -1px -4px -1px -5px;
		color: #fff;
	}
	.crw-crumbs__home svg { width: 17px; height: 17px; }
	.crw-crumbs__bar {
		flex: none;
		width: 1px;
		height: 12px;
		background: rgba(255, 255, 255, .34);
	}
	.crw-crumbs__sep {
		flex: none;
		width: 13px;
		height: 13px;
		color: rgba(255, 255, 255, .5);
	}
	.crw-crumbs__here { font-weight: 700; color: #fff; }

	/* .cun-hero__words: the group fills the band and stands in its middle */
	.crw-hero__words {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 var(--rd-gutter);
		text-align: center;
	}
	/* .cun-hero__title: 42 at 1001, 49 at 1440, 52 from 1530 */
	.crw-hero__title {
		font-size: clamp(42px, 3.4vw, 52px);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.04em;
		color: #fff;
		word-break: keep-all;
	}
	/* .cun-hero__desc: LEGAL NOTICE as Update Note's line */
	.crw-hero__eyebrow {
		margin-top: 12px;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: -0.02em;
		color: rgba(255, 255, 255, .86);
		white-space: nowrap;
	}

	/* ======================================================================
	   2. BODY + INTRO
	   ====================================================================== */

	.crw-body {
		position: relative;
		width: 100%;
		max-width: calc(var(--rd-w) + 2 * var(--rd-gutter));
		margin: 0 auto;
		padding: 36px var(--rd-gutter) 96px;
	}

	.crw-eyebrow {
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: .28em;
		color: var(--rd-eyebrow);
		text-transform: uppercase;
	}
	.crw-intro { padding: 12px 0 0; }
	/* 34 at 1001, 36 at 1440, 38 at 1920 */
	.crw-intro__title {
		margin-top: 14px;
		font-size: clamp(34px, 0.44vw + 29.6px, 38px);
		font-weight: 800;
		line-height: 1.32;
		letter-spacing: -0.04em;
		color: var(--rd-ink);
		word-break: keep-all;
	}
	.crw-intro__desc {
		margin-top: 14px;
		font-size: 17.5px;
		line-height: 1.65;
		letter-spacing: -0.025em;
		color: var(--rd-mute);
		word-break: keep-all;
	}

	/* ======================================================================
	   3. THE DOCUMENTS - one light panel, the names whole, wrapping
	   ====================================================================== */

	.crw-docs {
		margin-top: 32px;
		padding: 10px;
		border: 1px solid var(--rd-line);
		border-radius: 18px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20, 20, 30, .03), 0 14px 34px -26px rgba(20, 20, 30, .22);
	}
	.crw-docs__list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.crw-docs__list li { display: flex; min-width: 0; }
	.crw-docbtn {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding: 0 20px;
		border-radius: 12px;
		background: #f4f4f6;
		font-size: 15.5px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.03em;
		color: #2a2b30;
		text-decoration: none;
		white-space: nowrap;                        /* a name is never cut or broken: the row wraps instead */
		transition: background-color .15s, color .15s;
	}
	.crw-docbtn:hover { background: #ebebef; color: var(--rd-ink); }
	.crw-docbtn__name { white-space: nowrap; }
	.crw-docbtn__chev { display: none; }
	.crw-docbtn[aria-current="page"] {
		background: var(--rd-dark);
		color: #fff;
		font-weight: 700;
	}

	/* ======================================================================
	   4. THE OPEN DOCUMENT - a reading column, its chapters beside it
	   ====================================================================== */

	/* below 1200px: the head, the chapters' row, the cards, one column */
	.crw-doc {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin-top: 56px;
	}
	.crw-doc > * { min-width: 0; max-width: var(--rd-read); }
	.crw-doc__head { padding: 0; }
	.crw-doc__title {
		margin-top: 12px;
		font-size: clamp(34px, 0.44vw + 29.6px, 38px);
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.04em;
		color: var(--rd-ink);
		word-break: keep-all;
	}
	.crw-doc__desc {
		margin-top: 12px;
		font-size: 17.5px;
		line-height: 1.6;
		letter-spacing: -0.025em;
		color: var(--rd-mute);
		word-break: keep-all;
	}

	/* the chapters: a wrapping row of links (no sideways scrolling) */
	.crw-chapters {
		margin-top: 24px;
		padding: 8px;
		border: 1px solid var(--rd-line);
		border-radius: 14px;
		background: #fff;
	}
	.crw-chapters__list {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.crw-chapters__list li { display: flex; min-width: 0; }
	.crw-chap {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 38px;
		padding: 8px 14px;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		letter-spacing: -0.03em;
		color: #6b6e76;
		text-decoration: none;
		word-break: keep-all;
		transition: background-color .15s, color .15s;
	}
	.crw-chap:hover { background: #f4f4f6; color: var(--rd-ink); }
	.crw-chap[aria-current="location"] {
		background: #f1f1f4;
		font-weight: 700;
		color: var(--rd-ink);
	}

	/* from 1200px: the chapters stand beside the reading column and stay in
	   view while it scrolls (sticky under the bar - no script of their own;
	   the page's script marks the one being read) */
	@media (min-width: 1200px) {
		.crw-doc:has(> .crw-chapters:not([hidden])) {
			grid-template-columns: minmax(0, var(--rd-read)) var(--rd-side);
			column-gap: 40px;
			justify-content: space-between;
			align-items: start;
		}
		.crw-doc:has(> .crw-chapters:not([hidden])) > .crw-doc__head { grid-column: 1; grid-row: 1; }
		.crw-doc:has(> .crw-chapters:not([hidden])) > .crw-cards { grid-column: 1; grid-row: 2; }
		.crw-doc:has(> .crw-chapters:not([hidden])) > .crw-chapters {
			position: sticky;
			top: calc(var(--rd-header) + 24px);
			grid-column: 2;
			grid-row: 1 / span 2;
			align-self: start;
			max-height: calc(100vh - var(--rd-header) - 48px);
			margin-top: 0;
			padding: 18px 10px 10px;
			overflow-y: auto;
		}
		.crw-doc:has(> .crw-chapters:not([hidden])) .crw-chapters::before {
			content: attr(aria-label);
			display: block;
			padding: 0 10px 10px;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: -0.02em;
			color: var(--rd-eyebrow);
		}
		.crw-doc:has(> .crw-chapters:not([hidden])) .crw-chapters__list {
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 2px;
		}
		.crw-doc:has(> .crw-chapters:not([hidden])) .crw-chap {
			width: 100%;
			min-height: 40px;
			padding: 9px 12px;
			font-size: 14.5px;
		}
		.crw-doc:has(> .crw-chapters:not([hidden])) .crw-chap[aria-current="location"] {
			box-shadow: inset 3px 0 0 var(--rd-dark);
		}
	}

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

	.crw-cards {
		display: grid;
		gap: 14px;
		margin-top: 24px;
	}
	.crw-chapter,
	.crw-group {
		display: grid;
		gap: 14px;
		scroll-margin-top: calc(var(--rd-header) + 10px);
	}
	.crw-chapter + .crw-chapter,
	.crw-group + .crw-chapter,
	.crw-chapter + .crw-group { margin-top: 18px; }

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

	/* the whole name is the button; the round key sits in the card's corner */
	.crw-card__btn {
		display: block;
		width: 100%;
		min-height: 34px;
		padding: 3px 56px 3px 0;
		text-align: left;
	}
	.crw-card__title {
		display: block;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.45;
		letter-spacing: -0.035em;
		color: var(--rd-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.crw-card--chapter > .crw-card__h .crw-card__title { font-size: 22px; font-weight: 800; }
	.crw-card__chapter ~ .crw-card__h .crw-card__title { font-size: 20px; font-weight: 700; }
	.crw-card__chev {
		position: absolute;
		top: 22px;
		right: 24px;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border: 1px solid #ececf0;
		border-radius: 50%;
		background: #f7f7f8;
		color: #2a2b30;
		transition: background-color .15s;
	}
	.crw-card__btn:hover .crw-card__chev { background: #eeeef1; }
	.crw-card__chev svg {
		width: 16px;
		height: 16px;
		transition: transform .26s var(--rd-ease);
	}
	.crw-card.is-open .crw-card__chev svg { transform: rotate(180deg); }
	.crw-card__btn:focus-visible { outline-offset: 6px; border-radius: 6px; }

	/* open / close: the phone's mechanism, grid rows 0fr <-> 1fr */
	.crw-card__body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .26s var(--rd-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: 14px;
	}
	.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: 12px; }

	/* ---- the text: 17px / 1.8 ------------------------------------------------- */
	.crw-card__in p,
	.crw-card__in li {
		font-size: 17px;
		line-height: 1.8;
		letter-spacing: -0.02em;
		color: var(--rd-text);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.crw-card__in p + p { margin-top: 4px; }
	.crw-card__in .crw-gap { margin-top: 14px; }
	.crw-card__in strong,
	.crw-card__in b { font-weight: 700; color: var(--rd-ink); }
	.crw-card__in a {
		display: inline;
		color: var(--rd-ink);
		text-decoration: underline;
		text-underline-offset: 3px;
		overflow-wrap: anywhere;
	}
	.crw-card__in a:hover { color: #000; text-decoration-thickness: 2px; }
	/* the AI widget's 이메일 문의 button: an atomic box, so its line is tall
	   enough and the card does not cut its lower edge (as on the phone) */
	.crw-page .crw-card__in a.mn-ai-link-button { display: inline-block; }
	.crw-card__in h2,
	.crw-card__in h3,
	.crw-card__in h4 {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.55;
		letter-spacing: -0.03em;
		color: var(--rd-ink);
		word-break: keep-all;
	}

	/* ① clause: a small graphite disc with its number */
	.crw-cl {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}
	.crw-cl__n {
		position: relative;
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		margin-top: 3px;
		border-radius: 50%;
		background: var(--rd-dark);
	}
	.crw-cl__n::before {
		content: attr(data-n);
		font-size: 12.5px;
		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: 8px;
		align-items: start;
	}
	.crw-it__m {
		min-width: 18px;
		font-variant-numeric: tabular-nums;
		color: var(--rd-mute);
	}

	/* a run of items under a sentence: a light panel */
	.crw-sub {
		margin-top: 10px;
		padding: 16px 22px;
		border-radius: 12px;
		background: #f6f6f8;
	}
	.crw-cl + .crw-sub,
	.crw-cl + .crw-sub.crw-gap { margin-left: 36px; }
	.crw-sub .crw-it + .crw-it { margin-top: 6px; }

	/* a wide table scrolls in its own box, never the page */
	.crw-table {
		max-width: 100%;
		margin-top: 10px;
		overflow-x: auto;
	}
	.crw-table table { border-collapse: collapse; font-size: 15px; }
	.crw-table th,
	.crw-table td { padding: 8px 12px; border: 1px solid var(--rd-line); }

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

	/* ---- ENG: longer words, same sizes ---------------------------------------- */
	.lang-en .crw-hero__title { letter-spacing: -0.03em; }    /* Update Note's ENG title */
	.lang-en .crw-intro__title,
	.lang-en .crw-doc__title { letter-spacing: -0.025em; }
	.lang-en .crw-docbtn { letter-spacing: -0.015em; }
	.lang-en .crw-card__in p,
	.lang-en .crw-card__in li,
	.lang-en .crw-intro__desc,
	.lang-en .crw-doc__desc { letter-spacing: -0.005em; }
	.lang-en .crw-card__title,
	.lang-en .crw-card__chapter,
	.lang-en .crw-chap { letter-spacing: -0.015em; }

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