/* ==========================================================================
   UNEC – News archive
   Figma: 88:3794 (News_archive) — file Q5ckGwby9XewAE51OXln5p
   v1.0.2

   House rules honoured here (see the project notes):
     * every selector is scoped under #top
     * the ONLY !important is the four-declaration container release, which
       has to beat Enfold's generated post-<id>.css on source order
     * font-family is restated on every descendant — Enfold's bare-element
       rules (#top div, 1-0-1) beat inheritance
     * values the renderer writes INLINE are never re-declared in a media
       query; the ladder moves a scale factor instead
     * interactive colours are custom properties the base rule reads but never
       sets, so state selectors re-point them
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

#top .unec_news_sec {
	/* palette */
	--unec_news_ink:        #231F20;
	--unec_news_yellow:     #FFC20E;
	--unec_news_light:      #F8F8F9;
	--unec_news_white:      #FFFFFF;
	--unec_news_line:       rgba( 35, 31, 32, 0.2 );
	--unec_news_muted:      0.64;

	--unec_news_font:       'Pretendard', 'Pretendard Variable', -apple-system,
	                        BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* section rhythm — see claude/section-padding.md
	   --unec_news_pt / --unec_news_pb are written INLINE by the renderer and
	   only when the author set a value, so this token governs otherwise. */
	--unec_news_pad_v:      100px;
	--unec_news_pad_scale:  1;

	/* container — house gutter ladder, no 100vw */
	--unec_news_max:        1408px;
	--unec_news_gutter:     max( 50px, calc( ( 100% - var( --unec_news_max ) ) / 2 ) );

	/* geometry */
	--unec_news_block_gap:  80px;   /* tabs -> list, list -> Load More */
	--unec_news_row_pad:    56px;   /* row padding, top and bottom          */
	--unec_news_img:        343px;  /* square media box                     */
	--unec_news_badge:      56px;   /* circle overhanging the media edge    */
	--unec_news_icon:       24px;
	--unec_news_date_w:     110px;
	--unec_news_date_gap:   56px;   /* day -> month/year                    */
	--unec_news_text_w:     698px;
	--unec_news_head_gap:   40px;   /* category -> title                    */
	--unec_news_more_gap:   20px;   /* Load More label -> circle            */
	--unec_news_circle:     56px;

	/* tabs */
	--unec_news_tab_gap:    12px;
	--unec_news_tab_px:     32px;
	--unec_news_tab_py:     20px;

	/* type scale (Figma text styles) */
	--unec_news_meta_fs:    17px;   --unec_news_meta_lh:   26px;
	--unec_news_day_fs:     92px;   --unec_news_day_lh:    88px;
	--unec_news_title_fs:   28px;   --unec_news_title_lh:  34px;
	--unec_news_label_fs:   20px;   --unec_news_label_lh:  30px;

	/* interactive colours — read here, re-pointed by the state selectors */
	--unec_news_badge_bg:   var( --unec_news_yellow );
	--unec_news_badge_ink:  var( --unec_news_ink );
	--unec_news_more_bg:    var( --unec_news_ink );
	--unec_news_more_ink:   var( --unec_news_white );
	--unec_news_tab_bg:     var( --unec_news_light );
	--unec_news_tab_ink:    var( --unec_news_ink );

	/* Pretendard cap-height trim constants — typo metrics, USE_TYPO_METRICS
	   is set on every shipped face (verified with fontTools):
	     upm 2048  sTypoAscender 1949  sTypoDescender -494  sCapHeight 1448
	     content area   (1949 + 494) / 2048 = 1.19287109375
	     ascender->cap  (1949 - 1448) / 2048 = 0.24462890625
	     descender             494  / 2048 = 0.2412109375
	     cap height           1448  / 2048 = 0.70703125            */
	--unec_news_m_area:     1.19287109375;
	--unec_news_m_over:     0.24462890625;
	--unec_news_m_under:    0.2412109375;
}

/* --------------------------------------------------------------------------
   2. Cap-height trim
   The element sets only --u_news_fs / --u_news_lh.
   Native text-box trim where the browser has it, Capsize negative-margin pair
   on display:table pseudo-elements otherwise — that form composes with the
   element's own margins instead of fighting them.
   -------------------------------------------------------------------------- */

#top .unec_news_sec .u_news_trim {
	font-size:   var( --u_news_fs );
	line-height: var( --u_news_lh );

	--u_news_half:  calc( ( var( --u_news_lh ) - var( --unec_news_m_area ) * var( --u_news_fs ) ) / 2 );
	--u_news_over:  calc( var( --u_news_half ) + var( --unec_news_m_over )  * var( --u_news_fs ) );
	--u_news_under: calc( var( --u_news_half ) + var( --unec_news_m_under ) * var( --u_news_fs ) );
}

