.gg-step + .gg-step {
	margin-top: 16px;
}
.gg-step__title {
	margin: 0 0 14px;
	font-size: 1.1rem;
}
#roster-panel.is-dragging {
	border-color: var(--accent);
	background: var(--surface);
}

.gg-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 16px;
}
.gg-file__hint {
	color: var(--text-soft);
	font-size: 0.875rem;
}
.gg-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
.gg-error {
	margin: 8px 0 0;
	color: #b3261e;
	font-size: 0.9rem;
}

.gg-note {
	margin: 8px 0 0;
	color: var(--dw-teal-dark);
	font-size: 0.9rem;
}
.gg-import {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Work file bar: stays on screen so saving is always one tap away. */
.gg-work {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
	padding: 10px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.gg-work.is-dirty {
	border-color: #d9a400;
	background: #fff8e1;
}
.gg-work__status {
	flex: 1 1 280px;
	margin: 0;
	font-size: 0.9rem;
}
.gg-work__status strong {
	margin-right: 6px;
	color: var(--heading);
}
.gg-work__actions {
	display: flex;
	gap: 8px;
}
.gg-work__actions .button {
	min-height: 38px;
	padding: 0 14px;
	background: var(--bg);
}
.gg-work__actions .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Roster editor */
.gg-editor__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 8px;
}
.gg-editor__bar .gg-step__title {
	margin: 0;
}
.gg-editor__filter.field {
	width: 12em;
	padding: 6px 10px;
}
.gg-people__summary {
	margin: 0 0 10px;
	font-weight: 500;
}
.gg-people__summary:empty {
	display: none;
}
.gg-rows__head,
.gg-row {
	display: grid;
	grid-template-columns: 2.5rem minmax(7rem, 1fr) 6.5rem var(--attr-cols,) 4.5rem 36px;
	align-items: center;
	gap: 6px;
}
.gg-rows__head {
	padding: 0 6px 4px 9px; /* rows have a 3px left border */
	color: var(--text-soft);
	font-size: 0.8rem;
}
.gg-rows {
	max-height: 440px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	list-style: none;
}
.gg-rows:empty {
	display: none;
}
.gg-row {
	padding: 4px 6px;
	border-left: 3px solid transparent;
}
.gg-row + .gg-row {
	border-top: 1px solid #eef0f4;
}
.gg-row--leader {
	border-left-color: var(--dw-teal);
}
.gg-row--sub {
	border-left-color: var(--dw-green);
}
.gg-row__no {
	color: var(--text-soft);
	font-size: 0.8rem;
	text-align: right;
}
.gg-row .field {
	padding: 5px 8px;
	font-size: 0.95rem;
}
.gg-row__fixed.field {
	text-align: right;
}
.gg-row--leader .gg-row__role {
	color: var(--dw-teal);
	font-weight: 700;
}
.gg-row--sub .gg-row__role {
	color: var(--dw-green);
	font-weight: 700;
}
.gg-row__del {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--text-soft);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.gg-row__del:hover {
	background: #fdecea;
	color: #b3261e;
}
.gg-rows__empty {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--border);
	border-radius: 8px;
	color: var(--text-soft);
	text-align: center;
}
.gg-editor__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 8px;
}
@media (max-width: 600px) {
	.gg-rows__head,
	.gg-row {
		grid-template-columns: minmax(6rem, 1fr) 5.5rem var(--attr-cols-sm,) 3.6rem 32px;
		gap: 4px;
	}
	.gg-row__no {
		display: none;
	}
	.gg-row__del {
		width: 32px;
	}
	.gg-editor__filter.field {
		width: 100%;
	}
}

.gg-member em {
	font-style: normal;
	font-size: 0.75rem;
	font-weight: 700;
}

.gg-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}
.gg-sizes legend {
	padding: 0;
}
.gg-sizes label,
.gg-role {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.gg-sizes .field,
.gg-role .field {
	width: 4.5em;
	padding: 6px 8px;
	text-align: right;
}
.gg-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}
.gg-role input[type='checkbox'] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--accent);
}
.gg-role input[type='checkbox']:not(:checked) ~ .field {
	opacity: 0.45;
}
.gg-plan {
	margin: 16px 0;
	color: var(--heading);
	font-weight: 500;
}
.gg-plan:empty {
	display: none;
}

