@charset "utf-8";
/* ============================================================
   English-only adjustments.
   The Korean design CSS files (layout/main/sub/responsive...) are
   imported as-is and never edited. This file is loaded LAST and
   holds tweaks that are specific to the English site.

   Why: English menu labels ("Get Involved", "Activities",
   "Resources") are noticeably wider than the Korean originals,
   so with the Korean spacing the six top-menu items overflow and
   collide with the search icon. Below we trim the per-item spacing
   and font size at each screen-width breakpoint so all six labels
   fit on one line. Values mirror the breakpoints in responsive.css.
   ============================================================ */

/* Never let a single menu label wrap onto a second line. */
#gnb > ul > li > a { white-space: nowrap; }

/* All widths: cap the per-item spacing so the six labels always clear the
   search icon — including the widest screens AND the hover/mega-menu state
   (the Korean default widens to 88px on hover, which overflows in English). */
#gnb > ul > li,
#header.hactive #gnb > ul > li { padding: 0 44px; }

/* Wide desktops (1400–1660px): trim a little more. */
@media (max-width: 1660px) {
	#gnb > ul > li,
	#header.hactive #gnb > ul > li { padding: 0 40px; }
}

/* Standard laptops (1200–1400px). */
@media (max-width: 1400px) {
	#gnb { margin-left: 190px; }
	#gnb > ul > li,
	#header.hactive #gnb > ul > li { padding: 0 28px; }
	#gnb > ul > li > a { font-size: 20px; }
}

/* Small laptops / large tablets (1024–1200px). */
@media (max-width: 1200px) {
	#gnb { margin-left: 170px; }
	#gnb > ul > li,
	#header.hactive #gnb > ul > li { padding: 0 22px; }
	#gnb > ul > li > a { font-size: 18px; }
}

/* ============================================================
   Mobile menu (≤1024px).
   The Korean site served a separate mobile theme; this single
   responsive site instead uses an off-canvas hamburger menu,
   built from nav.php so it always matches the desktop GNB.
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on mobile. */
.m-menu-btn { display: none; }

@media (max-width: 1024px) {
	/* On mobile we show only the logo + hamburger. */
	#header .head-btn,
	#header .sitemap-btn { display: none; }

	.m-menu-btn {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		width: 34px;
		height: 28px;
		margin-top: -14px;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		z-index: 30;
	}
	.m-menu-btn span {
		display: block;
		width: 100%;
		height: 3px;
		margin: 5px 0;
		border-radius: 3px;
		background: #111;
		transition: all 0.3s;
	}
	/* White bars over the transparent hero header on the homepage. */
	#main #header:not(.sc):not(.hactive) .m-menu-btn span { background: #fff; }
}

/* Dim overlay behind the panel. */
.m-nav-dim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s;
}
.m-nav-dim.on { display: block; opacity: 1; }

/* Off-canvas panel — slides in from the right. */
.m-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 320px;
	max-width: 85vw;
	height: 100%;
	background: #fff;
	z-index: 9999;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.m-nav.on { transform: translateX(0); }
body.m-nav-open { overflow: hidden; }

.m-nav-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 20px;
	border-bottom: 1px solid #eee;
}
.m-nav-logo img { height: 34px; }
.m-nav-close {
	position: relative;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
}
.m-nav-close:before,
.m-nav-close:after {
	content: '';
	position: absolute;
	left: 6px;
	top: 15px;
	width: 22px;
	height: 2px;
	background: #111;
}
.m-nav-close:before { transform: rotate(45deg); }
.m-nav-close:after  { transform: rotate(-45deg); }