#top .unec_news_sec .u_news_trim::before,
#top .unec_news_sec .u_news_trim::after {
	content: '';
	display: table;
}

#top .unec_news_sec .u_news_trim::before { margin-bottom: calc( -1 * var( --u_news_over  ) ); }
#top .unec_news_sec .u_news_trim::after  { margin-top:    calc( -1 * var( --u_news_under ) ); }

@supports ( text-box-trim: trim-both ) and ( text-box-edge: cap alphabetic ) {
	#top .unec_news_sec .u_news_trim {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	#top .unec_news_sec .u_news_trim::before,
	#top .unec_news_sec .u_news_trim::after { content: none; }
}

/* --------------------------------------------------------------------------
   3. Section shell
   -------------------------------------------------------------------------- */

#top .unec_news_sec {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding-top:    calc( var( --unec_news_pt, var( --unec_news_pad_v ) ) * var( --unec_news_pad_scale ) );
	padding-bottom: calc( var( --unec_news_pb, var( --unec_news_pad_v ) ) * var( --unec_news_pad_scale ) );
	padding-left:   var( --unec_news_gutter );
	padding-right:  var( --unec_news_gutter );
	color: var( --unec_news_ink );
	background-color: var( --unec_news_bg, transparent );
}

/* Enfold styles the bare element, which beats inheritance. Restate. */
#top .unec_news_sec,
#top .unec_news_sec * { font-family: var( --unec_news_font ); }

#top .unec_news_sec *,
#top .unec_news_sec *::before,
#top .unec_news_sec *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Container release — the ONLY !important in this file, and load-bearing.

   v1.0.1. This started out relying on `unec_svc_host` from unec-service/ and
   shipping no copy. That was wrong, and it failed on the live /blog/ page:
   **unec-service registers its stylesheet conditionally and only enqueues it
   when a `unec_svc` shortcode is on the page.** A page that carries only
   `[unec_news]` never loads that file, so the class on the Color Section is
   inert and the section stays inside Enfold's 1310px .container. It looks
   exactly like a typo in the class name; it is a missing stylesheet.

   General rule: **never depend on a rule that lives in a conditionally
   enqueued stylesheet belonging to another module.** Either enqueue that
   module's asset, or own the rule.

   `!important` is required because Enfold writes the container width into a
   generated per-page stylesheet (post-<id>.css) that is enqueued after this
   one, so an equally specific rule loses on source order.

   Both class names are honoured, so a section already set up with
   `unec_svc_host` keeps working and nothing has to be re-saved.
   -------------------------------------------------------------------------- */

#top .unec_news_host .container,
#top .unec_svc_host .container,
#top .container.unec_news_host,
#top .container.unec_svc_host {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Avia floats the column, the content wrapper and the entry wrapper; a
   floated ancestor drops the section out of flow and can collapse its
   parent to zero height. */
#top .unec_news_host .content,
#top .unec_news_host .flex_column,
#top .unec_news_host .entry-content-wrapper,
#top .unec_svc_host .content,
#top .unec_svc_host .flex_column,
#top .unec_svc_host .entry-content-wrapper { float: none; }

/* Sitting inside Enfold's .container instead of full width. */
#top .unec_news_sec.unec_news_contained {
	padding-left: 0;
	padding-right: 0;
}

#top .unec_news_inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_news_block_gap );
	width: 100%;
	max-width: var( --unec_news_max );
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Category tabs
   Plate 52px = 20 + the 12.02px cap-trimmed label + 20. The trim sits on the
   inner span; on the plate itself it would shrink the plate, not the text.
   -------------------------------------------------------------------------- */

#top .unec_news_tabs { width: 100%; }

#top .unec_news_tablist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --unec_news_tab_gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_news_tablist > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_news_tablist > li::marker { content: none; }

#top .unec_news_tab {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --unec_news_tab_py ) var( --unec_news_tab_px );
	background-color: var( --unec_news_tab_bg );
	color: var( --unec_news_tab_ink );
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#top .unec_news_tab_label {
	--u_news_fs: var( --unec_news_meta_fs );
	--u_news_lh: var( --unec_news_meta_lh );
	display: block;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	color: inherit;
}

#top .unec_news_tab:hover,
#top .unec_news_tab:focus-visible {
	--unec_news_tab_bg:  var( --unec_news_yellow );
	--unec_news_tab_ink: var( --unec_news_ink );
}