.gg-result {
	margin-top: 32px;
	scroll-margin-top: 16px;
}
.gg-result__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.gg-result__bar .gg-step__title {
	margin: 0;
}
.gg-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gg-warnings {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.gg-warnings li {
	margin-bottom: 6px;
	padding: 8px 12px;
	border-left: 3px solid #d9a400;
	border-radius: 4px;
	background: #fff8e1;
	font-size: 0.9rem;
}
.gg-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gg-group,
.gg-pool {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gg-pool {
	margin-bottom: 12px;
	border-style: dashed;
}
.gg-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 8px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
.gg-group__head strong {
	margin-right: auto;
	color: var(--heading);
}
.gg-group__head span {
	color: var(--text-soft);
	font-size: 0.85rem;
}
.gg-group__head .is-off {
	color: #b3261e;
	font-weight: 700;
}
.gg-group__head .gg-flag {
	order: 3;
	padding: 0 8px;
	border-radius: 999px;
	background: #fff8e1;
	color: #8a6100;
	font-size: 0.75rem;
}
.gg-group__head .gg-link {
	font-size: 0.85rem;
}
.gg-group__list {
	flex: 1;
	margin: 0;
	padding: 6px 8px 8px;
	list-style: none;
}
.gg-pool__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-height: 40px;
	margin: 0;
	padding: 6px 8px 8px;
	list-style: none;
}
.gg-member {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 32px;
	padding: 2px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: grab;
}
.gg-pool .gg-member {
	width: auto;
	border-color: var(--border);
	border-radius: 999px;
	padding: 2px 12px;
}
.gg-member > span {
	flex: 1;
	min-width: 0;
}
.gg-member:hover {
	background: var(--surface);
}
.gg-member.is-selected {
	border-color: var(--accent);
	background: #e6f2f3;
	font-weight: 700;
}
.gg-member--leader em {
	color: var(--dw-teal);
}
.gg-member--sub em {
	color: var(--dw-green);
}

/*
 * Two kinds of move, told apart everywhere by colour and symbol:
 *   swap (orange, ⇄)  a person in another group; sizes stay the same
 *   add  (teal, +)    a group itself; that group grows by one
 */
.gg-swap {
	display: none;
	padding: 0 6px;
	border-radius: 999px;
	color: #b25e00;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 700;
	white-space: nowrap;
}
.gg-member.is-swappable .gg-swap {
	display: inline;
	border: 1px dashed #e0a050;
	opacity: 0.8;
}
.gg-member.is-swappable:hover,
.gg-member.is-swap-target {
	border-color: #e08a00;
	background: #fff3e0;
}
.gg-member.is-swappable:hover .gg-swap,
.gg-member.is-swap-target .gg-swap {
	border: 0;
	background: #e08a00;
	color: #ffffff;
	opacity: 1;
}
.gg-member.is-swap-target {
	box-shadow: 0 0 0 3px rgba(224, 138, 0, 0.25);
}
.gg-member.is-moved {
	animation: gg-moved 1.6s ease-out;
}
@keyframes gg-moved {
	0%,
	30% {
		background: #fff1b8;
		box-shadow: 0 0 0 3px #f5c400;
	}
	100% {
		background: transparent;
		box-shadow: 0 0 0 0 transparent;
	}
}

/* Drop targets appear while someone is picked for moving. */
.gg-drop {
	display: none;
	margin: 0 8px 8px;
	min-height: 36px;
	border: 1px dashed var(--accent);
	border-radius: 6px;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}
.gg-drop:hover,
.gg-group.is-over .gg-drop,
.gg-pool.is-over .gg-drop {
	border-style: solid;
	background: var(--accent);
	color: #ffffff;
}
.gg-board.is-moving .gg-drop {
	display: block;
}
.gg-board.is-moving .is-source .gg-drop {
	display: none;
}
.gg-board.is-moving .gg-group,
.gg-board.is-moving .gg-pool {
	cursor: pointer;
}
.gg-board.is-moving .is-source {
	opacity: 0.85;
}
.gg-group.is-over,
.gg-pool.is-over {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(11, 107, 115, 0.2);
	background: #f2f9f9;
}
.gg-add {
	margin-top: 12px;
}

.gg-legend {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: var(--text-soft);
	font-size: 0.875rem;
}
.gg-legend li + li {
	margin-top: 4px;
}
.gg-key {
	display: inline-block;
	margin-right: 4px;
	padding: 0 8px;
	border-radius: 999px;
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
}
.gg-key--swap {
	background: #e08a00;
}
.gg-key--add {
	background: var(--accent);
}

/* Bottom dock: the last move (with undo) and the current selection. */
.gg-dock {
	position: sticky;
	bottom: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}
.gg-dock[hidden],
.gg-movelog[hidden] {
	display: none;
}
.gg-movelog {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #f5c400;
	border-radius: var(--radius);
	background: #fffbea;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 0.9rem;
}
.gg-movelog span {
	flex: 1 1 220px;
}

.gg-selbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 10px 14px;
	border-radius: var(--radius);
	background: var(--dw-teal-dark);
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(8, 63, 68, 0.25);
}
.gg-selbar span {
	flex: 1 1 200px;
}
.gg-selbar .button {
	min-height: 36px;
	border-color: #ffffff;
	color: #ffffff;
}
.gg-selbar .button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.gg-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}
.gg-mode legend {
	padding: 0;
}
.gg-mode__option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: 1 1 240px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
}
.gg-mode__option:has(input:checked) {
	border-color: var(--accent);
	background: var(--surface);
}
.gg-mode__option input {
	margin-top: 6px;
	accent-color: var(--accent);
}
.gg-mode__option span {
	color: var(--text-soft);
	font-size: 0.9rem;
}
.gg-mode__option b {
	display: block;
	color: var(--text);
	font-size: 1rem;
}

