@charset "UTF-8";

/* Article bodies keep word-break:keep-all for Korean, so a pasted URL or a
   long English token had no break point and ran out of the column. Only the
   article text (.img-wrap), not the footer buttons that share .detail-body. */
.detail-body .img-wrap :is(p, li, a, h2, h3, h4),
.detail-title {
	overflow-wrap: break-word;
}

/* Date, byline and the original/share buttons share one row; on phones the
   row squeezed the date into "2026-" / "07-14" and "View original" into two
   lines. The buttons keep their width and the byline wraps under the date. */
@media all and (max-width: 768px) {
	.article .section.detail .detail-footer .flex-wrap { gap: 12px; }
	.article .section.detail .detail-footer .flex-wrap .datas {
		flex: 1 1 auto;
		min-width: 0;
		flex-wrap: wrap;
		row-gap: 4px;
	}
	.article .section.detail .detail-footer .flex-wrap .datas span:first-child { white-space: nowrap; }
	.article .section.detail .detail-footer .flex-wrap .button-area { flex: none; }
	.article .section.detail .detail-footer .flex-wrap .button-area .btn { white-space: nowrap; }
}
/* A byline rarely fits beside the date here, and once wrapped its divider
   started the second line; the byline goes under the date without it. */
@media all and (max-width: 480px) {
	.article .section.detail .detail-footer .flex-wrap .datas { flex-direction: column; align-items: flex-start; }
	.article .section.detail .detail-footer .flex-wrap .datas span + span::before { display: none; }
}

/* The field chips scroll sideways with a hidden scrollbar, which only touch
   users can do; mouse users get the chips wrapped onto more rows instead. */
@media (hover: hover) and (pointer: fine) {
	.news-field-filter {
		flex-wrap: wrap;
		row-gap: 8px;
	}
}

/* ---- lists ---- */

/* _global.css turns every .data-list into a wrapping column below 769px with
   no width on its items, so each flex line took the max-content of its widest
   card: an English one-line result badge ("Legal Review Memorandum Provided")
   widened every success-story card past the screen. */
@media all and (max-width: 768px) {
	.sub.win:not(.detail) .data-list.col-3 > li,
	.sub.news:not(.detail) .data-list > li,
	.main.search .data-list[class*="col"] > li {
		width: 100%;
		min-width: 0;
	}
}

/* Below 769px the cards were one per row, each as wide as the page (a 728px
   card with a 430px photo at 768). Two columns start at the same width as the
   lawyer list, where a card is still as wide as at 769px. */
@media all and (min-width: 540px) and (max-width: 768px) {
	.sub.win:not(.detail) .data-list.col-3 {
		flex-direction: row;
		gap: 20px;
	}
	.sub.win:not(.detail) .data-list.col-3 > li { width: calc((100% - 20px) / 2); }
}
@media all and (min-width: 540px) and (max-width: 960px) {
	.sub.news:not(.detail) .data-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px 20px;
	}
	.sub.news:not(.detail) .data-list > li { width: calc((100% - 20px) / 2); min-width: 0; }
	/* Same frame proportion as the 961px+ thumbnails (422x250), so a row's
	   photos line up whatever the source image size. */
	.sub.news:not(.detail) .item.news .img-wrap { aspect-ratio: 422 / 250; height: auto; }
	.sub.news:not(.detail) .item.news .img-wrap .img { height: 100%; }
}

/* ---- search ---- */

/* Two practice cards per row leave a 76px text column below 360px, which
   split "디지털자산" and "Cryptocurrency" mid-word; the card padding shrinks
   there instead of the cards going one per row. */
@media all and (max-width: 359px) {
	.main.search .section.work .item.card.search { padding: 24px 16px; }
	.main.search .section.work .item.card.search .title { word-break: keep-all; overflow-wrap: break-word; }
}

/* ---- contact ---- */

/* The closed/unknown notices sit in the legacy .nodata-wrap, whose large
   heading broke "않습니다" mid-word at 320-430px. */
.sub.contact .nodata-wrap p {
	word-break: keep-all;
	overflow-wrap: break-word;
}