#top .unec_news_tab[aria-selected="true"],
#top .unec_news_tab[aria-selected="true"]:hover,
#top .unec_news_tab[aria-selected="true"]:focus-visible {
	--unec_news_tab_bg:  var( --unec_news_ink );
	--unec_news_tab_ink: var( --unec_news_white );
}

#top .unec_news_tab:focus-visible {
	outline: 2px solid var( --unec_news_ink );
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Body — list + Load More
   -------------------------------------------------------------------------- */

#top .unec_news_body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --unec_news_block_gap );
	width: 100%;
}

#top .unec_news_list {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.2s ease;
}

#top .unec_news_list[aria-busy="true"] { opacity: 0.45; }

#top .unec_news_list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_news_list > li::marker { content: none; }

/* (1,2,1) — has to outrank the "#top .unec_news_list > li" reset above, which
   carries a type selector and would otherwise zero this padding. */
#top .unec_news_list li.unec_news_item {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	padding: var( --unec_news_row_pad ) 0;
	border: 0;
}

/* The hairlines are drawn, not laid out. A real border would add its width to
   every row (456 instead of 455) and push the whole list 6px off the design;
   Figma strokes sit ON the boundary and consecutive rows share one. */
#top .unec_news_list li.unec_news_item::after,
#top .unec_news_list li.unec_news_item:first-child::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var( --unec_news_line );
	pointer-events: none;
}

#top .unec_news_list li.unec_news_item::after            { bottom: 0; }
#top .unec_news_list li.unec_news_item:first-child::before { top: 0; }

/* An author rule beats the UA stylesheet's [hidden] { display: none } whatever
   the specificity, so it has to be restated for anything this module hides. */
#top .unec_news_list li[hidden],
#top .unec_news_item[hidden],
#top .unec_news_more[hidden],
#top .unec_news_empty[hidden] { display: none; }

/* --- media ---------------------------------------------------------------- */

#top .unec_news_media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc( var( --unec_news_img ) + var( --unec_news_badge ) / 2 );
	text-decoration: none;
	color: inherit;
}

#top .unec_news_img {
	position: relative;
	display: block;
	width: var( --unec_news_img );
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var( --unec_news_light );
}

#top .unec_news_img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	transition: transform 0.4s ease;
}

#top .unec_news_item:hover .unec_news_img img,
#top .unec_news_item:focus-within .unec_news_img img { transform: scale( 1.04 ); }

/* the circle is centred on the media's right edge, vertically centred */
#top .unec_news_badge {
	position: absolute;
	top: 50%;
	left: var( --unec_news_img );
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --unec_news_badge );
	height: var( --unec_news_badge );
	margin: calc( var( --unec_news_badge ) / -2 ) 0 0 calc( var( --unec_news_badge ) / -2 );
	border-radius: 999px;
	background-color: var( --unec_news_badge_bg );
	color: var( --unec_news_badge_ink );
	transition: background-color 0.2s ease, color 0.2s ease;
}

#top .unec_news_badge svg {
	display: block;
	width:  var( --unec_news_icon );
	height: var( --unec_news_icon );
}

#top .unec_news_item:hover .unec_news_badge,
#top .unec_news_item:focus-within .unec_news_badge {
	--unec_news_badge_bg:  var( --unec_news_ink );
	--unec_news_badge_ink: var( --unec_news_white );
}

/* --- date ----------------------------------------------------------------- */

#top .unec_news_date {
	flex: 0 0 auto;
	width: var( --unec_news_date_w );
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* <time> is the flex container, not the <p>: the day and the month/year are
   its children, so the 56px gap has to be declared here. */
#top .unec_news_time {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_news_date_gap );
}

#top .unec_news_day {
	--u_news_fs: var( --unec_news_day_fs );
	--u_news_lh: var( --unec_news_day_lh );
	display: block;
	font-weight: 600;
	letter-spacing: -0.04em;
}

#top .unec_news_my {
	--u_news_fs: var( --unec_news_meta_fs );
	--u_news_lh: var( --unec_news_meta_lh );
	display: block;
	font-weight: 500;
	opacity: var( --unec_news_muted );
}

/* --- text ----------------------------------------------------------------- */

#top .unec_news_text {
	display: flex;
	flex: 0 1 var( --unec_news_text_w );
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --unec_news_head_gap );
	min-width: 0;
	max-width: var( --unec_news_text_w );
}

#top .unec_news_head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --unec_news_head_gap );
	width: 100%;
}