@media (max-width: 600px) {
	.gg-result__actions,
	.gg-result__actions .button {
		flex: 1 1 auto;
	}
}

.gg-example {
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--surface);
	font-size: 0.9rem;
	overflow-x: auto;
}

/* display rules above would otherwise override the hidden attribute */
.gg-pool[hidden],
.gg-selbar[hidden],
.gg-row[hidden],
.gg-rows__empty[hidden] {
	display: none;
}

/* Attribute columns (성별, 지역, ...): the table scrolls sideways when they do not fit. */
.gg-rows-scroll {
	overflow-x: auto;
}
.gg-rows-scroll > * {
	min-width: calc(2.5rem + 7rem + 6.5rem + var(--attrs, 0) * 6.5rem + 4.5rem + 36px + (4 + var(--attrs, 0)) * 6px + 12px);
}
.gg-rows__attr {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}
.gg-rows__attr > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gg-rows__attr-del {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--text-soft);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.gg-rows__attr-del:hover {
	color: #b3261e;
}
.gg-editor__add {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gg-criteria {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.gg-criteria[hidden] {
	display: none;
}
.gg-criteria legend {
	padding: 0 4px;
}
.gg-criterion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 6px 0;
}
.gg-criterion + .gg-criterion {
	border-top: 1px solid #eef0f4;
}
.gg-criterion__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	flex: 1 1 220px;
}
.gg-criterion__label span {
	color: var(--text-soft);
	font-size: 0.85rem;
}
.gg-criterion .field {
	width: auto;
	flex: 0 1 15em;
	padding: 6px 8px;
}

.gg-group__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	padding: 4px 14px;
	border-bottom: 1px solid var(--border);
	color: var(--text-soft);
	font-size: 0.78rem;
}
.gg-member__attrs {
	color: var(--text-soft);
	font-size: 0.75rem;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.gg-rows-scroll > * {
		min-width: calc(6rem + 5.5rem + var(--attrs, 0) * 5rem + 3.6rem + 32px + (3 + var(--attrs, 0)) * 4px + 12px);
	}
}