.m-nav-list > li { border-bottom: 1px solid #eee; }
.m-sec {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.m-sec > a {
	flex: 1;
	display: block;
	padding: 18px 20px;
	font-size: 18px;
	font-weight: 600;
	color: #111;
}
.m-acc {
	width: 60px;
	background: none;
	border: 0;
	border-left: 1px solid #eee;
	position: relative;
	cursor: pointer;
}
.m-acc:before,
.m-acc:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: #888;
	transition: all 0.3s;
}
.m-acc:before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.m-acc:after  { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.m-nav-list > li.open .m-acc:after { transform: rotate(90deg); opacity: 0; }
.m-nav-list > li.open .m-acc:before { background: #ff6714; }

.m-sub {
	max-height: 0;
	overflow: hidden;
	background: #f7f7f7;
	transition: max-height 0.35s ease;
}
.m-nav-list > li.open .m-sub { max-height: 600px; }
.m-sub > li > a {
	display: block;
	padding: 14px 20px 14px 34px;
	font-size: 16px;
	color: #555;
	border-top: 1px solid #ececec;
}
.m-sub > li > a:hover { color: #ff6714; }

.m-nav-foot { padding: 24px 20px; }
.m-nav-search {
	display: block;
	text-align: center;
	padding: 14px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	color: #333;
	font-size: 15px;
}
.m-nav-ko {
	display: block;
	text-align: center;
	padding: 14px;
	background: #ff6714;
	color: #fff;
	border-radius: 6px;
	font-size: 15px;
}

/* ============================================================
   Board (news / notices / publications etc.)
   ============================================================ */
/* Board list pages: the heading + list sit in a slightly narrower, centred
   wrapper (the heading stays aligned with the list's left edge). */
.board-wrap { max-width: 1340px; margin: 0 auto; }
.board { font-size: 16px; color: #333; }
.board a { color: inherit; }
.board-write { max-width: 1100px; }                /* keep the write form comfortable */

/* Article (detail) page: a wide header (title/meta) with a narrower, centered
   reading column for the body and the rest. */
.board-view { max-width: none; }
.view-body,
.view-files,
.view-nav,
.board-view .board-foot { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* List header: total + search */
.board-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}
.board-total { font-size: 16px; color: #555; }
.board-total strong { color: #ff6714; }
.board-search { display: flex; gap: 8px; }
.board-search input {
	width: 240px; max-width: 60vw; height: 44px;
	border: 1px solid #ddd; border-radius: 6px; padding: 0 14px; font-size: 15px;
}
.board-search button {
	height: 44px; padding: 0 22px; border: 0; border-radius: 6px;
	background: #111; color: #fff; font-size: 15px; cursor: pointer;
}
.board-search button:hover { background: #ff6714; }

/* Category tabs */
.board-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.board-cats a {
	padding: 8px 18px; border: 1px solid #ddd; border-radius: 30px;
	font-size: 15px; color: #666;
}
.board-cats a.on { background: #ff6714; border-color: #ff6714; color: #fff; }

/* List table.
   NOTE: the Korean board.css uses `.board-list` as a wrapper DIV and sets
   `display:block` on it. Here `.board-list` IS the <table>, so we must force
   `display:table` back, otherwise the table collapses to content width and
   sits left-aligned. */
.board-list { width: 100%; display: table; border-collapse: collapse; border-top: 2px solid #222; }
.board-list th, .board-list td {
	padding: 16px 10px; text-align: center; font-size: 15px;
	border-bottom: 1px solid #eee;
}
.board-list thead th { font-weight: 600; color: #555; background: #fafafa; }
.board-list td.t-title { text-align: left; }
/* reset.css sets `a { display:block }`, which would stack the title, the ↗ icon
   and the admin edit link onto separate full-width lines. Keep them inline. */
.board-list td.t-title a { display: inline; font-weight: 500; color: #222; vertical-align: middle; }
.board-list td.t-title a:hover { color: #ff6714; text-decoration: underline; }
.board-list tr.notice { background: #fff8f3; }
.board-list .badge {
	display: inline-block; padding: 3px 12px; border-radius: 20px;
	background: #ff6714; color: #fff; font-size: 12px; font-weight: 600;
}
.board-list .clip { color: #ff6714; }
.board-empty { color: #767676; padding: 60px 0 !important; text-align: center; }

/* ── Board list — readable row layout (title · date · circular arrow) ──────
   Replaces the old No./Title/Date/Views table. Each row links to the post;
   the arrow circle turns the KoSIF key colour on hover. */
.board-list2 { list-style: none; margin: 0 0 10px; padding: 0; border-top: 2px solid #222; }
.brow { display: flex; align-items: center; gap: 20px; padding: 22px 16px; border-bottom: 1px solid #e6e6e6; transition: background .2s; }
.brow:hover { background: #fafafa; }
.brow-no { flex: 0 0 56px; text-align: center; color: #aaa; font-size: 15px; }
/* Single-board list: admin-managed "Category" (분류) column, shown between the
   number and the title when the board has categories (see board_cats()). */
.brow-cat { flex: 0 0 132px; text-align: center; }
/* Fill the column so every chip is the same width (a uniform, tidy column)
   instead of each grey box hugging its label at a different width. */
.brow-cat-chip { display: inline-block; width: 100%; text-align: center; font-size: 14px; font-weight: 600; color: #555; background: #f0f0f0; padding: 4px 10px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; vertical-align: middle; }
.brow-cat-empty { color: #ccc; }
/* Search-hit highlight: the matched keyword in a result title stands out in
   KoSIF orange so it's easy to spot. Stays distinct even on row hover. */
mark.s-hl { background: #ffe0c7; color: #d24500; font-weight: 700; padding: 0 2px; border-radius: 3px; }
.brow:hover mark.s-hl { background: #ffd3b3; }
.brow-notice { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 5px; background: #ff6714; color: #fff; }
.brow-main { flex: 1 1 auto; min-width: 0; }
.brow-tit { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-size: 18px; color: #222; line-height: 1.5; transition: color .2s; }
.brow:hover .brow-tit { color: #ff6714; }
/* Search result content preview (only when searching): a 2-line excerpt of the
   body around the matched keyword, shown under the title. */
.brow-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 6px; font-size: 14px; line-height: 1.55; color: #6f6f6f; }
.gal-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 6px; font-size: 13px; line-height: 1.5; color: #6f6f6f; }
.brow-tag { display: inline-block; font-size: 13px; font-weight: 600; margin-right: 9px; padding: 3px 10px; border-radius: 5px; vertical-align: middle; }
.brow-tag.notice { background: #ff6714; color: #fff; }
/* Aggregate lists (All News): give the category chip a uniform width so the
   titles beside it line up in a clean column instead of starting at a different
   x on every row (chip text length varied: "Press Releases" vs "Resources"). */
.brow-tag.board { background: #f0f0f0; color: #666; box-sizing: border-box; min-width: 112px; text-align: center; }
@media (max-width: 768px) {
	.brow-tag.board { min-width: 88px; font-size: 12px; }
}
.brow-tit .ext { color: #ff6714; font-size: 14px; font-weight: 700; margin-left: 6px; }
.brow-tit .clip { color: #ff6714; font-size: 13px; margin-left: 6px; }
.brow-date { flex: 0 0 auto; color: #767676; font-size: 15px; white-space: nowrap; }
.brow .row-edit { flex: 0 0 auto; }
.brow-go { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d8d8d8;
	display: flex; align-items: center; justify-content: center; transition: .2s; }
.brow-go::after { content: ''; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333;
	transform: rotate(45deg); margin-left: -3px; transition: .2s; }
.brow:hover .brow-go { background: #ff6714; border-color: #ff6714; }
.brow:hover .brow-go::after { border-color: #fff; }
.brow.is-notice { background: #fff8f3; }
.brow-empty { color: #767676; text-align: center; padding: 60px 0; border-bottom: 1px solid #e6e6e6; }
/* Mobile: the desktop row squeezes [no][category][title][date][arrow] onto one
   line, so the title (the thing readers actually want) got clipped to "2026 C…".
   Restyle each row as a stacked card: a compact meta line (number · category ·
   date) on top, then the FULL title on its own wrapping line, with the arrow
   pinned to the right edge and vertically centred. */
@media (max-width: 640px) {
	.brow { flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 46px 14px 10px; position: relative; }
	.brow-no { order: 1; flex: 0 0 auto; min-width: 0; text-align: left; font-size: 13px; }
	.brow-cat { order: 2; flex: 0 0 auto; width: auto; text-align: left; }
	.brow-cat-chip { width: auto; font-size: 11px; padding: 3px 8px; }
	.brow-date { order: 3; margin-left: auto; flex: 0 0 auto; font-size: 12px; }
	.brow-main { order: 4; flex: 1 1 100%; min-width: 0; }
	/* Let the title use as many lines as it needs instead of ellipsis-clipping. */
	.brow-tit { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.45; }
	/* On the aggregate (All News) list the board chip sits inline before the
	   title — let it hug its label so it doesn't shove the title off-screen. */
	.brow-tag.board { min-width: 0; margin-right: 8px; }
	.brow .row-edit, .brow .row-del-form { order: 5; }
	.brow-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; width: 34px; height: 34px; }
}

/* All News (aggregate board): shows which board each post came from */
.board-allnews td.t-board { text-align: center; }
.board-allnews td.t-board a {
	display: inline-block; padding: 3px 12px; border-radius: 20px;
	background: #f1f3f5; color: #555; font-size: 13px; font-weight: 500;
}
.board-allnews td.t-board a:hover { background: #ffe8d8; color: #ff6714; }

/* Gallery board (Resources): cover-thumbnail cards instead of a list */
.board-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* 4 cards per row, full width */
	gap: 36px 28px;
}
@media (max-width: 1200px) {
	.board-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.board-gallery { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}
.gal-item { position: relative; }
.gal-card { display: block; }
.gal-thumb {
	position: relative; display: block;
	aspect-ratio: 210 / 297;   /* A4 portrait — matches the report/publication covers, no cropping */
	background: #f1f1f1; border: 1px solid #eee; border-radius: 8px; overflow: hidden;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gal-card:hover .gal-thumb img { transform: scale(1.05); }
.gal-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 14px; }
.gal-badge { position: absolute; top: 10px; left: 10px; background: #ff6714; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px; }
.gal-tit { display: block; margin-top: 14px; font-size: 16px; font-weight: 500; color: #222; line-height: 1.45; }
.gal-card:hover .gal-tit { color: #ff6714; }
.gal-tit .ext { color: #ff6714; }
.gal-date { display: block; margin-top: 6px; font-size: 13px; color: #767676; }
.gal-edit { position: absolute; top: 10px; right: 10px; margin-left: 0; }

/* Footer buttons */
.board-foot {
	display: flex; gap: 8px; justify-content: flex-end; align-items: center;
	margin-top: 26px;
}
.board-foot a, .board-foot button {
	display: inline-block; height: 48px; line-height: 48px; padding: 0 30px;
	border-radius: 6px; font-size: 16px; font-weight: 600; letter-spacing: .01em;
	border: 0; cursor: pointer; text-align: center; text-decoration: none !important;
}
/* !important on color: the theme's generic `a` colour otherwise overrides the
   link-style buttons (List/Edit are <a>), leaving dark text on a dark button. */
.btn-write { background: #ff6714; color: #fff !important; }
.btn-list  { background: #5b6470; color: #fff !important; }
.btn-edit  { background: #1a8a4f; color: #fff !important; }
.btn-del   { background: #e03131; color: #fff !important; }
.board-foot a:hover, .board-foot button:hover { opacity: 1; filter: brightness(1.08); box-shadow: 0 3px 10px rgba(0,0,0,.18); }

/* Pagination */
.paging { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.paging a, .paging strong {
	min-width: 40px; height: 40px; line-height: 40px; text-align: center;
	border: 1px solid #ddd; border-radius: 6px; font-size: 15px; color: #666; display: inline-block;
}
.paging strong { background: #ff6714; border-color: #ff6714; color: #fff; }
.paging a:hover { border-color: #ff6714; color: #ff6714; }

/* Detail view */
.board-view .view-head { border-top: 2px solid #222; border-bottom: 1px solid #eee; padding: 26px 6px; }
.view-head .badge { display: inline-block; margin-right: 8px; }
.view-cat { display: inline-block; margin-right: 8px; color: #ff6714; font-weight: 600; font-size: 14px; }
.view-title { font-size: 26px; font-weight: 600; color: #111; line-height: 1.4; margin: 6px 0 14px; }
.view-meta { color: #888; font-size: 14px; }
.view-meta span { margin-right: 16px; }
.view-files { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 16px 20px; margin-top: 20px; }
.view-files .vf-tit { font-weight: 600; margin-bottom: 8px; color: #444; }
.view-files li { padding: 4px 0; }
.view-files a:hover { color: #ff6714; text-decoration: underline; }
.view-body { padding: 40px 6px 50px; min-height: 160px; line-height: 1.8; font-size: 16px; word-break: break-word; }
/* Post body defaults to the Inter web font (loaded in header.php) so every post
   reads in a clean, consistent typeface for every visitor — even those without
   Inter installed — without the author having to pick a font each time. Text
   that explicitly chose a font in the editor keeps its own inline font-family. */
.view-body { font-family: 'Inter', 'Open Sans', sans-serif; }
/* Same default inside the Summernote editor so the author writes in Inter and
   what they see matches the published post. (summernote-lite.css loads after
   this file, so !important keeps our default from being overridden.) */
.note-editable { font-family: 'Inter', 'Open Sans', sans-serif !important; }
.view-body img { max-width: 100%; height: auto; }
.view-body p { margin: 0 0 1em; }
.view-nav { border-top: 1px solid #eee; }
.view-nav .vn-row { display: flex; align-items: center; gap: 16px; padding: 16px 6px; border-bottom: 1px solid #eee; }
.view-nav .vn-row span { width: 60px; color: #767676; font-size: 14px; flex: none; }
.view-nav .vn-row a { color: #444; }
.view-nav .vn-row a:hover { color: #ff6714; }

/* Write / edit form */
.board-write .wf-row { margin-bottom: 16px; }
.wf-inline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wf-date { font-size: 15px; color: #555; display: flex; align-items: center; gap: 8px; }
.wf-date input { height: 46px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px; font-size: 15px; }
.wf-cat { height: 46px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px; font-size: 15px; }
.wf-notice { font-size: 15px; color: #555; display: flex; align-items: center; gap: 6px; }
.wf-title { width: 100%; height: 52px; border: 1px solid #ddd; border-radius: 6px; padding: 0 16px; font-size: 17px; }
.wf-link { width: 100%; height: 46px; border: 1px solid #ddd; border-radius: 6px; padding: 0 14px; font-size: 15px; }
.wf-hint { margin-top: 6px; font-size: 13px; color: #767676; }
.wf-label { display: block; margin-bottom: 8px; color: #555; font-size: 14px; }

/* External-link indicator + admin inline edit link in the list */
.board-list .ext { color: #ff6714; font-size: 14px; font-weight: 700; }
.row-edit { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 1.6; color: #fff !important; background: #1f7a4d; padding: 2px 9px; border-radius: 4px; margin-left: 8px; white-space: nowrap; }
.row-edit:hover { opacity: .85; color: #fff !important; text-decoration: none !important; }
/* Admin inline "delete" control (red pill, sibling to row-edit) */
.row-del-form { display: inline; margin: 0; padding: 0; }
.brow .row-del-form { flex: 0 0 auto; }
.row-del { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 1.6; color: #fff; background: #b23b3b; padding: 2px 9px; border-radius: 4px; margin-left: 6px; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; }
.row-del:hover { opacity: .85; }
.gal-item .row-del-form { position: absolute; top: 10px; right: 56px; }
.gal-item .row-del { margin-left: 0; }
.wf-existing { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 14px 18px; }
.wf-existing p { margin-bottom: 8px; color: #444; font-weight: 500; }
.wf-existing label { display: block; padding: 4px 0; font-size: 14px; color: #666; }
/* Multiple file attachments (write form) */
.wf-file { display: block; margin-bottom: 8px; }
.wf-addfile { display: inline-block; margin-top: 4px; padding: 8px 18px; background: #fff; border: 1px solid #ff6714; color: #ff6714; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.wf-addfile:hover { background: #ff6714; color: #fff; }
.wf-hint { margin-top: 10px; font-size: 13px; color: #888; }

/* Login */
.login-box { max-width: 420px; margin: 0 auto; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box label { font-size: 15px; color: #555; }
.login-box input { height: 50px; border: 1px solid #ddd; border-radius: 6px; padding: 0 16px; font-size: 16px; }
.login-box button { height: 50px; border: 0; border-radius: 6px; background: #ff6714; color: #fff; font-size: 16px; cursor: pointer; }
.login-err { color: #c0392b; margin-bottom: 14px; text-align: center; }

@media (max-width: 768px) {
	.board-list colgroup, .board-list thead { display: none; }
	.board-list, .board-list tbody, .board-list tr, .board-list td { display: block; width: 100%; }
	.board-list tr { padding: 12px 4px; border-bottom: 1px solid #eee; }
	.board-list td { border: 0; padding: 2px 6px; text-align: left; }
	.board-list td.t-title { font-size: 16px; margin-bottom: 4px; }
	.board-list td:not(.t-title) { display: inline-block; width: auto; color: #767676; font-size: 13px; margin-right: 12px; }
	.view-title { font-size: 22px; }
}

/* ===================================================================
   Our Work (Activities landing) — English overrides.
   English copy runs longer and varies in length, so instead of the
   Korean bottom-anchored .box we lay each card out top-down:
   image → title → text (all starting at the same Y across cards) with
   the arrow pinned to the bottom. This keeps every card's text aligned.
   The card markup is .ourwork-specific (figure / strong / p / .link as
   direct children of the <a>), so these rules fully own the layout.
   =================================================================== */
.ourwork .sec1 .tbx { padding-left: 8%; padding-right: 8%; }
.ourwork .sec1 .tbx strong { font-size: 26px; line-height: 38px; margin-bottom: 18px; }
.ourwork .sec1 .tbx p { font-size: 18px; line-height: 30px; }

/* Cards: equal height, top-aligned content */
.ourwork .sec2 ul > li { height: auto; min-height: 440px; }
.ourwork .sec2 ul > li > a { display: flex; flex-direction: column; height: 100%; }
/* Fixed-height logo band: the card logos vary a lot in height (44–140px),
   so we pin the figure to a constant height and center the logo inside it.
   That way every title starts at exactly the same Y across all cards. */
.ourwork .sec2 ul > li figure {
	display: flex; align-items: center; justify-content: flex-end;
	height: 124px; margin-bottom: 26px;
}
.ourwork .sec2 ul > li figure img { max-height: 118px; max-width: 80%; width: auto; }
.ourwork .sec2 ul > li > a > strong {
	display: block; font-size: 28px; line-height: 1.3; color: #111;
	font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px;
}
.ourwork .sec2 ul > li > a > p { font-size: 17px; line-height: 27px; color: #666; }

/* Arrow circle pinned to the bottom-right of every card */
.ourwork .sec2 ul > li .link { margin-top: auto; padding-top: 26px; }
.ourwork .sec2 ul > li .link span {
	position: relative; box-sizing: border-box; display: flex; margin-left: auto;
	width: 60px; height: 60px; border: 1px solid #ddd; border-radius: 50%; transition: .3s;
}
.ourwork .sec2 ul > li .link span:before,
.ourwork .sec2 ul > li .link span:after {
	position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%;
	background: url(../img/sub/s21-link.png) center no-repeat; transition: .3s;
}
.ourwork .sec2 ul > li .link span:after { background: url(../img/sub/s21-link-h.png) center no-repeat; opacity: 0; }
.ourwork .sec2 ul > li:hover .link span { border-color: #ff6714; background: #ff6714; }
.ourwork .sec2 ul > li:hover .link span:before { opacity: 0; }
.ourwork .sec2 ul > li:hover .link span:after { opacity: 1; }

@media (max-width: 1024px) {
	.ourwork .sec2 { padding: 70px 0 80px; }
	.ourwork .sec2 ul { gap: 24px; }
	.ourwork .sec2 ul > li { flex: 1 1 100%; min-height: 0; padding: 40px 28px; }
	.ourwork .sec2 ul > li > a > strong { font-size: 24px; }
	.ourwork .sec1 .tbx strong { font-size: 21px; line-height: 31px; }
	.ourwork .sec1 .tbx p { font-size: 16px; line-height: 26px; }
	/* Single-column on mobile: the desktop logo band is right-aligned and the
	   generic .s21 rule shrinks the logo to ~16vw (tiny). Left-align it with the
	   title/text and give it a comfortable size so it doesn't look lost. */
	.ourwork .sec2 ul > li figure {
		justify-content: flex-start; height: auto; min-height: 0; margin-bottom: 22px;
	}
	.ourwork .sec2 ul > li figure img { max-height: 92px; max-width: 62%; }
}

/* ── RE100 (s241) ───────────────────────────────────────────────────────
   The "Renewable Electricity Transition" box is fixed at 410px with
   overflow:hidden in sub.css. English copy runs 3 paragraphs (Korean has 2),
   so it overflows and gets clipped. Let the box grow to fit the text. */
.wi_re100 .s241 .cnt01 .col > div { height: auto; min-height: 410px; }
/* Readability: white copy sits on a photo of solar panels, so bright spots
   swallow the text. Lay a dark scrim over the photo and open up the spacing.
   (Left .tit box left untouched per request — only the long .txt box gets the scrim.) */
.wi_re100 .s241 .cnt01 .col .txt {
	background-image: linear-gradient(rgba(10,18,12,.50), rgba(10,18,12,.50)), url('../img/sub/re100-01-bg02.jpg');
}
.wi_re100 .s241 .cnt01 .col .txt p { line-height: 1.75em; margin-bottom: 22px; }
/* cnt02 member-list pills: English labels ("View Global member list") are longer
   than the Korean ones and wrap to two lines. Keep them on one line on desktop.
   (≤1024px already uses an auto-width pill in responsive_sub.css — leave it.) */
@media (min-width: 1025px) {
	/* Widen the .txt so the right-anchored pill sits further from the Korea/Global
	   label on its left (extra left gap for the pill). */
	.wi_re100 .s241 .cnt02 .txt-box .txt { max-width: 500px; padding-right: 282px; }
	.wi_re100 .s241 .cnt02 .txt-box .txt .more {
		width: 268px; font-size: 17px; white-space: nowrap; padding: 0 40px 0 22px;
	}
}
/* cnt03: the peach "Member Requirements" box was too tall (46px vert padding)
   for its 2 lines — trim it. And the guidance line is a bare <p> (default ~16px),
   so bump it up to read clearly. */
.wi_re100 .s241 .cnt03 .txt-box .txt ul { padding-top: 28px; padding-bottom: 28px; }
.wi_re100 .s241 .cnt03 .txt-box .txt p { font-size: 26px; line-height: 1.6em; color: #888; font-weight: 500; text-align: center; }
/* Contact box: enlarge the email so it reads clearly (was 20px). */
.wi_re100 .s241 .white ol > li { font-size: 26px; }
/* cnt03 bottom area: tighten the gap above the Contact box so the guidance
   line sits closer (was .col 100px below + .white 90px above). */
.wi_re100 .s241 .cnt03 .col { margin-bottom: 30px; }
.wi_re100 .s241 .cnt03 .white { margin-top: 80px; }
/* cnt02 (peach "Progress" section): trim the tall bottom gap. The 180px section
   padding was only part of it — the LAST stat column keeps its 70px margin +
   70px padding (only its border is removed), leaving a big empty band. Zero it. */
.wi_re100 .s241 .cnt02 { padding-bottom: 110px; }
.wi_re100 .s241 .cnt02 .col:last-child { margin-bottom: 0; padding-bottom: 0; }

/* ── CoREi (s261) ───────────────────────────────────────────────────────
   Match RE100's clean footer: center the "View CoREi Updates" button and give
   the Contact box the same comfortable gap above it (sub.css set .s251 .white
   to a very tall 160px). */
.wi_re100 .s261 .sec4 .sub-more { text-align: center; }
.wi_re100 .s261 .sec4 .sub-more > a { margin-left: auto; margin-right: auto; }
.wi_re100 .s261 .white { margin-top: 80px; }
/* Key Activities (sec3): the gray sub-point list (English copy is longer than
   Korean) felt dense at 20px — shrink it for easier reading. */
.wi_re100 .s261 .sec3 .col > .txt-box ul > li ol > li { font-size: 17px; line-height: 27px; }
/* How to Participate (sec4): the 4 steps used flex-wrap + 82px side padding, so
   the long English "Step 3" text pushed them into a broken 2x2 grid. Force one
   row of 4 equal columns and let each step's text wrap inside its column. */
.wi_re100 .s261 .sec4 .contain > ol { flex-wrap: nowrap; }
.wi_re100 .s261 .sec4 .contain > ol > li { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.wi_re100 .s261 .sec4 .contain > ol > li .tbx p { font-size: 19px; line-height: 28px; }
/* The step arrow png is a WHITE circle + gray chevron, which clashed with the
   peach section bg. Recreate it in the bg colour: a peach disc (same as the
   section, so it's invisible but masks the connector line) with an SVG chevron
   on top. The line now breaks cleanly around the arrow instead of running under it.
   Only between steps, never after the last one. */
.wi_re100 .s261 .sec4 .contain > ol > li:not(:last-child):after {
	width: 42px; height: 42px; border: 0; border-radius: 50%; transform: none;
	background: #f9f3f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20'%3E%3Cpath d='M2.5 2 L9.5 10 L2.5 18' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	right: -21px; top: 59px;
}
/* The connector line overshot past the first/last circles (the old fixed
   calc width no longer fits the 4 equal columns). Span it from the first circle
   centre to the last so the ends tuck under the circles — no stray stubs. */
.wi_re100 .s261 .sec4 .contain > ol > li:first-child:before { left: 50%; width: 300%; }
/* CoREi Progress (sec2): the "View CoREi Members List" pill was a fixed 204px,
   so the longer English label wrapped to two lines. Let it size to its text on
   one line. (General rule: link pills should never wrap.) */
.wi_re100 .s261 .sec2 .box .link-box { text-align: center; }
.wi_re100 .s261 .sec2 .box .link-box .more {
	display: inline-block; width: auto; white-space: nowrap; padding: 0 32px; font-size: 18px;
}
/* The arrow is a :after with width/height but no display, so as an inline box
   it collapsed to 0 and vanished. Make it a real inline-block icon on the line. */
.wi_re100 .s261 .sec2 .box .link-box .more:after {
	display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: middle;
}

/* ── EV100 (s251) ───────────────────────────────────────────────────────
   Same treatment as RE100's cnt02/cnt03. Scoped with :not(.s261) because the
   CoREi page also carries .s251 (it's "s251 s261"); these rules must hit only
   the standalone EV100 page. */
@media (min-width: 1025px) {
	/* Member-list pills on one line, pushed away from the Korea/Global label. */
	.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt02 .txt-box .txt { max-width: 500px; padding-right: 282px; }
	.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt02 .txt-box .txt .more {
		width: 268px; font-size: 17px; white-space: nowrap; padding: 0 40px 0 22px;
	}
}
/* cnt02 (peach "Progress" section): trim the tall bottom gap + zero the last
   column's leftover margin/padding (border removed but spacing remained). */
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt02 { padding-bottom: 110px; }
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt02 .col:last-child { margin-bottom: 0; padding-bottom: 0; }
/* cnt03 "Member Requirements" peach box: trim vertical padding; guidance line
   bumped up and greyed; contact email enlarged; tighten gap above Contact. */
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt03 .txt-box .txt ul { padding-top: 28px; padding-bottom: 28px; }
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt03 .txt-box .txt p { font-size: 26px; line-height: 1.6em; color: #888; font-weight: 500; text-align: center; }
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .cnt03 .col { margin-bottom: 30px; }
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .white ol > li { font-size: 26px; }
.wi_re100 .s251:not(.s261):not(.s291):not(.s281):not(.s31) .white { margin-top: 80px; }

/* ── PCAF (s291) ───────────────────────────────────────────────────────
   "View Report" pills (Part A/B/C) were a fixed 93px — fine for the Korean
   "영문/국문" but too narrow for "English/Korean", which got cramped. Size them
   to their text on one line with comfortable padding. */
.wi_re100 .s291 .sec3 .box-wrap .box .tbx .link > a {
	width: auto; min-width: 104px; height: 44px; padding: 0 22px;
	font-size: 17px; white-space: nowrap;
}
/* sec4 PCAF Progress: the second column heading ("Financial Assets Represented
   by PCAF Signatories") is longer in English than Korean and wrapped to two
   lines at 40px. Trim it so each heading sits on one line. */
.wi_re100 .s291:not(.s2101) .sec4 .flex-box .box h5 { font-size: 30px; white-space: nowrap; }
/* On phones the nowrap heading overflowed and forced whole-page horizontal scroll. */
@media (max-width: 1024px) {
	.wi_re100 .s291:not(.s2101) .sec4 .flex-box .box h5 { white-space: normal; font-size: 22px; }
}

/* sec5 "How to Join": same fix as CoREi's 4-step row, but for 3 steps. The long
   English Step 3 text widened its column (flex-wrap + 60px side padding), so the
   steps lost even spacing. Force one row of 3 equal columns; swap the white-circle
   arrow png for a peach disc + CSS chevron; trim the connector line to span only
   first→last circle centre. */
.wi_re100 .s291 .sec5 .contain > ol { flex-wrap: nowrap; }
.wi_re100 .s291 .sec5 .contain > ol > li { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.wi_re100 .s291 .sec5 .contain > ol > li .tbx p { font-size: 19px; line-height: 28px; }
.wi_re100 .s291 .sec5 .contain > ol > li:not(:last-child):after {
	width: 42px; height: 42px; border: 0; border-radius: 50%; transform: none;
	background: #f9f3f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20'%3E%3Cpath d='M2.5 2 L9.5 10 L2.5 18' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	right: -21px; top: 59px;
}
.wi_re100 .s291 .sec5 .contain > ol > li:first-child:before { left: 50%; width: 200%; }

/* Mobile (≤1024): our higher-specificity desktop step rules above clobber the
   Korean responsive_sub.css mobile layouts, so replicate the intended behaviour
   here. PCAF keeps all 3 steps on ONE row (arrows after step 1 & 2). CoREi is a
   2×2 grid where the row-wrap arrow (2→3) is shown to the LEFT of step 3 — the
   same trick the Korean original uses (.s261 .sec4 li:nth-child(3):before). */
@media (max-width: 1024px) {
	/* ── PCAF (s291): all 3 steps on one row ── */
	.wi_re100 .s291 .sec5 .contain > ol { flex-wrap: nowrap; gap: 0; }
	.wi_re100 .s291 .sec5 .contain > ol > li { flex: 1 1 0; max-width: none; padding: 0 6px; }
	.wi_re100 .s291 .sec5 .contain > ol > li .tbx p { font-size: 14px; line-height: 1.45; }
	.wi_re100 .s291 .sec5 .contain > ol > li figure img { width: 18vw; }
	/* connector line under the three circles */
	.wi_re100 .s291 .sec5 .contain > ol > li:first-child:before {
		display: block; left: 50%; width: 200%; top: 9vw;
	}
	/* chevron after step 1 and step 2, centred on the column boundary */
	.wi_re100 .s291 .sec5 .contain > ol > li:not(:last-child):after {
		display: block; left: 100%; right: auto; bottom: auto; top: 9vw;
		margin: 0; transform: translate(-50%, -50%);
		width: 34px; height: 34px;
	}

	/* ── CoREi (s261): 2 steps per row, two rows ── */
	.wi_re100 .s261 .sec4 .contain > ol { flex-wrap: wrap; gap: 36px 0; }
	.wi_re100 .s261 .sec4 .contain > ol > li { flex: 0 0 50%; max-width: 50%; padding: 0 12px; }
	/* hide the single-row connector line (meaningless once wrapped) */
	.wi_re100 .s261 .sec4 .contain > ol > li:before { display: none; }
	/* between-column chevron: after step 1 (1→2) and step 3 (3→4); hide on the
	   right-column (even) steps where it would point into empty space */
	.wi_re100 .s261 .sec4 .contain > ol > li:nth-child(even):after { display: none; }
	.wi_re100 .s261 .sec4 .contain > ol > li:nth-child(odd):not(:last-child):after {
		display: block; left: 100%; right: auto; bottom: auto; top: 9vw;
		margin: 0; transform: translate(-50%, -50%);
	}
	/* row-wrap chevron (2→3): a peach disc + chevron to the LEFT of step 3, so the
	   sequence visibly continues onto the second row */
	.wi_re100 .s261 .sec4 .contain > ol > li:nth-child(3):before {
		display: block; content: ''; left: 0; right: auto; top: 9vw; bottom: auto;
		transform: translateY(-50%); margin: 0;
		width: 40px; height: 40px; border: 0; border-radius: 50%;
		background: #f9f3f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20'%3E%3Cpath d='M2.5 2 L9.5 10 L2.5 18' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	}
}

/* sec4 PCAF Progress: the two trend graphics (s291-6/7) had Korean text baked
   in, so they're rebuilt here in pure CSS — an orange card with a white up-arrow,
   year+value on each side, and "≈Nx UP" inside the arrow. Fonts use cqw so the
   card scales cleanly with its column width. */
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat {
	position: relative; container-type: inline-size;
	aspect-ratio: 780 / 300; border-radius: 10px; overflow: hidden;
	background: linear-gradient(135deg, #ff9347, #ff6714);
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-side {
	position: absolute; top: 42%; transform: translateY(-50%);
	text-align: center; color: #fff; z-index: 2;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-l { left: 6%; }
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-r { right: 6%; }
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-side em {
	display: block; font-style: normal; font-size: 3cqw; opacity: .92; margin-bottom: 1.4cqw;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-side strong {
	display: block; font-size: 7.4cqw; font-weight: 700; line-height: 1;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-arrow {
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 58%; height: 90%; background: #fff; z-index: 1;
	clip-path: polygon(50% 0, 100% 42%, 72% 42%, 72% 100%, 28% 100%, 28% 42%, 0 42%);
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-ic {
	position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
	width: 11cqw; height: auto;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-arrow p {
	position: absolute; left: 0; right: 0; top: 52%; margin: 0 !important;
	text-align: center; line-height: 1;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-arrow p b {
	display: block; font-size: 8.4cqw; font-weight: 700; color: #ff6714; letter-spacing: -0.02em;
}
.wi_re100 .s291 .sec4 .flex-box .box .pcaf-stat .ps-arrow p span {
	display: block; font-size: 3.6cqw; font-weight: 600; color: #ff6714; margin-top: 1cqw;
}

/* ── ESG Policy & Legislation (s221) ──────────────────────────────────────
   Keep the gray detail bullets (#666 ol items) at the Korean spec size so they
   match the black item line above them. (Earlier they were shrunk to 18px,
   which made them look small and off-spec — reverted to 20px/32px.) */

/* "View ESG Policy & Legislation Updates" button: the 330px fixed width forced
   the long English label onto two lines. Size to text on one line and keep the
   arrow just past the label instead of pinned far right. */
.s221 .sub-more > a {
	width: auto; line-height: 64px; white-space: nowrap;
	padding: 0 60px 0 36px; text-align: center;
}
/* Tab bar: keep the Korean spec layout (fixed 72px bar, each li flex:1 filling
   the full bar height) so the active orange pill is vertically centred. The
   English labels are longer, so only trim the font a touch (20px → 18px) — they
   still fit on one line at the 1630px content width. Do NOT set height/min-height
   here: the base li has height:100%, which collapses if the bar height is auto
   and leaves the orange pill floating at the top. */
.s221 .comp-tab > li { font-size: 18px; }

/* Contact box on mobile: responsive_sub.css stacks .white into a column
   (≤1024px), so "Contact" and the email wrapped onto two lines. Keep the
   Contact block on a single horizontal line across the activity pages,
   shrinking the text/padding a touch on small phones so it still fits.
   ESG uses <p>+<span>; RE100/EV100/CoREi/PCAF (all .wi_re100) use <p>+<ol>. */
@media (max-width: 1024px) {
	/* Tabs: stack all three full-width so they line up uniformly, instead of
	   wrapping into 2-on-top + 1-centred-below (the default flex:1 1 40%). */
	.s221 .comp-tab > li { flex: 1 1 100%; }

	.s221 .white,
	.s231 .white,
	.wi_re100 .white { flex-direction: row; height: auto; padding: 22px 10px; }
	.s221 .white > *,
	.s231 .white > *,
	.wi_re100 .white > * { padding: 0 16px; }
	.s221 .white p:after,
	.s231 .white p:after,
	.wi_re100 .white p:after { display: block; }   /* restore the divider line */
	.s221 .white span,
	.s231 .white span { margin-top: 0; }
	.wi_re100 .white ol { margin-top: 0; }
}
@media (max-width: 480px) {
	.s221 .white p,
	.s231 .white p,
	.wi_re100 .white p { font-size: 17px; gap: 10px; }
	.s221 .white span,
	.s231 .white span,
	.wi_re100 .white ol > li { font-size: 15px; }
	.s221 .white > *,
	.s231 .white > *,
	.wi_re100 .white > * { padding: 0 10px; }
}

/* Home "Our Work" cards on tablet/mobile: keep a tall portrait shape (like the
   desktop cards) instead of the near-square fixed height, which looked flat. */
@media (max-width: 1024px) {
	.section01 .inner { height: auto; aspect-ratio: 3 / 4; }
}
/* Hover: let long English titles wrap inside the card instead of overflowing/clipping.
   (Korean titles were short; English ones like "Sustainable Finance" ran off the edge.) */
.section01 .inner:hover h4 { white-space: normal; width: calc(100% - 56px); text-align: center; font-size: 34px; line-height: 1.25; }
/* Decorative dot: sit it just after the (longer, English) first line "…finance"
   instead of mid-heading. right:0 gives the same ~22px gap as the News/Reports
   dots below. Desktop only; tablet/mobile keep their own positions. */
@media (min-width: 1025px) {
	.section01 .sec-tit h3:after { right: 0; }
}
/* Home "Our Work" carousel: match the Korean site — let the neighbouring cards
   peek into the page's side gutters (overflow visible) while autoplay slides
   them, so it reads as a scrollable slider (4 full cards + a sliver on each
   side) rather than a static grid. The #wrapper guard clips that overflow at
   the viewport edge so it can never spill into a horizontal scrollbar on
   narrow screens (PC + mobile share one template here, unlike the Korean site). */
#wrapper { overflow-x: hidden; }
.section01 .swiper { overflow: visible; }

/* ── About KoSIF (s111) sec1 ─────────────────────────────────────────────
   Restructured intro: the heading (label + h5) sits in .lbx on the left and
   the image in .rbx on the right; the description moved to a full-width .btx
   row beneath them. On the wide (side-by-side) layout we bottom-align the
   heading with the image, then drop the description below the whole row. */
.s111 .sec1 .btx { width: 100%; }
.s111 .sec1 .btx p { font-size: 22px; line-height: 34px; letter-spacing: -0.03em; color: #666; }
.s111 .sec1 .btx p + p { margin-top: 1em; }
@media (min-width: 1441px) {
	/* side-by-side row only exists above 1440px (≤1440 stacks to a column) */
	.s111 .sec1 { align-items: flex-end; }
	.s111 .sec1 .btx { margin-top: 56px; }
}
@media (max-width: 1024px) {
	.s111 .sec1 .btx p { font-size: 16px; line-height: 1.5; word-break: keep-all; }
}

/* sec2: the "ESG Ecosystem Participants" caption was removed, so tighten the gap
   between the diagram and the participant list below it (was margin-top:94px). */
.s111 .sec2 .cnt-box ul { margin-top: 44px; padding-top: 40px; }

/* sec3 "Advancing a Sustainable Society":
   - the intro line had no font rule (fell back to ~16px) → match sec2's size
   - the three pillar cards used a fixed 615px box with zero side padding, so the
     longer English copy was cut off vertically and ran into the column dividers.
     Let the row grow to fit and give the cards real top/bottom/side padding. */
.s111 .sec3 .doc-tit p { font-size: 22px; line-height: 34px; letter-spacing: -0.03em; color: #666; margin-top: 24px; }
.s111 .sec3 .ul-box ul { height: auto; }
.s111 .sec3 .ul-box ul > li { padding: 110px 44px 84px; }
.s111 .sec3 .ul-box ul > li > p { display: block; }
@media (max-width: 1024px) {
	.s111 .sec3 .doc-tit p { font-size: 16px; line-height: 1.5; margin-top: 16px; }
}

/* ── Message (s121) ──────────────────────────────────────────────────────
   Two-column body with the signature at the foot of the right column.
   1) The Korean rule set paragraphs to width:110%, which overflowed each column
      to the right — harmless on the left (into the gap) but on the right it ate
      into the page margin, so the left/right margins looked uneven. Pin to 100%.
   2) The Korean signature .lbx was a fixed 250px (too narrow for the English
      title/org, which wrapped mid-phrase), so size it to its content. */
.s121 .sec1 > .box > * p { width: 100%; }
.s121 .sec1 .rbx .sign { margin-top: 50px; display: flex; justify-content: flex-start; }   /* sits right under the right column's last paragraph, left-aligned with the body */
.s121 .sec1 .rbx .sign .lbx { width: auto; }
.s121 .sec1 .rbx .sign .lbx p { font-size: 20px; line-height: 34px; letter-spacing: -0.03em; color: #111; white-space: nowrap; }
.s121 .sec1 .rbx .sign .lbx p b { display: block; font-size: 28px; font-weight: 600; color: #111; margin-bottom: 14px; }
@media (max-width: 1024px) {
	/* single-column on mobile: left-align the signature and let it wrap */
	.s121 .sec1 .rbx .sign { justify-content: flex-start; margin-top: 30px; }
	.s121 .sec1 .rbx .sign .lbx p { font-size: 16px; line-height: 1.5; white-space: normal; }
	.s121 .sec1 .rbx .sign .lbx p b { font-size: 24px; }
}

/* ── Founding Declaration (s122) ─────────────────────────────────────────
   The English declaration adds "Our Missions" / "Our Action Plan" section
   headings that the Korean page didn't have — style them as orange labels. */
.s122 .sec1 .box .decl-sec-tit { font-size: 28px; line-height: 1.4; letter-spacing: -0.03em; color: #ff6714; font-weight: 600; margin: 14px 0 26px; }
/* a little more breathing room above "Our Missions" (it follows a paragraph) */
.s122 .sec1 .box .cnt .decl-sec-tit { margin-top: 56px; }
/* ── SBTi (s281) sec5 6-step process ─────────────────────────────────────
   The Korean responsive rule (flex:1 1 25%) let the longer English step copy
   widen items unevenly, so the six steps wrapped 3+2+1. Force an even grid and
   drop the connector line/chevrons on mobile (they were laid out for the
   Korean spacing). 3-up on tablets/below, 2-up on phones. */
@media (max-width: 1440px) {
	.s281 .sec5 ul > li { flex: 0 0 auto; width: calc((100% - 80px) / 3); min-width: 0; }
	/* hide the long horizontal connector line + the Korean wrap connectors */
	.s281 .sec5 ul > li:first-child:before,
	.s281 .sec5 ul > li:nth-child(4):before,
	.s281 .sec5 ul > li:nth-child(6):before { display: none; }
	/* keep the process chevron only BETWEEN columns within a row, repositioned
	   between the (smaller) mobile icons. 3-up: shown after 1,2,4,5. */
	.s281 .sec5 ul > li:not(:last-child):after {
		display: block; left: 100%; right: auto; top: 9vw; bottom: auto;
		margin: 0; transform: translate(-50%, -50%);
		width: 24px; height: 24px; background-size: 24px;
	}
	.s281 .sec5 ul > li:nth-child(3):after { display: none; }   /* 3-up row-1 end */
}
@media (max-width: 768px) {
	.s281 .sec5 ul { gap: 32px 0; }
	.s281 .sec5 ul > li { width: 50%; padding: 0 10px; }
	/* 2-up: chevron after the left-column (odd) steps only — 1→2, 3→4, 5→6 */
	.s281 .sec5 ul > li:nth-child(3):after { display: block; }
	.s281 .sec5 ul > li:nth-child(even):after { display: none; }
}

/* ── SBTi (s281) detail tweaks ───────────────────────────────────────────
   (2) centre the climate-action copy in its image box; (3) enlarge the sec4
   version note; (4) size the "View Participants" pills to their text; (6)
   extend the process connector line to the last step + shrink the step copy;
   (7) style the contact-guidance line grey like the other activity pages. */
.wi_re100 .s281 .cnt01 .col .txt { justify-content: center; }
/* the hero copy had word-break:break-all (splits words mid-character, e.g.
   "a|gainst"); use normal wrapping so the manual <br>s read cleanly. */
.s281 .what_tit .txt-box .txt p:last-child { word-break: normal; }
.s281 .sec4 .doc-tit small { display: block; font-size: 20px; line-height: 1.5; letter-spacing: -0.03em; color: #767676; margin-top: 14px; }
.s281 .sec3 dl dd .more { display: block; width: fit-content; min-width: 255px; white-space: nowrap; padding: 0 50px 0 24px; margin-top: 48px; }
.s281 .sec5 ul > li:first-child:before { width: calc(500% + 55px); }
.s281 .sec5 ul > li .tbx p { font-size: 18px; line-height: 1.6; }
.s281 .sec5 .contact-guide { font-size: 28px; line-height: 1.5em; letter-spacing: -0.03em; color: #888; font-weight: 500; text-align: center; margin: 70px 0 50px; }
.s281 .sec5 .white { margin-top: 50px; }
@media (max-width: 1024px) {
	.s281 .sec4 .doc-tit small { font-size: 16px; }
	.s281 .sec5 .contact-guide { font-size: 20px; margin: 40px 0 30px; }
}

/* Keep the date/signature flush-right even when the long English line wraps.
   (The Korean signature was short; on mobile the Korean rule also added a
   padding-right:20% meant for that short text — drop it so the English block
   reaches the right edge.) */
.s122 .sec1 .box .cnt3 .sign { text-align: right; }
@media (max-width: 1024px) {
	.s122 .sec1 .box .decl-sec-tit { font-size: 20px; margin: 10px 0 18px; }
	.s122 .sec1 .box .cnt .decl-sec-tit { margin-top: 36px; }
	.s122 .sec1 .box .cnt3 .sign { padding-right: 0; }
}

/* ── EnergyTag (s2101) tweaks ───────────────────────────────────────────── */
/* 1) Breathing room between the "What is Hourly Matching?" heading and its
      intro line (the doc-tit <p> sat flush under the <h4>). */
.wi_re100 .s2101 .sec2 .doc-tit p { margin-top: 24px; }

/* 2) EnergyTag shares the .s291 class with PCAF, whose mobile rule
      (.s291 .sec4 .link{margin-top:30px}) pulls the "View EnergyTag Updates"
      button up against the cards. Give it more room on tablet/mobile. */
@media (max-width: 1024px) {
	.wi_re100 .s2101 .sec4 .link { margin-top: 80px; }
}

/* 3) sec5 also inherits PCAF's tall beige band (.s291 .sec5
      padding:12vw 0 16vw; margin-top:12vw), leaving too much empty space below
      the Updates button and the contact box on mobile. Tighten it for
      EnergyTag's simple contact section. */
@media (max-width: 1024px) {
	.wi_re100 .s2101 .sec5 { margin-top: 5vw; padding: 6vw 0 7vw; }
}

/* ── Home main banner ───────────────────────────────────────────────────── */
/* Keep the overlaid subtitle/headline within the left half of the slide so the
   (longer) English text never collides with imagery on the right. Desktop
   only — the ≤1024 / ≤640 responsive sizes are left untouched. */
@media (min-width: 1025px) {
	.main-visual .txt-box { max-width: 800px; }
	.main-visual .txt-box h2 { font-size: 50px; line-height: 1.3em; }
}

/* Home search bar: keep the "Popular Keywords" label on a single line. The
   Korean label ("인기검색어") fit the fixed 90px box, but the longer English
   wrapped to two lines, leaving the keyword row aligned to the top and looking
   lopsided. Let the label size to its content on one line so label + keywords
   read as one clean row. */
.search-wrap .txt-box .txt p { width: auto; max-width: none; white-space: nowrap; flex: 0 0 auto; }

/* Numbered slide paging (1 2 3 …) for the home banner. The Korean CSS fixes
   each dot to 25% width (assumes 4 slides); make it flexible for any number of
   admin-managed banners, and sync the progress underline with the 4s autoplay. */
.main-visual .paging { width: auto; max-width: none; }
.main-visual .slick-dots li { width: auto; }
.main-visual .slick-dots li button { padding: 0 16px; }
.main-visual .slick-dots li.slick-active button:after { transition: all 4s; }

/* The Korean progress underline uses a CSS transition (width 0→100%) that does
   NOT fire for the very first slide: its dot already has .slick-active before
   the first paint, so there is no state change to transition. Drive it with a
   keyframe animation instead — animations run on load and restart every time
   .slick-active is re-applied, so slide 1 animates too. */
.main-visual .slick-dots li.slick-active button:after {
	width: 0;
	transition: none;
	animation: bnr-progress 4s linear forwards;
}
@keyframes bnr-progress { from { width: 0; } to { width: 100%; } }

/* ── Sustainable Finance (s231) ─────────────────────────────────────────── */
/* 1) The Korean intro sets word-break:break-all, which splits English words
      mid-letter (e.g. "en-gages", "transiti-ons"). Break on word boundaries. */
.real-cont.s231 .sec1 .tbx .bottom p { word-break: normal; overflow-wrap: break-word; }

/* 2) The "View Sustainable Finance Updates" button is fixed at 285px in the
      Korean CSS, so the longer English label wraps to two lines. Let it size to
      its content on one line (extra right padding clears the arrow icon). */
.s231 .sec3 .sub-more a { width: auto; white-space: nowrap; padding: 0 56px 0 36px; }

/* 3) The Korean vertical rotated-label accordion truncated the longer English
      activity names and forced an unreadably small font. Replace it on desktop
      with a horizontal card grid: each activity shows its image with a readable
      horizontal label, and clicking still opens the detail popup. (Mobile
      already stacks these as full cards, so this is scoped to desktop.) */
@media (min-width: 1025px) {
	.s231 .sec3 .cnt ul { display: flex; gap: 16px; }
	.s231 .sec3 .cnt ul > li,
	.s231 .sec3 .cnt ul > li.on { flex: 1 1 0; width: auto; height: 340px; border-radius: 16px; overflow: hidden; transition: flex-grow 0.5s ease, box-shadow 0.3s ease; }
	/* Accordion: the hovered card grows (and the rest shrink), lifts with a
	   shadow and brightens. Returns to an even row on mouse-out. */
	.s231 .sec3 .cnt ul > li:hover { flex-grow: 2.6; box-shadow: 0 12px 30px rgba(0,0,0,0.28); z-index: 2; }
	.s231 .sec3 .cnt ul > li:hover .on:before { background: linear-gradient(rgba(0,0,0,0) 52%, rgba(0,0,0,0.4)); }
	.s231 .sec3 .cnt ul > li .off { display: none; }
	.s231 .sec3 .cnt ul > li .on { opacity: 1; z-index: 1; position: absolute; inset: 0; align-content: end; padding: 26px 24px 28px; }
	.s231 .sec3 .cnt ul > li .on:before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 38%, rgba(0,0,0,0.62)); z-index: -1; transition: background 0.3s ease; }
	.s231 .sec3 .cnt ul > li .on p { opacity: 1; font-size: 18px; line-height: 1.35; transition: none; }
	.s231 .sec3 .cnt ul > li .on span { width: 44px; height: 44px; right: 20px; top: 20px; }
}

/* Mobile: the stacked activity cards centred their label (the .on block ignores
   align-content). Give each a fixed height and pin the label to the bottom-left
   over a readability gradient. */
@media (max-width: 1024px) {
	.s231 .sec3 .cnt ul > li,
	.s231 .sec3 .cnt ul > li.on { height: 190px; flex: none; }
	.s231 .sec3 .cnt ul > li .on { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 20px; }
	.s231 .sec3 .cnt ul > li .on:before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.6)); z-index: -1; }
	.s231 .sec3 .cnt ul > li .on p { font-size: 17px; line-height: 1.4; padding-right: 40px; }
	/* Move the arrow to the top-right so it no longer overlaps the bottom label. */
	.s231 .sec3 .cnt ul > li .on span { top: 18px; bottom: auto; right: 18px; }
}

/* ── CDP : What is CDP (s31) ─────────────────────────────────────────────────
   Same two fixes Sustainable Finance got. */
/* 1) The sec2 "Secretariat" paragraph inherits word-break:break-all from the
      Korean CSS, which splits English words mid-letter ("K|orea", "expan|ded",
      "environ|mental"). Break on word boundaries instead. */
.s31 .sec2 dl dd p { word-break: normal; overflow-wrap: break-word; }

/* 1b) The sec4 "CDP Scores and Data" boxes inherit the same word-break:break-all,
       splitting words mid-letter ("identi|fy", "perfor|mance", "energy us|e",
       "bi|odiversity"). Break on word boundaries here too. */
.s31 .sec4 .doc-tit p,
.s31 .sec4 .flex-box .box ul > li { word-break: normal; overflow-wrap: break-word; }

/* 3) The sec5 "View the 2026 CDP Disclosure Timeline" button is fixed at 364px in
      the Korean CSS, so the longer English label wraps to two lines. Let it size
      to its content on one line (extra right padding clears the arrow icon). */
.s31 .sec5 .link > a { width: auto; white-space: nowrap; padding-right: 35px; }

/* 4) Signatories popup — "CDP Signatory Engagement and Activities" (s31-box3):
      stack it vertically like the CDP ASP popup (full-width body text on top, a
      full-width banner image below) instead of the cramped portrait-image-beside-
      text layout. Use the wide banner crop (the "tablet" image) at full width. */
.design-pop2 .cnt .s31-box3 .flex-box { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; gap: 50px; }
.design-pop2 .cnt .s31-box3 .flex-box .tbx { border: 0; padding: 0; flex: none; }
.design-pop2 .cnt .s31-box3 .flex-box .tbx ul > li { margin-bottom: 18px; }
.design-pop2 .cnt .s31-box3 .flex-box .tbx ul > li:last-of-type { margin-bottom: 0; }
.design-pop2 .cnt .s31-box3 .flex-box figure { width: 100%; margin-top: 0; flex: none; }
.design-pop2 .cnt .s31-box3 .flex-box figure .pcpc-img { display: none; }
.design-pop2 .cnt .s31-box3 .flex-box figure .tablet-img { display: block; width: 100%; border-radius: 10px; }

/* 2) The "CDP Projects" Korean rotated-label accordion truncated the English
      labels and forced a tiny font. Replace it on desktop with a horizontal
      card grid: each project shows its image + a readable label, hover expands,
      and clicking still opens the detail popup. (Mobile stacks as full cards.) */
@media (min-width: 1025px) {
	.s31 .sec3 .cnt ul { display: flex; gap: 16px; }
	.s31 .sec3 .cnt ul > li,
	.s31 .sec3 .cnt ul > li.on { flex: 1 1 0; width: auto; height: 340px; border-radius: 16px; overflow: hidden; transition: flex-grow 0.5s ease, box-shadow 0.3s ease; }
	.s31 .sec3 .cnt ul > li:hover { flex-grow: 2.6; box-shadow: 0 12px 30px rgba(0,0,0,0.28); z-index: 2; }
	.s31 .sec3 .cnt ul > li:hover .on:before { background: linear-gradient(rgba(0,0,0,0) 52%, rgba(0,0,0,0.4)); }
	.s31 .sec3 .cnt ul > li .off { display: none; }
	.s31 .sec3 .cnt ul > li .on { opacity: 1; z-index: 1; position: absolute; inset: 0; align-content: end; padding: 26px 24px 28px; }
	.s31 .sec3 .cnt ul > li .on:before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 38%, rgba(0,0,0,0.62)); z-index: -1; transition: background 0.3s ease; }
	.s31 .sec3 .cnt ul > li .on p { opacity: 1; font-size: 18px; line-height: 1.35; transition: none; }
	.s31 .sec3 .cnt ul > li .on span { width: 44px; height: 44px; right: 20px; top: 20px; }
}

@media (max-width: 1024px) {
	.s31 .sec3 .cnt ul > li,
	.s31 .sec3 .cnt ul > li.on { height: 190px; flex: none; }
	.s31 .sec3 .cnt ul > li .on { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 20px; }
	.s31 .sec3 .cnt ul > li .on:before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.6)); z-index: -1; }
	.s31 .sec3 .cnt ul > li .on p { font-size: 17px; line-height: 1.4; padding-right: 40px; }
	.s31 .sec3 .cnt ul > li .on span { top: 18px; bottom: auto; right: 18px; }
}

/* Detail popups (design-pop): stop English words splitting mid-letter (the
   Korean .cnt p uses word-break:break-all + 105% width that overflows-clips),
   and keep the report-cover thumbnail at its full 360px (it was being squeezed
   by the long achievements column next to it). */
.design-pop .cnt p { word-break: normal; width: 100%; }
/* The Supply Chain popup's Suppliers / Supply Chain Members <li> lists also
   inherit word-break:break-all, splitting words mid-letter ("throu|gh", "s|upplier",
   "managem|ent"). Break on word boundaries here too. */
.design-pop3 .cnt .s31-box3-1 .tbx-full ul > li { word-break: normal; overflow-wrap: break-word; }
/* Supply Chain popup "At a Glance" box: match the Signatories popup look —
   (1) drop the border around the map image, (2) style the new "Number of CDP
   Supply Chain Members" heading above the Korea/Global figures, (3) let the beige
   panel grow to fit the longer English copy (Korean pinned it at 476px, which
   clipped the text and the panel background). */
.s31-box3-1-arti4 .cnt-box figure { border: 0; }
.s31-box3-1-arti4 .cnt-box .tbx { height: auto; }
.s31-box3-1-arti4 .cnt-box .tbx > b.sc-num-title { display: block; font-size: 20px; font-weight: 600; color: #111; letter-spacing: -0.03em; margin-bottom: 16px; }

/* CDP ASP popup: the "View the global list of CDP Accredited Solutions Providers"
   button is fixed at 333px in the Korean CSS, wrapping the long English label.
   It sits in the full-width popup column, so size it to one line. */
.design-pop4 .link > a { width: auto; white-space: nowrap; padding-right: 35px; }
.design-pop .cnt .flex-box .lbx { flex-shrink: 0; }

/* The report link button in the popup achievements column is fixed at 244px in
   the Korean CSS, so "View the White Paper" wraps. Let it size to one line. */
.design-pop .cnt .flex-box .rbx .sub-more a { width: auto; white-space: nowrap; padding: 0 56px 0 36px; }

/* Phasing-Out popup: the dated White-Paper publication list is long, so make it
   a little more compact than the surrounding achievement bullets. */
.design-pop .cnt .flex-box .rbx ul.pub-list > li { font-size: 18px; line-height: 28px; }

/* Climate Risk popup partner logos: a simple centered row, no list markers. */
.design-pop .cnt .flex-box .rbx ol.logo-row { list-style: none; align-items: center; }

/* Our History: the "*" marker on supplementary sub-notes is orange (mirrors the
   Korean ※), while the note text stays the same colour as the event text. */
.s13 .sec3 .rbx ul > li p .hist-mark { color: #ff6714; font-weight: 600; margin-right: 5px; }

/* Our History sub-notes: a distinct block — smaller, tighter, lighter — so the
   "*" supplementary lines read clearly as secondary to the main event. */
.s13 .sec3 .rbx ul > li p .hist-sub { display: block; width: auto; font-size: 17px; line-height: 25px; color: #767676; margin-top: -4px; }

/* Mobile: the timeline event shrinks to 16px, so make the sub-note 14px (it was
   keeping its 17px desktop size and ending up larger than the main event). */
@media (max-width: 1024px) {
	.s13 .sec3 .rbx ul > li p .hist-sub { font-size: 14px; line-height: 1.5; margin-top: -2px; margin-bottom: 16px; }
}

/* Our Team (desktop): slightly smaller department headers, and one uniform box
   height for all four cards — tall enough for the longest English copy (the
   Corporate Sustainability card). Mobile keeps its auto-height stack. */
@media (min-width: 1025px) {
	.s14 .sec2 ul > li h5 { font-size: 27px; }
	.s14 .sec2 ul > li .box { height: 320px; min-height: 0; }
}

/* Our Team (desktop): pin each card's Contact line to the bottom of the box so
   the three departments' contacts all sit at the same height regardless of how
   many responsibilities they list. */
@media (min-width: 1025px) {
	.s14 .sec2 ul > li .box ol { display: flex; flex-direction: column; height: 100%; }
	.s14 .sec2 ul > li .box ol > li.muni_center { margin-top: auto; margin-bottom: 18px; }
}

/* ── Footer: modern two-band layout ────────────────────────────────────────
   Top: an orange call-to-action band (heading + Contact button + decorative
   arcs). Bottom: a light info band with the org name, label/value contact
   details, social icons, policy links and copyright. Replaces the old flat
   single-row footer. Resets the Korean layout.css #footer styling first. */
#footer { background: transparent; padding: 0; position: relative; }
#footer .contain { max-width: 1630px !important; width: 90%; margin: 0 auto; }

/* Top CTA band */
.foot-cta { position: relative; overflow: hidden; background: linear-gradient(315deg, rgba(255,158,20,1) 0%, rgba(255,103,20,1) 100%); }
.foot-cta .contain { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px 50px; padding: 74px 0; position: relative; z-index: 1; }
.foot-cta-head h2 { color: #fff; font-size: 42px; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }
.foot-cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 640px; }
.foot-cta-action p { color: rgba(255,255,255,.95); font-size: 19px; line-height: 1.55; }
.foot-cta-btn { display: inline-block; background: #fff; color: #ff6714; font-size: 18px; font-weight: 700; padding: 18px 50px; border-radius: 10px; transition: .2s; }
.foot-cta-btn:hover { background: #fff; color: #e85800; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
/* Decorative scattered dots clustered at both edges (constellation feel).
   Each dot is a tiny radial-gradient, anchored by % so it sticks to the
   corners; the centre (where the text/button sit) is left clear. */
.foot-cta-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(circle at 3% 16%,  rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 2.4px, transparent 3px),
		radial-gradient(circle at 9% 40%,  rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 5% 66%,  rgba(255,255,255,.90) 0, rgba(255,255,255,.90) 3px,   transparent 3.6px),
		radial-gradient(circle at 13% 24%, rgba(255,255,255,.60) 0, rgba(255,255,255,.60) 2px,   transparent 2.6px),
		radial-gradient(circle at 7% 88%,  rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 15% 56%, rgba(255,255,255,.70) 0, rgba(255,255,255,.70) 2.4px, transparent 3px),
		radial-gradient(circle at 2% 50%,  rgba(255,255,255,.40) 0, rgba(255,255,255,.40) 1px,   transparent 1.6px),
		radial-gradient(circle at 11% 78%, rgba(255,255,255,.60) 0, rgba(255,255,255,.60) 2px,   transparent 2.6px),
		radial-gradient(circle at 17% 90%, rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 6% 32%,  rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 1px,   transparent 1.6px),
		radial-gradient(circle at 97% 16%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 2.4px, transparent 3px),
		radial-gradient(circle at 91% 40%, rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 95% 66%, rgba(255,255,255,.90) 0, rgba(255,255,255,.90) 3px,   transparent 3.6px),
		radial-gradient(circle at 87% 24%, rgba(255,255,255,.60) 0, rgba(255,255,255,.60) 2px,   transparent 2.6px),
		radial-gradient(circle at 93% 88%, rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 85% 56%, rgba(255,255,255,.70) 0, rgba(255,255,255,.70) 2.4px, transparent 3px),
		radial-gradient(circle at 98% 50%, rgba(255,255,255,.40) 0, rgba(255,255,255,.40) 1px,   transparent 1.6px),
		radial-gradient(circle at 89% 78%, rgba(255,255,255,.60) 0, rgba(255,255,255,.60) 2px,   transparent 2.6px),
		radial-gradient(circle at 83% 90%, rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.5px, transparent 2px),
		radial-gradient(circle at 94% 32%, rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 1px,   transparent 1.6px);
	background-repeat: no-repeat; }
/* Plus the original concentric arcs at the bottom-left corner. */
.foot-cta-deco::before { content: ''; position: absolute; left: -50px; bottom: 0; width: 640px; max-width: 60%; height: 100%; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.2'%3E%3Ccircle cx='170' cy='450' r='330'/%3E%3Ccircle cx='400' cy='450' r='330'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / contain; }

/* Partner logos band (between the CTA and the info band) — continuous
   marquee of partner logos, mirroring the Korean home page bottom strip. */
.foot-partners { background: #fff; padding: 50px 0; overflow: hidden; }
.foot-partners .slick-list { overflow: visible; }
.foot-partners .item { padding: 0 10px; }
.foot-partners .partner { background: #f9f3f0; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.foot-partners .partner img { width: 100%; height: auto; display: block; }
/* Fallback before slick initialises (and on no-JS): show logos in a row. */
.foot-partners .items:not(.slick-initialized) { display: flex; flex-wrap: nowrap; }
.foot-partners .items:not(.slick-initialized) .item { flex: 0 0 16.66%; box-sizing: border-box; }

/* Bottom info band */
.foot-main { background: #fff; padding: 40px 0 30px; }
.foot-main > .contain:first-of-type { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 60px; }
.foot-org { flex: 0 0 auto; min-width: 220px; }
.foot-logo { display: inline-block; }
.foot-logo img { height: 42px; width: auto; }
.foot-orgname { margin-top: 16px; font-size: 17px; font-weight: 600; color: #2a2a2a; line-height: 1.4; }
.foot-info { flex: 1 1 480px; display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 20px 50px; margin: 4px 0 0; }
.foot-info .fi-row dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9a958a; margin-bottom: 5px; }
.foot-info .fi-row dd { font-size: 15px; color: #44403a; line-height: 1.55; }
.foot-info .fi-row dd a { color: #44403a; }
.foot-info .fi-row dd a:hover { color: #ff6714; text-decoration: underline; }
.foot-social { flex: 0 0 auto; }
.foot-social .sns { display: flex; gap: 10px; }
.foot-social .sns li { padding: 0; }
.foot-social .sns li a { position: relative; display: block; width: 38px; height: 38px; }
.foot-social .sns li a img { width: 38px; height: 38px; display: block; }
.foot-social .sns li a:after { position: absolute; content: ''; left: 0; top: 0; width: 38px; height: 38px; background-size: 38px 38px; background-position: center; background-repeat: no-repeat; opacity: 0; transition: .3s; }
.foot-social .sns li a:hover:after { opacity: 1; }
.foot-social .sns li:nth-child(1) a:after { background-image: url(../img/layout/linkedin-h-en.png); }
.foot-social .sns li:nth-child(2) a:after { background-image: url(../img/layout/sns-utube-h.png); }

/* Bottom row: policy links + copyright */
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding-top: 26px; border-top: 1px solid #e1dccf; }
/* margin-top needs #footer specificity to beat "#footer .contain { margin:0 auto }" */
#footer .foot-bottom { margin-top: 52px; }
.foot-bottom .foot-pop { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; }
.foot-bottom .foot-pop li { position: relative; padding: 0; }
.foot-bottom .foot-pop li + li::before { content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #cfc9bb; }
.foot-bottom .foot-pop li a { font-size: 14px; color: #6b6760; }
.foot-bottom .foot-pop li a:hover { color: #ff6714; }
.foot-bottom .foot-copy { font-size: 14px; color: #9a958a; }

/* Back-to-top button (fixed, fades in after scrolling) */
.foot-top { position: fixed; right: 30px; bottom: 30px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #e1dccf; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s; z-index: 90; }
.foot-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.foot-top span { display: block; width: 11px; height: 11px; margin: 3px auto 0; border-top: 2px solid #ff6714; border-right: 2px solid #ff6714; transform: rotate(-45deg); }
.foot-top:hover { background: #ff6714; border-color: #ff6714; }
.foot-top:hover span { border-color: #fff; }

@media (max-width: 1024px) {
	.foot-cta .contain { padding: 56px 0; }
	.foot-cta-head h2 { font-size: 33px; }
	.foot-cta-action p { font-size: 17px; }
	.foot-info { grid-template-columns: 1fr; gap: 16px 0; }
}
@media (max-width: 640px) {
	.foot-cta-head h2 { font-size: 27px; }
	.foot-cta-action { width: 100%; max-width: none; }
	.foot-cta-btn { width: 100%; text-align: center; }
	.foot-main > .contain:first-of-type { gap: 30px; }
	.foot-bottom { flex-direction: column; align-items: flex-start; }
	.foot-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* ============================================================
   Admin portal (/admin/) — dashboard + shared link bar
   ============================================================ */
/* Admin pages use a distinct orange-gradient banner (no photo) so the
   back-office is visually set apart from the public site. */
.sub-visual.sub-visual-admin { height: 380px;
	background: linear-gradient(315deg, rgba(255,158,20,1) 0%, rgba(255,103,20,1) 100%); }
.sub-visual.sub-visual-admin .title h1:after { background: #fff; }

/* "Admin" shortcut in the header (only shown when logged in; visitors never
   see it). A small orange pill next to the search icon. */
#header .head-btn > ul { align-items: center; }   /* center the button against the search icon */
#header .head-btn .adm { display: flex; align-items: center; }
#header .head-btn .adm:after { display: none; }   /* no divider beside the button */
#header .head-btn .adm a { display: inline-flex; align-items: center; height: 34px;
	padding: 0 14px; font-size: 14px; font-weight: 600; line-height: 1; color: #ff6714;
	border: 1px solid #ff6714; border-radius: 7px; transition: .2s; }
#header .head-btn .adm a:hover { background: #ff6714; color: #fff; }
/* "한국어" — Korean-site link (top-right); same pill style as Admin, works on any header background. */
#header .head-btn .ko-link { display: flex; align-items: center; }
#header .head-btn .ko-link:after { display: none; }
#header .head-btn .ko-link a { display: inline-flex; align-items: center; height: 34px;
	padding: 0 14px; font-size: 14px; font-weight: 600; line-height: 1; color: #ff6714;
	border: 1px solid #ff6714; border-radius: 7px; transition: .2s; white-space: nowrap; }
#header .head-btn .ko-link a:hover { background: #ff6714; color: #fff; }
/* "Log out" pill — shown beside Admin when logged in; gray so it reads as a different action. */
#header .head-btn .adm-out { display: flex; align-items: center; }
#header .head-btn .adm-out:after { display: none; }
#header .head-btn .adm-out form { margin: 0; display: inline-flex; }
#header .head-btn .adm-out button { display: inline-flex; align-items: center; height: 34px;
	padding: 0 14px; font-size: 14px; font-weight: 600; line-height: 1; color: #767676;
	border: 1px solid #bbb; background: none; border-radius: 7px; cursor: pointer;
	transition: .2s; font-family: inherit; }
#header .head-btn .adm-out button:hover { background: #767676; color: #fff; border-color: #767676; }
/* Mobile "Log out" button in the off-canvas footer. */
.m-nav-out { margin: 0; }
.m-nav-out button.m-nav-search { width: 100%; background: none; cursor: pointer; font-family: inherit; color: #767676; }

.adm-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 12px; max-width: 1200px; margin: 0 auto 34px; padding: 12px 16px;
	background: #2b2f36; border-radius: 10px; }
.adm-bar a { color: #cfd4da; font-size: 15px; padding: 8px 14px; border-radius: 7px; transition: .2s; }
.adm-bar a:hover { color: #fff; background: rgba(255,255,255,.10); }
.adm-bar a.on { color: #fff; background: #ff6714; }
.adm-bar a.out { color: #ffb9a0; }
.adm-bar a.out:hover { color: #fff; background: #c0392b; }
.adm-bar .out-form { display: inline; margin: 0; }
.adm-bar .out-form button { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; padding: 8px 14px; border-radius: 7px; color: #ffb9a0; transition: .2s; }
.adm-bar .out-form button:hover { color: #fff; background: #c0392b; }
.adm-bar-links, .adm-bar-right { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.adm-wrap { max-width: 1200px; margin: 0 auto; }
.adm-wrap .doc-tit { margin-bottom: 26px; }

/* stat cards */
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.adm-stat { border: 1px solid #e6e6e6; border-radius: 12px; padding: 24px 26px; background: #fff; }
.adm-stat .num { font-size: 40px; font-weight: 700; color: #ff6714; line-height: 1.1; }
.adm-stat .lbl { font-size: 16px; color: #555; margin-top: 6px; }
.adm-stat .sub { font-size: 14px; color: #767676; margin-top: 2px; }

.adm-sec { margin-bottom: 46px; }
.adm-sec > h3 { font-size: 24px; font-weight: 600; color: #111; margin-bottom: 18px;
	padding-left: 14px; position: relative; }
.adm-sec > h3:before { content: ''; position: absolute; left: 0; top: 6px;
	width: 5px; height: 22px; background: #ff6714; border-radius: 3px; }

/* "write a post" board picker grouped by section */
.adm-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.adm-group { border: 1px solid #e6e6e6; border-radius: 12px; padding: 20px 22px; background: #fff; }
.adm-group h4 { font-size: 18px; font-weight: 600; color: #ff6714; margin-bottom: 14px; }
.adm-group ul { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-board { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
	border: 1px solid #ddd; border-radius: 8px; font-size: 15px; color: #333; transition: .2s; }
.adm-board:hover { border-color: #ff6714; color: #ff6714; }
.adm-board .cnt { font-size: 13px; color: #767676; }
.adm-board:hover .cnt { color: #ff8a50; }
.adm-board.disabled { color: #aaa; border-style: dashed; pointer-events: none; }

/* recent posts table */
.adm-recent { width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; }
.adm-recent th, .adm-recent td { padding: 13px 16px; border-bottom: 1px solid #eee;
	text-align: left; font-size: 15px; vertical-align: middle; }
.adm-recent th { background: #fafafa; color: #666; font-size: 14px; font-weight: 600; }
.adm-recent tr:last-child td { border-bottom: 0; }
.adm-recent .t-tag { font-size: 13px; color: #ff6714; }
.adm-recent .t-act a { font-size: 14px; padding: 5px 12px; border-radius: 6px;
	border: 1px solid #ddd; color: #333; margin-left: 6px; }
.adm-recent .t-act a:hover { border-color: #ff6714; color: #ff6714; }
.adm-recent .empty { text-align: center; color: #767676; padding: 34px 0; }
/* Recent-posts table scrolls horizontally on small screens instead of overflowing the page. */
.adm-recent-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) { .adm-recent { min-width: 560px; } }

.adm-btn { display: inline-block; padding: 11px 22px; border-radius: 8px; background: #ff6714;
	color: #fff; font-size: 16px; font-weight: 600; }
.adm-btn.ghost { background: #f1f1f1; color: #333; }

@media (max-width: 1100px) {
	.adm-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.adm-stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.adm-groups { grid-template-columns: 1fr; }
}

/* ===== Contact page (about/location.php) ===== */
.contact-page { padding: 10px 0 30px; }
.contact-intro { font-size: 19px; color: #444; line-height: 1.75; max-width: 900px; margin-bottom: 50px; }
.contact-grid { display: flex; gap: 48px; align-items: stretch; flex-wrap: wrap; }
.contact-info { flex: 1 1 340px; min-width: 300px; }
.contact-map { flex: 1 1 480px; min-width: 300px; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 400px; }
.contact-info h5, .contact-depts h5 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 2px solid #ff6714; }
.contact-info ul { margin: 0; padding: 0; list-style: none; }
.contact-info li { display: flex; padding: 16px 0; border-bottom: 1px solid #eee; }
.contact-info .ci-label { flex: 0 0 108px; font-size: 15px; font-weight: 600; color: #ff6714; text-transform: uppercase; letter-spacing: .03em; padding-top: 3px; }
.contact-info .ci-value { flex: 1; font-size: 18px; color: #333; line-height: 1.6; }
.contact-info .ci-value a { color: #333; text-decoration: underline; }
.contact-info .ci-value a:hover { color: #ff6714; }

.contact-depts { margin-top: 64px; }
.contact-depts ul { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.contact-depts li { flex: 1 1 240px; min-width: 240px; background: #faf7f3; border: 1px solid #f0e9e1; border-radius: 10px; padding: 26px 28px; }
.contact-depts li strong { display: block; font-size: 19px; color: #111; margin-bottom: 6px; }
.contact-depts .cd-note { display: block; font-size: 14px; color: #888; line-height: 1.5; margin-bottom: 14px; min-height: 42px; }
.contact-depts li a { font-size: 17px; color: #ff6714; font-weight: 600; text-decoration: none; }
.contact-depts li a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	.contact-grid { gap: 32px; }
	.contact-intro { font-size: 17px; margin-bottom: 36px; }
}
@media (max-width: 768px) {
	.contact-info h5, .contact-depts h5 { font-size: 21px; }
	.contact-info .ci-value { font-size: 16px; }
	.contact-depts { margin-top: 44px; }
	.contact-depts li { flex: 1 1 100%; }
	.contact-depts .cd-note { min-height: 0; }
}

/* ===== Policy pages (privacy.php) ===== */
.policy-page { max-width: 900px; padding: 10px 0 30px; }
.policy-date { font-size: 15px; color: #767676; margin-bottom: 36px; }
.policy-sec { margin-bottom: 34px; }
.policy-sec h5 { font-size: 21px; font-weight: 700; color: #111; margin-bottom: 12px; }
.policy-sec p { font-size: 17px; color: #444; line-height: 1.8; }
.policy-sec p a { color: #ff6714; text-decoration: underline; }
@media (max-width: 768px) {
	.policy-sec h5 { font-size: 19px; }
	.policy-sec p { font-size: 16px; }
}

/* ===== Get Involved (get-involved/index.php) ===== */
.getinvolved { padding: 10px 0 30px; }
.gi-intro { font-size: 19px; color: #444; line-height: 1.8; max-width: 920px; margin-bottom: 50px; }
.gi-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.gi-card { flex: 1 1 300px; min-width: 280px; display: flex; flex-direction: column; background: #faf7f3; border: 1px solid #f0e9e1; border-radius: 12px; padding: 38px 36px; scroll-margin-top: 120px; }
.gi-card h5 { font-size: 23px; font-weight: 700; color: #111; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid #ff6714; }
.gi-card p { font-size: 16px; color: #4a4640; line-height: 1.75; flex: 1; }
.gi-link { display: inline-block; margin-top: 22px; font-size: 17px; font-weight: 600; color: #ff6714; text-decoration: none; }
.gi-link:hover { text-decoration: underline; }
.gi-social { display: flex; gap: 14px; margin-top: 22px; }
.gi-social a { display: inline-block; padding: 9px 22px; border: 1px solid #ff6714; border-radius: 999px; font-size: 15px; font-weight: 600; color: #ff6714; text-decoration: none; }
.gi-social a:hover { background: #ff6714; color: #fff; }
@media (max-width: 1024px) {
	.gi-intro { font-size: 17px; margin-bottom: 36px; }
}
@media (max-width: 768px) {
	.gi-card { flex: 1 1 100%; }
	.gi-card h5 { font-size: 21px; }
}
/* Get Involved — "Our Partners" marquee (mirrors footer .foot-partners) */
.gi-partners { margin-top: 66px; }
.gi-partners > h5 { font-size: 23px; font-weight: 700; color: #111; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 2px solid #ff6714; }
.gi-partners .items { overflow: hidden; }
.gi-partners .slick-list { overflow: visible; }
.gi-partners .item { padding: 0 10px; }
.gi-partners .partner { background: #f9f3f0; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gi-partners .partner img { width: 100%; height: auto; display: block; }
.gi-partners .items:not(.slick-initialized) { display: flex; flex-wrap: nowrap; }
.gi-partners .items:not(.slick-initialized) .item { flex: 0 0 16.66%; box-sizing: border-box; }
.gi-partners-more { text-align: center; margin-top: 38px; }
.gi-partners-more a { display: inline-block; padding: 15px 40px; background: #ff6714; color: #fff; border-radius: 999px; font-size: 17px; font-weight: 600; text-decoration: none; transition: background .2s; }
.gi-partners-more a:hover { background: #e85800; }

/* Transparency — "View earlier reports" archive link (matches Articles Download .sub-more) */
.s16 .sub-more.s16-archive { margin-top: 40px; }
.s16 .sub-more.s16-archive a { width: auto; white-space: nowrap; padding: 0 60px 0 36px; }

/* ===== Full-screen site map overlay (opened by .sitemap-btn) ===== */
.sitemap.sitemap-en:before { background: linear-gradient(315deg, #ff9e14 0%, #ff6714 100%); }
.sitemap .sm-inner { position: relative; z-index: 5; max-width: 1180px; margin: 0 auto; height: 100%; box-sizing: border-box; padding: 130px 5% 50px; overflow-y: auto; }
.sitemap .sm-title { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 38px; }
.sitemap .sm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 24px; opacity: 0; transform: translateY(24px); transition: opacity .5s ease .15s, transform .5s ease .15s; }
html.sitemap-opened .sitemap .sm-grid { opacity: 1; transform: translateY(0); }
.sitemap .sm-head { display: block; font-size: 19px; font-weight: 700; color: #fff; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,.55); }
.sitemap .sm-head:hover { color: #fff; border-bottom-color: #fff; }
.sitemap .sm-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap .sm-col li { margin-bottom: 9px; }
.sitemap .sm-col li a { font-size: 15px; color: rgba(255,255,255,.82); }
.sitemap .sm-col li a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1024px) {
	.sitemap .sm-grid { grid-template-columns: repeat(3, 1fr); }
	.sitemap .sm-inner { padding: 100px 6% 40px; }
}
@media (max-width: 600px) {
	.sitemap .sm-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}

/* Home "Latest News & Insights" thumbnails: show the whole image (no crop). */
.section02 .inner .img-box .pic { background: #f7f7f5; }
.section02 .inner .img-box .pic img { object-fit: contain !important; padding: 6px; box-sizing: border-box; }
/* No border by default; on hover show an orange ring (like the Reports section). */
.section02 .inner .img-box { border: 0 !important; transition: box-shadow .3s ease; }
.section02 .inner:hover .img-box { box-shadow: 0 0 0 2px #ff6714, 0 0 10px 1px rgba(96,40,9,.3); }
.section02 .slick-slide, .section02 .slick-slide:focus, .section02 .slick-slide a:focus, .section02 .inner:focus, .section02 .inner a:focus { outline: 0 !important; }

/* CDP "Who is Requested to Disclose" popup — long link button (View Organizations Requested to Disclose in Korea).
   Desktop stays one line (inline nowrap); on tablet/mobile the box is narrower, so let it wrap instead of overflowing. */
@media (max-width: 1024px) {
	.cdp-req-btn { white-space: normal !important; height: auto !important; min-height: 56px; max-width: 100%; padding: 13px 22px !important; font-size: 16px !important; line-height: 1.35 !important; }
}
@media (max-width: 600px) {
	.cdp-req-btn { font-size: 15px !important; padding: 12px 18px !important; }
}