@charset "UTF-8";
/* _layout.css held the document at 360px, which pushed 40px off-screen on
   320px phones. The layout below 360 is repaired piece by piece instead. */
html { min-width: 0; }

/* Home success stories: the items carry .swiper-slide, whose height:100%
   resolves against the two-row list at 961-1260px and doubles each row, so the
   third card fell onto the search section. */
.main .section.win .data-list > li { height: auto; }

/* The fixed .floating-group sits over the right edge of the footer. At the
   page end the footer cannot scroll out from under it, so the footer keeps
   that strip free: on phones the copyright line wraps before the buttons,
   and at 1025-1260px (gutter 40px, the same right offset as the buttons) the
   SNS icons move left of them. */
@media all and (max-width: 960px) {
	#footer .footer-bottom .copy { box-sizing: border-box; padding-right: 56px; }
}
/* The column is as wide as the always-open phone pill (212px), so every list
   item and the gaps between them were invisible 212px click targets; at about
   1300-1440px they covered the slider next arrows (.swiper-btns .next) at
   mid-screen. Only the visible buttons take the pointer now. */
.floating-group { pointer-events: none; }
.floating-group a { pointer-events: auto; }
@media all and (min-width: 1025px) and (max-width: 1260px) {
	#footer .footer-bottom .sns-wrap { right: calc(var(--gutter) + 75px); }
}

/* Mobile menu. #nav starts below the header (60/80px) but its list was a full
   viewport tall, so on short screens the last links sat below the bottom edge
   and could not be scrolled to. */
@media all and (max-width: 768px) {
	#nav > ul { height: calc(var(--vh100) - 60px); }
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#nav > ul { height: calc(var(--vh100) - 80px); }
}
@media all and (max-width: 960px) {
	#nav > ul ul a { word-break: keep-all; }
}
/* header.php's three columns leave about 66px per link below 375px, which
   split words such as 스타트업 and 엔터테인먼트 mid-word. */
@media all and (max-width: 374px) {
	#nav > ul ul li { width: 50%; }
}

/* Home media center: main.php stacks the cards one per row up to 960px, which
   at tablet widths turned each thumbnail into a 700px-wide banner. Two per row
   from 600px bridges to the three-column desktop row. */
@media all and (min-width: 600px) and (max-width: 960px) {
	.main .section.news .data-list.col-3 {
		-webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row;
		flex-wrap: wrap; gap: 32px 20px;
	}
	.main .section.news .data-list.col-3 > li { width: calc((100% - 20px) / 2); }
}

/* Korean headings on the intro and coin pages broke inside words on narrow
   phones (지원합니/다., 디센트/의). */
.sub:is(.coin, .about) .title-wrap .title { word-break: keep-all; }

/* #popupMain: the 606/467px banner box sat inside a popup capped at the
   viewport height with overflow:hidden, so on short screens (phones in
   landscape) the close buttons were cut off. The banner keeps its size and
   scrolls inside the popup; the buttons stay in view. */
#popupMain .popup { display: flex; flex-direction: column; }
#popupMain .popup-body { flex: 0 1 auto; min-height: 0; height: auto; overflow-y: auto; }
#popupMain .popup-body .swiper { flex-shrink: 0; height: 606px; }
#popupMain .button-area { flex-shrink: 0; }
@media all and (max-width: 768px) {
	#popupMain .popup-body { max-height: none; }
	#popupMain .popup-body .swiper { height: 467px; }
}