/* ---------- Full-window view (크게 보기) ---------- */
body.gg-present-open {
	overflow: hidden;
}
.gg-present {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: var(--text);
}
.gg-present[hidden] {
	display: none;
}
.gg-present__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}
.gg-present__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	flex: 1 1 280px;
	min-width: 0;
}
.gg-present__title {
	flex: 1 1 200px;
	min-width: 0;
	padding: 2px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--heading);
	font: inherit;
	font-size: 1.3rem;
	font-weight: 700;
}
.gg-present__title:hover,
.gg-present__title:focus {
	border-color: var(--border);
	background: #ffffff;
	outline: none;
}
.gg-present__meta {
	color: var(--text-soft);
	font-size: 0.9rem;
}
.gg-present__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.gg-present__tools button,
.gg-present__tools select {
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #ffffff;
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}
.gg-present__tools button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.gg-present__tools .is-primary {
	border-color: var(--accent);
	background: var(--accent);
	color: #ffffff;
}
.gg-present__tools .is-primary:hover {
	background: var(--accent-hover);
	color: #ffffff;
}
.gg-present__zoom {
	display: inline-flex;
	gap: 4px;
}
.gg-present__check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 4px;
	font-size: 0.9rem;
}
.gg-present__check input {
	accent-color: var(--accent);
}
.gg-present__print-head,
.gg-pgroup__event {
	display: none;
}

/* Font size is set by main.js so every group fits the window; everything scales in em. */
.gg-present__groups {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
	grid-auto-rows: max-content;
	align-content: start;
	gap: 0.6em;
	margin: 0;
	padding: 0.8em;
	overflow: auto;
	list-style: none;
	font-size: 16px;
	line-height: 1.35;
}
.gg-pgroup {
	border: 1px solid var(--border);
	border-top: 0.25em solid var(--dw-teal);
	border-radius: 0.4em;
	break-inside: avoid;
}
.gg-pgroup.is-pool {
	border-top-color: var(--dw-divider);
	border-style: dashed;
}
.gg-pgroup__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.35em 0.6em;
	background: var(--surface);
}
.gg-pgroup__head strong {
	color: var(--heading);
	font-size: 1.25em;
}
.gg-pgroup__head span {
	color: var(--text-soft);
	font-size: 0.85em;
}
.gg-pgroup__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6em;
	margin: 0;
	padding: 0.2em 0.6em;
	border-top: 1px solid var(--border);
	color: var(--text-soft);
	font-size: 0.75em;
}
.gg-pgroup__list {
	margin: 0;
	padding: 0.3em 0.6em 0.5em;
	list-style: none;
}
.gg-pmember {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.1em 0;
}
.gg-pmember__name {
	flex: 1;
	min-width: 0;
}
.gg-pmember small {
	color: var(--text-soft);
	font-size: 0.75em;
	white-space: nowrap;
}
.gg-pmember em {
	font-style: normal;
	font-size: 0.75em;
	font-weight: 700;
	white-space: nowrap;
}
.gg-pmember--leader .gg-pmember__name {
	font-weight: 700;
}
.gg-pmember--leader em {
	color: var(--dw-teal);
}
.gg-pmember--sub em {
	color: var(--dw-green);
}

/* ---------- Print: only the result, from the same view ---------- */
@media print {
	@page {
		margin: 12mm;
	}
	body.gg-has-result {
		display: block;
		min-height: 0;
		background: #ffffff;
	}
	body.gg-has-result > *:not(#present) {
		display: none !important;
	}
	body.gg-has-result .gg-present,
	body.gg-has-result .gg-present[hidden] {
		position: static;
		display: block;
	}
	.gg-present__bar {
		display: none;
	}
	.gg-present__print-head {
		display: block;
		margin-bottom: 6mm;
		padding-bottom: 3mm;
		border-bottom: 1.5pt solid var(--dw-teal-dark);
	}
	.gg-present__print-head h1 {
		margin: 0;
		font-size: 18pt;
	}
	.gg-present__print-head p {
		margin: 1mm 0 0;
		color: #555555;
		font-size: 9.5pt;
	}
	.gg-present__groups {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(55mm, 1fr));
		gap: 4mm;
		padding: 0;
		overflow: visible;
		font-size: 10.5pt !important;
	}
	.gg-pgroup {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* 조마다 한 장씩: one group per page, large, with the title on every page. */
	.gg-present.is-each .gg-present__print-head {
		display: none;
	}
	.gg-present.is-each .gg-present__groups {
		display: block;
		font-size: 16pt !important;
	}
	.gg-present.is-each .gg-pgroup {
		border: 0;
		break-after: page;
	}
	.gg-present.is-each .gg-pgroup:last-child {
		break-after: auto;
	}
	.gg-present.is-each .gg-pgroup__event {
		display: block;
		margin: 0 0 3mm;
		color: #555555;
		font-size: 0.7em;
	}
	.gg-present.is-each .gg-pgroup__head {
		padding: 0 0 2mm;
		border-bottom: 2pt solid var(--dw-teal-dark);
		background: none;
	}
	.gg-present.is-each .gg-pgroup__head strong {
		font-size: 1.8em;
	}
	.gg-present.is-each .gg-pgroup__list {
		padding: 3mm 0 0;
	}
	.gg-present.is-each .gg-pmember {
		padding: 2mm 0;
		border-bottom: 0.5pt solid #dddddd;
	}
}

