@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/updatenote.php - 업데이트노트, the phone.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint, and under `.cun-page` (a class only this
   page puts on <body>, js/camtalk-updatenote-mobile.js) or `.cun`, the
   page's own <main>, which a wide window never shows.

   THE SYSTEM
     red      #f5123f             labels, the active filter, the banner button
     ink      #17181d / #4a4c55   headings / copy; #8b8e98 for dates and counts
     grounds  white page; #f6f6f8 for the search field and the banner;
              a soft rose #fff5f7 with a #f9d3dc edge for the latest card
     lines    #ececf0 card edges, #f1f1f4 between rows
     type     the site's Paperozi; at 390: hero title 28, years 22, latest
              version 22, row versions 17.5, copy 14, captions 12.5-13
     gutter   16px; blocks 12-16px apart; corners 12-16px

   STABILITY. Ordinary vertical scrolling: no pinning, no snap, no scroll
   handler. The hero is a fixed number of pixels (no vh/svh), so the
   browser's bars sliding away change nothing. Every picture has its size in
   the markup. Openings animate grid rows from 0fr to 1fr - nothing is
   measured in script, and reduced motion makes them instant.

   STACKING. The hero is `isolation: isolate` at z-index 0, so its layers
   stay under the fixed bar (.gnb is 1); the latest card is isolated for its
   picture the same way.

   THE BAR is the site's white one from the first frame (un2): this sheet is
   linked on this page only and is render-blocking, so the .gnb rules below
   reach no other page and leave no transparent frame. The hero starts under
   the bar.
   ========================================================================== */

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

	.cun-page {
		--un-red: #f5123f;
		--un-ink: #17181d;
		--un-ink-2: #4a4c55;
		--un-mute: #8b8e98;
		--un-line: #ececf0;
		--un-line-2: #f1f1f4;
		--un-soft: #f6f6f8;
		--un-gutter: 16px;
		--un-header: 66px;                          /* .gnb's height on the phone */
		--un-ease: cubic-bezier(.22, .7, .2, 1);
	}

	/* ---- 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 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; }

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

	/* The wide window's block: never filled on a phone (see the script),
	   and hidden here so its empty box takes no room. */
	.cun-page .ct-un-desktop { display: none; }

	.cun-page .cun[hidden] { display: block; }
	.cun {
		color: var(--un-ink);
		background: #fff;
		overflow: hidden;
	}
	.cun img { display: block; max-width: none; }
	:where(.cun) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
	.cun ul, .cun ol { list-style: none; }
	.cun li { word-break: keep-all; overflow-wrap: anywhere; }
	.cun a { text-decoration: none; }
	:where(.cun) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cun [hidden] { display: none !important; }
	.cun mark {
		background: linear-gradient(transparent 55%, rgba(245, 18, 63, .16) 55%);
		color: inherit;
		border-radius: 2px;
	}
	.cun :focus-visible {
		outline: 2px solid var(--un-red);
		outline-offset: 2px;
	}
	.cun-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cun-chev {
		display: block;
		flex: none;
		width: 16px;
		height: 16px;
		transition: transform .28s var(--un-ease);
	}

	/* ======================================================================
	   1. HERO - a compact band, not a screen
	   ====================================================================== */

	/* The white bar (absolute at the top of the page, then fixed) takes the
	   first 66px; the hero starts right under it, so the bar is counted once,
	   as this margin, with no strip between them. The picture is cover-fitted
	   (never stretched) and held where both red lines cross the band. */
	/* A SQUARE under the bar (2026-10-13): as tall as the screen is wide
	   (capped for a tablet), the bar's 66px counted once, as the margin. */
	.cun-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		margin-top: var(--un-header);
		height: min(100vw, 620px);
		background: #0c0b0d;
		color: #fff;
		overflow: hidden;
	}
	.cun-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, where the red
	   line crosses the middle; the rest of the drawing stays as it is */
	.cun-hero__shade {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(78% 34% at 50% 50%, rgba(8, 7, 9, .7) 0%, rgba(8, 7, 9, .42) 55%, rgba(8, 7, 9, 0) 100%);
	}
	.cun-hero__words {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 0;
		padding: 12px var(--un-gutter) 13px;
		text-align: center;
	}
	.cun-hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.01em;
		color: rgba(255, 255, 255, .88);
	}
	.cun-hero__mark {
		flex: none;
		width: 17px;
		height: 6px;
		border-radius: 3px;
		background: linear-gradient(90deg, #f5123f, #ff7f96);
		box-shadow: 0 0 10px rgba(245, 18, 63, .55);
	}
	.cun-hero__title {
		margin-top: 7px;
		font-size: clamp(30px, 8.2vw, 34px);       /* 32px at 390: the square is taller than the old band */
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -0.045em;
		color: #fff;
		word-break: keep-all;
	}
	.cun-hero__desc {
		margin-top: 8px;
		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: balance;
	}

	/* ======================================================================
	   2. FILTERS + SEARCH
	   ====================================================================== */

	.cun-body {
		padding: 16px var(--un-gutter) 28px;
	}

	/* five capsules in one row at every phone width: each is as wide as its
	   word plus the same padding, and the row's free space is shared out */
	.cun-filters {
		display: flex;
		gap: 6px;
	}
	.cun-chip {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		height: 34px;
		padding: 0 9px;
		border: 1px solid #e3e4e9 !important;
		border-radius: 999px;
		background: #fff !important;
		font-size: 13.5px !important;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--un-ink) !important;
		white-space: nowrap;
		transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
	}
	/* the tap area is 44px tall although the capsule is 34 */
	.cun-chip::after {
		content: "";
		position: absolute;
		left: -3px;
		right: -3px;
		top: -5px;
		bottom: -5px;
	}
	.cun-chip[aria-pressed="true"] {
		border-color: var(--un-red) !important;
		background: var(--un-red) !important;
		color: #fff !important;
		font-weight: 700;
		box-shadow: 0 4px 12px -4px rgba(245, 18, 63, .5);
	}

	.cun-search {
		position: relative;
		margin-top: 10px;
	}
	.cun-search__icon {
		position: absolute;
		left: 13px;
		top: 50%;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		color: #6f727c;
		pointer-events: none;
	}
	.cun-search__input {
		display: block;
		width: 100%;
		height: 42px;
		padding: 0 42px 0 40px;
		border: 1px solid #e6e7ec;
		border-radius: 12px;
		background: #f8f8fa;
		font: inherit;
		font-size: 14px;
		letter-spacing: -0.02em;
		color: var(--un-ink);
		-webkit-appearance: none;
		appearance: none;
		transition: border-color .2s, background-color .2s;
	}
	.cun-search__input::placeholder { color: #9a9ca5; opacity: 1; }
	.cun-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
	.cun-search__input:focus {
		outline: none;
		border-color: #f2a3b4;
		background: #fff;
	}
	.cun-search__clear {
		position: absolute;
		right: 4px;
		top: 50%;
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		margin-top: -19px;
		border-radius: 50%;
		color: #6f727c;
	}
	.cun-search__clear svg { width: 18px; height: 18px; }

	.cun-result {
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.4;
		color: var(--un-mute);
		letter-spacing: -0.01em;
	}
	.cun-result:empty { display: none; }
	.cun-result__what { color: var(--un-ink); font-weight: 600; }
	.cun-result__n { color: var(--un-red); font-weight: 600; }

	/* ---- platform capsule (card and rows) ---------------------------------- */

	.cun-pf {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 24px;
		padding: 0 9px 0 7px;
		border-radius: 999px;
		background: #f2f2f5;
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: -0.01em;
		color: #2c2d33;
		white-space: nowrap;
		vertical-align: middle;
	}
	.cun-pf svg { width: 13px; height: 13px; flex: none; }
	.cun-pf--ios svg { color: #1d1d1f; margin-top: -1px; }
	.cun-pf--android { background: #e9f7ee; }
	.cun-pf--android svg { color: #2fb36a; width: 15px; }
	.cun-pf--web svg { color: #3b3d45; }

	/* ---- change lines (card and rows) -------------------------------------- */

	.cun-changes li {
		position: relative;
		padding-left: 13px;
		font-size: 14px;
		line-height: 1.48;
		letter-spacing: -0.02em;
		color: var(--un-ink-2);
	}
	.cun-changes li + li { margin-top: 2px; }
	.cun-changes li::before {
		content: "";
		position: absolute;
		left: 2px;
		top: .62em;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #a9acb5;
	}
	.cun-changes--rest { padding-top: 2px; }

	.cun-more-lines {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		min-height: 30px;
		margin-top: 2px;
		padding: 4px 0;
		font-size: 13px !important;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #6b6e78 !important;
	}
	.cun-more-lines .cun-chev { width: 14px; height: 14px; }
	.cun-more-lines[aria-expanded="true"] .cun-chev { transform: rotate(180deg); }

	/* ---- the opening boxes --------------------------------------------------- */

	.cun-collapse {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .32s var(--un-ease);
	}
	.cun-collapse.is-open { grid-template-rows: 1fr; }
	.cun-collapse__in {
		min-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: visibility 0s linear .32s;
	}
	.cun-collapse.is-open > .cun-collapse__in {
		visibility: visible;
		transition-delay: 0s;
	}

	/* ======================================================================
	   3. LATEST - 최근 업데이트
	   ====================================================================== */

	/* The picture is a fixed 170px-high box at the card's lower right,
	   reaching past the card's edge, so the card can grow (the record's other
	   changes) without the picture growing with it, and its bright crossing
	   sits right of the words; its left edge and its top fade into the rose.
	   The words keep the left 72%; while the record is folded, each of its
	   first lines is held to two lines (the toggle below shows them whole). */
	.cun-latest {
		position: relative;
		z-index: 0;
		isolation: isolate;
		margin-top: 14px;
		padding: 14px 16px 12px;
		border: 1px solid #f9d3dc;
		border-radius: 16px;
		background: linear-gradient(160deg, #fff7f8 0%, #fff1f4 100%);
		box-shadow: 0 10px 24px -18px rgba(245, 18, 63, .45);
		overflow: hidden;
	}
	.cun-latest__art {
		position: absolute;
		right: -14%;
		bottom: 0;
		z-index: -1;
		width: 58%;
		height: 170px;
		object-fit: cover;
		object-position: 0% 50%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%), linear-gradient(0deg, #000 55%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0%, #000 52%), linear-gradient(0deg, #000 55%, transparent 100%);
		mask-composite: intersect;
		pointer-events: none;
	}
	.cun-latest__label {
		display: flex;
		align-items: center;
		gap: 7px;
		padding-right: 64px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: var(--un-red);
	}
	.cun-latest__label::before {
		content: "";
		flex: none;
		width: 3px;
		height: 14px;
		border-radius: 2px;
		background: var(--un-red);
	}
	.cun-latest__new {
		position: absolute;
		top: 13px;
		right: 14px;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(245, 18, 63, .1);
		font-size: 11.5px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: .04em;
		color: var(--un-red);
	}
	.cun-latest__body { max-width: 72%; }
	.cun-latest__head {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px 10px;
		margin-top: 8px;
	}
	.cun-latest__ver {
		font-size: 22px;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: -0.03em;
		color: var(--un-ink);
	}
	.cun-latest .cun-pf { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(245, 18, 63, .08); }
	.cun-latest .cun-pf--android { background: #e9f7ee; box-shadow: none; }
	.cun-latest__date {
		display: block;
		margin-top: 5px;
		font-size: 13px;
		line-height: 1.3;
		color: var(--un-mute);
		letter-spacing: 0;
	}
	.cun-latest .cun-changes { margin-top: 8px; }
	.cun-latest .cun-changes li { color: #2f3037; }
	.cun-latest.is-folded .cun-changes:not(.cun-changes--rest) li {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.cun-latest .cun-changes li::before { background: var(--un-red); width: 5px; height: 5px; top: .58em; left: 1px; }

	/* ======================================================================
	   4. ARCHIVE - one block per year
	   ====================================================================== */

	.cun-archive {
		display: grid;
		gap: 8px;
		margin-top: 12px;
	}
	.cun-year {
		border: 1px solid var(--un-line);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20, 20, 30, .03);
		overflow: hidden;
	}
	.cun-year__btn {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 50px;
		padding: 0 16px;
		text-align: left;
	}
	.cun-year__num {
		flex: none;
		font-size: 22px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--un-ink);
	}
	.cun-year__count {
		flex: 1 1 auto;
		position: relative;
		margin-left: 12px;
		padding-left: 12px;
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.02em;
		color: #6b6e78;
	}
	.cun-year__count::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 14px;
		margin-top: -7px;
		background: #dcdde3;
	}
	.cun-year__btn .cun-chev { width: 18px; height: 18px; color: #4a4c55; }
	.cun-year.is-open .cun-year__btn .cun-chev { transform: rotate(180deg); }

	/* the reference's three columns, folded to two: version, date and the
	   platform stacked on the left, the change lines on the right */
	.cun-row {
		display: grid;
		grid-template-columns: 86px minmax(0, 1fr);
		column-gap: 12px;
		padding: 13px 16px 12px;
		border-top: 1px solid var(--un-line-2);
		outline-offset: -2px;
	}
	.cun-row__ver {
		font-size: 17.5px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.03em;
		color: var(--un-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cun-row__date {
		display: block;
		margin-top: 5px;
		font-size: 12.5px;
		line-height: 1.3;
		color: var(--un-mute);
		white-space: nowrap;
	}
	.cun-row__main { min-width: 0; }
	.cun-row__meta .cun-pf { margin-top: 8px; }
	.cun-row__main .cun-changes { margin-top: 0; }

	.cun-year__more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: calc(100% - 24px);
		min-height: 40px;
		margin: 0 12px 12px;
		border-radius: 10px;
		background: var(--un-soft) !important;
		font-size: 13.5px !important;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--un-ink) !important;
	}
	.cun-year__more .cun-chev { width: 15px; height: 15px; }

	/* ---- nothing found ----------------------------------------------------- */

	.cun-empty {
		margin-top: 14px;
		padding: 28px 20px 24px;
		border: 1px solid var(--un-line);
		border-radius: 14px;
		background: #fff;
		text-align: center;
	}
	.cun-empty__icon { display: block; width: 40px; height: 40px; margin: 0 auto; color: #c3c5cc; }
	.cun-empty__title {
		margin-top: 10px;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;
		color: var(--un-ink);
	}
	.cun-empty__desc {
		margin-top: 6px;
		font-size: 13.5px;
		line-height: 1.5;
		color: #6b6e78;
		word-break: keep-all;
		text-wrap: pretty;
	}
	.cun-empty__desc:empty { display: none; }
	.cun-empty__reset {
		margin-top: 14px;
		min-height: 38px;
		padding: 0 16px;
		border: 1px solid var(--un-red) !important;
		border-radius: 999px;
		font-size: 13.5px !important;
		font-weight: 700;
		color: var(--un-red) !important;
	}

	/* ======================================================================
	   5. APP UPDATE - the banner before the footer
	   ====================================================================== */

	.cun-app {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: 13px;
		align-items: start;
		margin-top: 14px;
		padding: 15px 16px;
		border-radius: 16px;
		background: var(--un-soft);
	}
	/* the reserved box of the picture (see updatenote.php): its size never
	   depends on the file */
	.cun-app__img {
		width: 52px;
		height: 52px;
		border-radius: 14px;
		object-fit: cover;
		background: #fff;
		box-shadow: 0 6px 14px -8px rgba(20, 20, 30, .25), inset 0 0 0 1px rgba(20, 20, 30, .04);
	}
	.cun-app__title {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: -0.03em;
		color: var(--un-ink);
		word-break: keep-all;
	}
	.cun-app__desc {
		margin-top: 4px;
		font-size: 13px;
		line-height: 1.5;
		letter-spacing: -0.02em;
		color: #6b6e78;
		word-break: keep-all;
	}
	.cun-app__btn {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		height: 34px;
		margin-top: 10px;
		padding: 0 11px 0 14px;
		border: 1px solid var(--un-red);
		border-radius: 999px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: var(--un-red) !important;
	}
	.cun-app__btn svg { width: 14px; height: 14px; }

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

	.lang-en .cun-hero__eyebrow { letter-spacing: 0; }
	.lang-en .cun-hero__title { letter-spacing: -0.03em; }
	.lang-en .cun-chip { letter-spacing: -0.01em; padding: 0 8px; }
	.lang-en .cun-changes li,
	.lang-en .cun-app__desc { letter-spacing: -0.005em; }
	.lang-en .cun-row__date { font-size: 12px; }

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

	@media (max-width: 374px) {
		.cun-chip { font-size: 13.5px !important; padding: 0 7px; }
		.cun-row { grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; padding-left: 14px; padding-right: 14px; }
		.cun-latest__body { max-width: 78%; }
	}

	@media (prefers-reduced-motion: reduce) {
		.cun-collapse,
		.cun-collapse__in,
		.cun-chev,
		.cun-chip { transition: none !important; }
	}
}