#top .unec_news_cat {
	--u_news_fs: var( --unec_news_meta_fs );
	--u_news_lh: var( --unec_news_meta_lh );
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: 500;
}

#top .unec_news_title {
	--u_news_fs: var( --unec_news_title_fs );
	--u_news_lh: var( --unec_news_title_lh );
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* NOT clamped. -webkit-line-clamp defeats the bottom half of the cap-height
   trim whenever the clamp is not actually truncating (measured: 60.8px
   instead of 53.8px on a title that already fits), and the two disagree
   silently. Length is controlled in PHP instead, which is also what produces
   the yellow ellipsis. */
#top .unec_news_title a {
	display: block;
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
}

#top .unec_news_item:hover .unec_news_title_txt,
#top .unec_news_title a:focus-visible .unec_news_title_txt { text-decoration: underline; }

/* --- the whole row is one link -------------------------------------------
   `row_link='yes'` (the default) stretches the title link over the entire
   row with a transparent overlay. The media is a <span> in that mode, so the
   row carries exactly ONE link: a screen reader reads one name instead of
   announcing the same destination twice, and Tab stops once per row.

   Known cost of the pattern: the overlay sits above the text, so the excerpt
   cannot be selected with the mouse. `row_link='no'` gives the earlier
   behaviour back — title and image clickable, text selectable.
   -------------------------------------------------------------------------- */

#top .unec_news_item_linked .unec_news_stretch::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The ring is drawn on the overlay, which is the row-sized box, so keyboard
   focus outlines the whole row rather than just the two lines of title. */
#top .unec_news_item_linked .unec_news_stretch:focus-visible { outline: none; }

#top .unec_news_item_linked .unec_news_stretch:focus-visible::after {
	outline: 2px solid var( --unec_news_ink );
	outline-offset: -4px;
}

#top .unec_news_title a.unec_news_plain:focus-visible {
	outline: 2px solid var( --unec_news_ink );
	outline-offset: 4px;
}

/* The badge is the affordance the design draws, so it must look pressable
   even though the click target is the whole row. */
#top .unec_news_item_linked .unec_news_badge { cursor: pointer; }

#top .unec_news_ell { color: var( --unec_news_yellow ); }

#top .unec_news_excerpt {
	--u_news_fs: var( --unec_news_meta_fs );
	--u_news_lh: var( --unec_news_meta_lh );
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: 400;
	opacity: var( --unec_news_muted );
}

/* --------------------------------------------------------------------------
   6. Load More
   -------------------------------------------------------------------------- */

#top .unec_news_more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --unec_news_more_gap );
	text-decoration: none;
	color: var( --unec_news_ink );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

#top .unec_news_more_label {
	--u_news_fs: var( --unec_news_label_fs );
	--u_news_lh: var( --unec_news_label_lh );
	display: block;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-align: center;
	white-space: nowrap;
	color: inherit;
}

#top .unec_news_more_circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width:  var( --unec_news_circle );
	height: var( --unec_news_circle );
	border-radius: 999px;
	background-color: var( --unec_news_more_bg );
	color: var( --unec_news_more_ink );
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* chevron-right rotated a quarter turn — the design's downward chevron */
#top .unec_news_more_circle svg {
	display: block;
	width:  var( --unec_news_icon );
	height: var( --unec_news_icon );
	transform: rotate( 90deg );
}

#top .unec_news_more:hover .unec_news_more_circle,
#top .unec_news_more:focus-visible .unec_news_more_circle {
	--unec_news_more_bg:  var( --unec_news_yellow );
	--unec_news_more_ink: var( --unec_news_ink );
}

#top .unec_news_more:focus-visible {
	outline: 2px solid var( --unec_news_ink );
	outline-offset: 6px;
}

#top .unec_news_more.is_loading { pointer-events: none; }

#top .unec_news_more.is_loading .unec_news_more_circle {
	animation: unec_news_pulse 0.9s ease-in-out infinite;
}

@keyframes unec_news_pulse {
	0%, 100% { opacity: 1;   }
	50%      { opacity: 0.4; }
}

@media ( prefers-reduced-motion: reduce ) {
	#top .unec_news_sec * { transition: none; }
	#top .unec_news_more.is_loading .unec_news_more_circle { animation: none; }
	#top .unec_news_media:hover .unec_news_img img { transform: none; }
}

/* --------------------------------------------------------------------------
   7. Status region + empty state
   -------------------------------------------------------------------------- */

#top .unec_news_status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

