@charset "utf-8";

/* ==========================================================================
   CamTalk / customer/notice.php - 공지사항, 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 `.cnt-page` (a class only this page puts on
   <body>, js/camtalk-notice-mobile.js) or `.cnt`, the page's own <main>,
   which a wide window never shows.

   THE SYSTEM
     red      #d6102b active filter, search button, the pinned mark
     rose     #fff1f3 banner, #fff7f8 a pinned card, #fde7eb the 공지 tag
     blue     #2f6fd6 on #eaf1fd, the 정책 tag
     ink      #16171c titles, #4a4c55 the banner, #8d9099 dates
     greys    #f2f2f4 filters, #f4f4f6 the search field, #ececef card edges
     type     the site's Paperozi
     sizes    at 390: gutter 20, hero 154 under the bar, title 28, search
              48 tall, filters 32, cards 12/14 padding, 8 apart, corners
              12, titles 14, dates 12

   STABILITY. Ordinary vertical scrolling, no scroll handler, no parallax.
   The hero's box has its size before its picture arrives (and the picture
   is preloaded for the phone, inc/top.php). The list is there at once: no
   entrance animation; reduced motion turns the short press feedback off.
   ========================================================================== */

@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; }

	.cnt-page {
		--nt-red: #d6102b;
		--nt-ink: #16171c;
		--nt-ink-2: #4a4c55;
		--nt-mute: #8d9099;
		--nt-line: #ececef;
		--nt-gutter: 20px;
		--nt-header: 66px;                          /* .gnb's height on the phone */
		--nt-hero: min(100vw, 620px);               /* a square under the bar (2026-10-13), capped for a tablet */
		--nt-search: 48px;
	}

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

	.cnt-page .ct-notice-desktop { display: none; }

	.cnt-page .cnt[hidden] { display: block; }
	/* its own stacking context: the search's z-index stays inside it and
	   never ties with the bar's (.gnb is z-index 1, earlier in the page) */
	.cnt {
		position: relative;
		z-index: 0;
		isolation: isolate;
		color: var(--nt-ink);
		background: #fff;
		overflow: hidden;
	}
	.cnt img { display: block; max-width: none; }
	:where(.cnt) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
	.cnt ul { list-style: none; }
	:where(.cnt) button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.cnt a { -webkit-tap-highlight-color: transparent; }
	.cnt :focus-visible {
		outline: 2px solid var(--nt-red);
		outline-offset: 2px;
	}
	.cnt-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* ======================================================================
	   1. HERO - under the bar, the search on its lower edge
	   ====================================================================== */

	/* It starts under the bar (absolute at the top of the page), so the
	   bar's 66px are counted once, as this margin. */
	.cnt-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		height: var(--nt-hero);
		margin-top: var(--nt-header);
		/* the foot keeps the search's upper half clear of the words */
		padding: 13px var(--nt-gutter) calc(var(--nt-search) / 2 + 8px);
		background: #0b0a0c;
		color: #fff;
		overflow: hidden;
	}
	.cnt-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 under the words (the red line crosses the middle), and the
	   last strip melting into the white page, where the search sits; a light
	   veil under the crumbs */
	.cnt-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(70% 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),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .55) 93%, #fff 100%);
	}

	.cnt-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, .72);
		white-space: nowrap;
	}
	.cnt-crumbs__home {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		margin: -2px -4px -2px -5px;
		color: #fff;
	}
	.cnt-crumbs__home svg { width: 15px; height: 15px; }
	.cnt-crumbs__sep {
		flex: none;
		width: 11px;
		height: 11px;
		color: rgba(255, 255, 255, .5);
	}
	.cnt-crumbs__sep--bar {
		width: 1px;
		height: 10px;
		background: rgba(255, 255, 255, .34);
	}
	.cnt-crumbs__item--here {
		font-weight: 700;
		color: #fff;
	}

	.cnt-hero__words {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: auto 0;                             /* the middle of the square, below the crumbs */
		text-align: center;
	}
	.cnt-hero__title {
		font-size: clamp(30px, 8.2vw, 34px);       /* 32px at 390: the square is taller than the old band */
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.045em;
		color: #fff;
		text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
		word-break: keep-all;
	}
	.cnt-hero__eyebrow {
		margin-top: 9px;
		margin-right: -.5em;                        /* the last letter's own spacing */
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .5em;
		color: rgba(255, 255, 255, .74);
		white-space: nowrap;
	}

	/* ======================================================================
	   2. SEARCH - half on the hero, half on the white page
	   ====================================================================== */

	.cnt-body {
		position: relative;
		z-index: 1;
		padding: 0 var(--nt-gutter) 30px;
	}
	.cnt-search {
		margin-top: calc(var(--nt-search) / -2);
		padding: 4px;
		border: 1px solid rgba(255, 255, 255, .9);
		border-radius: 999px;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 10px 24px -14px rgba(20, 16, 22, .45), 0 1px 3px rgba(20, 16, 22, .06);
	}
	.cnt-search__field {
		position: relative;
		display: flex;
		align-items: center;
		height: calc(var(--nt-search) - 10px);
		border-radius: 999px;
		background: #f4f4f6;
	}
	.cnt-search__icon {
		position: absolute;
		left: 14px;
		top: 50%;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		color: #7d808a;
		pointer-events: none;
	}
	/* 16px keeps iOS from zooming the page on focus; the hint is smaller */
	.cnt-search__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		padding: 0 4px 0 40px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		font: inherit;
		font-size: 16px;
		letter-spacing: -0.02em;
		color: var(--nt-ink);
		-webkit-appearance: none;
		appearance: none;
	}
	.cnt-search__input::placeholder {
		font-size: 14.5px;
		color: #8f929b;
		opacity: 1;
	}
	.cnt-search__input::-webkit-search-cancel-button { display: none; }
	.cnt-search__input:focus { outline: none; }
	.cnt-search__field:focus-within { box-shadow: inset 0 0 0 1.5px rgba(214, 16, 43, .35); }
	.cnt-search__clear {
		display: grid;
		place-items: center;
		flex: none;
		width: 34px;
		height: 34px;
		color: #9a9ca4;
	}
	.cnt-search__clear[hidden] { display: none; }
	.cnt-search__clear svg { width: 18px; height: 18px; }
	.cnt-search__go {
		display: grid;
		place-items: center;
		flex: none;
		width: 54px;
		height: 100%;
		border-radius: 999px;
		background: linear-gradient(160deg, #e8162f 0%, #c90d24 100%);
		box-shadow: 0 4px 10px -4px rgba(201, 13, 36, .6);
		color: #fff;
		transition: transform .15s;
	}
	.cnt-search__go svg { width: 20px; height: 20px; }
	.cnt-search__go:active { transform: scale(.96); }

	/* ======================================================================
	   3. FILTERS - four in one row
	   ====================================================================== */

	.cnt-filters {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		margin-top: 16px;
	}
	.cnt-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		min-width: 0;
		height: 32px;
		padding: 0 4px;
		border-radius: 999px;
		background: #f2f2f4;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: -0.03em;
		color: #2a2b31;
		white-space: nowrap;
		transition: background-color .15s, color .15s;
	}
	.cnt-chip__n {
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		color: #7b7e88;
	}
	/* the colour under the gradient keeps the change red <-> grey, never
	   through a transparent (white) frame */
	.cnt-chip[aria-pressed="true"] {
		background-color: #d6102b;
		background-image: linear-gradient(160deg, #e8162f 0%, #cd0e26 100%);
		box-shadow: 0 5px 12px -6px rgba(201, 13, 36, .7);
		color: #fff;
	}
	.cnt-chip[aria-pressed="true"] .cnt-chip__n { color: rgba(255, 255, 255, .9); }

	.cnt-result {
		margin-top: 12px;
		font-size: 12.5px;
		line-height: 1.45;
		letter-spacing: -0.02em;
		color: var(--nt-mute);
		word-break: keep-all;
	}

	/* ======================================================================
	   4. LIST - one card per notice
	   ====================================================================== */

	.cnt-list {
		display: grid;
		gap: 8px;
		margin-top: 14px;
	}
	.cnt-result:not(.cnt-sr) + .cnt-list { margin-top: 10px; }
	.cnt-list:empty { display: none; }

	.cnt-card {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 13px 12px 14px;
		border: 1px solid var(--nt-line);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 2px 8px -4px rgba(20, 20, 30, .08);
		color: inherit;
		text-decoration: none;
		transition: background-color .15s, border-color .15s;
	}
	.cnt-card:active { background: #fafafb; }
	.cnt-card--pinned {
		border-color: #f5c8d0;
		background: #fff7f8;
		box-shadow: 0 3px 10px -5px rgba(214, 16, 43, .18);
	}
	.cnt-card--pinned:active { background: #fff0f2; }
	.cnt-card__main {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 1 auto;
		min-width: 0;
	}
	.cnt-card__title {
		display: block;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.42;
		letter-spacing: -0.035em;
		color: var(--nt-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cnt-card__date {
		display: block;
		margin-top: 3px;
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: 0;
		font-variant-numeric: tabular-nums;
		color: var(--nt-mute);
	}
	.cnt-card__hit {
		display: block;
		margin-top: 4px;
		font-size: 11.5px;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: var(--nt-red);
	}
	.cnt-card__chev {
		flex: none;
		width: 16px;
		height: 16px;
		color: #3a3b41;
	}
	.cnt-card mark {
		padding: 0 1px;
		border-radius: 3px;
		background: #ffe1e6;
		color: inherit;
	}

	/* the category, from the source only (data-category); the pin only for
	   a notice the source marks data-pinned */
	.cnt-tag {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 20px;
		margin-bottom: 6px;
		padding: 0 8px;
		border-radius: 999px;
		background: #fde7eb;
		font-size: 11.5px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--nt-red);
	}
	.cnt-tag--update { background: #fff0f2; color: #e0233f; }
	.cnt-tag--policy { background: #eaf1fd; color: #2f6fd6; }
	.cnt-tag__pin { width: 13px; height: 13px; color: var(--nt-red); }

	.cnt-more {
		display: block;
		width: 100%;
		height: 42px;
		margin-top: 10px;
		border: 1px solid #e4e4e8;
		border-radius: 12px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--nt-ink-2);
	}
	.cnt-more[hidden] { display: none; }

	.cnt-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 14px;
		padding: 26px 16px 24px;
		border: 1px dashed #e2e2e7;
		border-radius: 12px;
		text-align: center;
	}
	.cnt-empty[hidden] { display: none; }
	.cnt-empty__icon { width: 38px; height: 38px; color: #c6c8cf; }
	.cnt-empty__title {
		margin-top: 10px;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: -0.03em;
		word-break: keep-all;
	}
	.cnt-empty__desc {
		margin-top: 5px;
		font-size: 13px;
		line-height: 1.5;
		letter-spacing: -0.02em;
		color: var(--nt-mute);
		word-break: keep-all;
		text-wrap: balance;
	}
	.cnt-empty__reset {
		height: 36px;
		margin-top: 14px;
		padding: 0 16px;
		border: 1px solid #f0c4cc;
		border-radius: 999px;
		background: #fff;
		font-size: 13px;
		font-weight: 600;
		color: var(--nt-red);
	}

	/* ======================================================================
	   5. BANNER - a short pink line, no link
	   ====================================================================== */

	.cnt-banner {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 14px;
		padding: 12px 16px 12px 12px;
		border-radius: 12px;
		background: #fff1f3;
	}
	.cnt-banner__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 3px 8px -4px rgba(214, 16, 43, .3);
		color: var(--nt-red);
	}
	.cnt-banner__icon svg { width: 24px; height: 24px; }
	.cnt-banner__text {
		min-width: 0;
		font-size: 12.5px;
		line-height: 1.55;
		letter-spacing: -0.03em;
		color: var(--nt-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

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

	.lang-en .cnt-hero__title { letter-spacing: -0.03em; }
	.lang-en .cnt-chip { letter-spacing: -0.02em; }
	.lang-en .cnt-card__title { letter-spacing: -0.015em; }
	.lang-en .cnt-banner__text,
	.lang-en .cnt-result { letter-spacing: -0.005em; }

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

	@media (max-width: 374px) {
		.cnt-page { --nt-gutter: 16px; }
		.cnt-filters { gap: 5px; }
		.cnt-chip { font-size: 12.5px; gap: 4px; }
		.lang-en .cnt-chip { font-size: 12px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.cnt-card,
		.cnt-chip,
		.cnt-search__go { transition: none; }
		.cnt-search__go:active { transform: none; }
	}
}