/* ---------- Column matching (열 확인) ---------- */
.gg-mapping {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: #f6fbfb;
}
.gg-mapping[hidden] {
	display: none;
}
.gg-mapping__title {
	margin: 0 0 4px;
	font-size: 1.05rem;
}
.gg-mapping__header {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 12px;
	font-weight: 500;
}
.gg-mapping__header input {
	accent-color: var(--accent);
}
.gg-mapping__group {
	margin-top: 12px;
}
.gg-mapping__group[hidden] {
	display: none;
}
.gg-mapping__heading {
	margin: 0 0 6px;
	color: var(--heading);
	font-size: 0.95rem;
}
.gg-mapping__heading span {
	margin-left: 6px;
	color: var(--text-soft);
	font-size: 0.8rem;
	font-weight: 400;
}
.gg-mapfields {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #ffffff;
}
/* One of our fields and the source column that feeds it. */
.gg-mapfield {
	display: grid;
	grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
	align-items: center;
	gap: 4px 12px;
	padding: 8px 12px;
}
.gg-mapfield + .gg-mapfield {
	border-top: 1px solid #eef0f4;
}
.gg-mapfield__name {
	display: flex;
	flex-direction: column;
}
.gg-mapfield__name span {
	color: var(--text-soft);
	font-size: 0.78rem;
}
.gg-mapfield .field {
	padding: 6px 8px;
	text-overflow: ellipsis;
}
.gg-mapfield.is-empty .gg-mapfield__name strong,
.gg-mapfield.is-empty .field {
	color: var(--text-soft);
}
.gg-mapping__add {
	margin-top: 8px;
}
.gg-mapunused-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gg-mapunused {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	padding: 6px 10px;
	border: 1px dashed var(--border);
	border-radius: 8px;
	background: #ffffff;
	font-size: 0.9rem;
}
.gg-mapunused span {
	color: var(--text-soft);
	font-size: 0.8rem;
}
@media (max-width: 600px) {
	.gg-mapfield {
		grid-template-columns: 1fr;
	}
}
.gg-mapping__summary {
	margin: 12px 0 0;
	font-weight: 500;
}
.gg-mapping__summary.is-error {
	color: #b3261e;
}
.gg-mapping .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Role mark right after a name in the result, the full-window view and print: 김하늘 [리더] */
.gg-rolemark {
	display: inline-block;
	margin-left: 0.35em;
	padding: 0 0.45em;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 0.1em;
	white-space: nowrap;
}
.gg-rolemark--leader {
	background: var(--dw-teal);
	color: #ffffff;
}
.gg-rolemark--sub {
	border: 1px solid var(--dw-green);
	background: #e7f5ee;
	color: var(--dw-teal-dark);
}
@media print {
	.gg-rolemark {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* Inline "new attribute" name entry (instead of prompt(), which some in-app browsers block). */
.gg-addattr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.gg-mapping .gg-addattr {
	margin-top: 8px;
}
.gg-addattr .field {
	width: 13em;
	padding: 8px 10px;
}
.gg-addattr__error {
	flex-basis: 100%;
	color: #b3261e;
	font-size: 0.85rem;
}
.gg-addattr__error:empty {
	display: none;
}