#top .unec_news_empty {
	--u_news_fs: var( --unec_news_label_fs );
	--u_news_lh: var( --unec_news_label_lh );
	display: block;
	width: 100%;
	margin: 0;
	padding: var( --unec_news_row_pad ) 0;
	font-weight: 500;
	letter-spacing: -0.01em;
	opacity: var( --unec_news_muted );
}

/* --------------------------------------------------------------------------
   8. Responsive ladder — 1400 / 1180 / 1024 / 768 / 480
   Custom properties only, apart from the stack below 1024.
   Nothing here re-declares --unec_news_pt / --unec_news_pb: the renderer
   writes those inline and an inline declaration beats every stylesheet rule.
   -------------------------------------------------------------------------- */

@media ( max-width: 1400px ) {
	#top .unec_news_sec {
		--unec_news_pad_scale: 0.8;
		--unec_news_block_gap: 64px;
		--unec_news_row_pad:   48px;
		--unec_news_img:       300px;
		--unec_news_text_w:    600px;
		--unec_news_date_gap:  40px;
		--unec_news_head_gap:  32px;
		--unec_news_day_fs:    80px;  --unec_news_day_lh:   76px;
		--unec_news_date_w:    100px;
	}
}

@media ( max-width: 1180px ) {
	#top .unec_news_sec {
		--unec_news_pad_scale: 0.7;
		--unec_news_block_gap: 56px;
		--unec_news_row_pad:   44px;
		--unec_news_img:       260px;
		--unec_news_text_w:    460px;
		--unec_news_date_gap:  32px;
		--unec_news_day_fs:    68px;  --unec_news_day_lh:   64px;
		--unec_news_date_w:    88px;
		--unec_news_title_fs:  24px;  --unec_news_title_lh: 30px;
	}
}

@media ( max-width: 1024px ) {
	#top .unec_news_sec {
		--unec_news_pad_scale: 0.6;
		--unec_news_gutter:    40px;
		--unec_news_block_gap: 48px;
		--unec_news_row_pad:   40px;
		--unec_news_img:       320px;
		--unec_news_date_gap:  16px;
		--unec_news_head_gap:  24px;
		--unec_news_day_fs:    64px;  --unec_news_day_lh:   60px;
		--unec_news_title_fs:  24px;  --unec_news_title_lh: 30px;
	}

	/* Stack: media, then a horizontal date row, then the text.
	   The selector has to match the base rule's specificity (1,2,1) — the
	   shorter "#top .unec_news_item" is (1,1,0) and silently loses, which
	   leaves the desktop three-column row in place on a phone. */
	#top .unec_news_list li.unec_news_item {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --unec_news_head_gap );
	}

	#top .unec_news_media {
		width: 100%;
		max-width: calc( var( --unec_news_img ) + var( --unec_news_badge ) / 2 );
	}

	#top .unec_news_img { width: 100%; }

	#top .unec_news_badge { left: 100%; }

	#top .unec_news_date { width: auto; }

	#top .unec_news_time {
		flex-direction: row;
		align-items: baseline;
		gap: 16px;
	}

	#top .unec_news_my { white-space: nowrap; }

	#top .unec_news_text {
		flex: 1 1 auto;
		max-width: none;
	}
}

@media ( max-width: 768px ) {
	#top .unec_news_sec {
		--unec_news_pad_scale: 0.45;
		--unec_news_gutter:    24px;
		--unec_news_block_gap: 40px;
		--unec_news_row_pad:   32px;
		--unec_news_img:       280px;
		--unec_news_tab_px:    22px;
		--unec_news_tab_py:    16px;
		--unec_news_day_fs:    56px;  --unec_news_day_lh:   52px;
		--unec_news_title_fs:  22px;  --unec_news_title_lh: 28px;
		--unec_news_label_fs:  18px;  --unec_news_label_lh: 26px;
		--unec_news_circle:    48px;
		--unec_news_badge:     48px;
		--unec_news_icon:      20px;
	}
	
	#top .unec_news_excerpt {
		font-size: 15px !important;
		line-height: 18px !important;
	}
}

@media ( max-width: 480px ) {
	#top .unec_news_sec {
		--unec_news_pad_scale: 0.35;
		--unec_news_block_gap: 32px;
		--unec_news_row_pad:   28px;
		--unec_news_img:       240px;
		--unec_news_tab_px:    16px;
		--unec_news_tab_py:    14px;
		--unec_news_meta_fs:   16px;  --unec_news_meta_lh:  24px;
		--unec_news_day_fs:    48px;  --unec_news_day_lh:   44px;
		--unec_news_title_fs:  20px;  --unec_news_title_lh: 26px;
	}

	#top .unec_news_tablist { gap: 8px; }
}