/* MODIVIEW brand layer over the papertiger study copy: fonts and colors only. */

/* The original faces are paid (Right Grotesk, Onsite Standard, Suisse Works); free faces are
   declared under the same family names so the study CSS is untouched:
   Latin display -> Saira Extra Condensed Black (size-adjust matches Right Grotesk Tight width), Hangul display -> Black Han Sans, body -> Paperlogy (paperlogy-onsite.css),
   italic accent -> Paperlogy upright (no italic). All SIL OFL 1.1. */
@font-face {
	font-family: Rightgrotesk;
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url(/assets/_brand/fonts/SairaExtraCondensed-Black-latin.woff2) format("woff2");
	size-adjust: 87%;
	/* baseline matched to Right Grotesk (ascent 2108, descent 350 / 2048); overrides are scaled by size-adjust */
	ascent-override: 118.3%;
	descent-override: 19.7%;
	line-gap-override: 0%;
	unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122;
}
@font-face {
	font-family: Rightgrotesk;
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url(/assets/_brand/fonts/BlackHanSans-hangul.woff2) format("woff2");
	unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

/* The italic accent face (Suisseworks slot: buttons, em) is dropped on request: it renders Paperlogy
   upright like the body (user 10-26: 「이탤릭체같은 부분적용은 제거해주고」). */
@font-face {
	font-family: Suisseworks;
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(/assets/_brand/fonts/paperlogy/Paperlogy-4Regular.woff2) format("woff2");
}
@font-face {
	font-family: Suisseworks;
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url(/assets/_brand/fonts/paperlogy/Paperlogy-5Medium.woff2) format("woff2");
}
@font-face {
	font-family: Suisseworks;
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url(/assets/_brand/fonts/paperlogy/Paperlogy-7Bold.woff2) format("woff2");
}



:root {
	--accent--tart: #ef7a1e;
	--accent--pink: #fff2da;
}


/* Hangul for the mono face (DM Mono has no Hangul): Paperlogy at the same two weights DM Mono ships,
   so a weight with no DM Mono file never drops Latin to the fallback. */
@font-face {
	font-family: Dmmono;
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(/assets/_brand/fonts/paperlogy/Paperlogy-4Regular.woff2) format("woff2");
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
@font-face {
	font-family: Dmmono;
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url(/assets/_brand/fonts/paperlogy/Paperlogy-5Medium.woff2) format("woff2");
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}



/* Korean wraps at word boundaries, not mid-syllable-run. */
body {
	word-break: keep-all;
}

/* No italic anywhere: em and dfn keep their weight but stand upright. */
em, dfn { font-style: normal; }

/* Hangul needs more leading than the study's Latin values (user 10-26: 「line-height 한글 좀더 전반적으로 다 넓혀줘」).
   Only the body/mono faces change; the Latin display faces keep the study's tight leading. */
:root {
	--_typography---text-base--line-height: 1.6;
	--_typography---text-small--line-height: 1.6;
	--_typography---text-micro--line-height: 1.5;
	--_typography---text-base-mono--line-height: 1.5;
	--_typography---h4--line-height: 1.45;
	--_typography---h2-alt--line-height: 1.3;
}
.t-base.is-small { line-height: 1.6; }
.t-display-1.onsite, .t-display-2.is-alt, .t-display-2-alt.is-alt,
.t-display-3.onsite, .t-huge-1.onsite { line-height: 1.35; }
.t-rich-text, .t-rich-text :is(p, li) { line-height: 1.6; }
/* The page embed sets this to 1 after brand.css loads, so one more class is needed to win. */
.c-review-main .c-review-quote .t-base { line-height: 1.35; }

/* Worker-rendered forms and private boards in the published site shell. */
.pt-form-block {
	max-width: 690px;
	width: 100%;
}

.pt-dynamic .pt-post-message h3,
.pt-dynamic .pt-post-reply h3 {
	margin: 0;
}

.pt-form-hint,
.pt-form-error,
.pt-form-nav {
	margin: 0;
}

.pt-form-hint {
	color: inherit;
	font-family: Onsitestandard, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.4;
	opacity: 0.6;
	text-transform: none;
}

.pt-form-error,
.pt-form-banner {
	color: #9d241d;
}

.pt-form-banner {
	background: #fff2da;
	border: 1px solid #9d241d;
	margin-bottom: 1.5em;
	padding: 1em;
}

.pt-field-error :is(input, textarea) {
	border-color: #9d241d;
}

.pt-consent {
	align-items: flex-start;
	height: auto;
	min-height: 42px;
	padding-bottom: 10px;
	padding-top: 10px;
	text-transform: none;
	white-space: normal;
	width: fit-content;
}

.pt-consent input {
	margin-top: 0.2em;
	min-width: 14px;
	width: 14px;
}

.pt-consent .c-contact-form-choice-text {
	line-height: 1.4;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pt-consent a,
.pt-form-nav a,
.pt-dynamic .pt-admin-strip a,
.pt-dynamic .pt-board-actions .t-micro {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.pt-dynamic .pt-board-wrap {
	max-width: 690px;
	margin-top: 3em;
	width: 100%;
}

.pt-dynamic .pt-board-scroll {
	overflow-x: auto;
	width: 100%;
}

.pt-dynamic .pt-board-table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.pt-dynamic .pt-board-table :is(th, td) {
	border-bottom: 1px solid #000000;
	padding: 1em 0.5em;
	text-align: left;
	vertical-align: top;
}

.pt-dynamic .pt-board-table th {
	font-family: var(--_typography---text-micro--font-family);
	font-size: var(--_responsive---text-micro);
	font-weight: var(--_typography---text-micro--font-weight);
	letter-spacing: var(--_typography---text-micro--letter-spacing);
	line-height: var(--_typography---text-micro--line-height);
	text-transform: uppercase;
}

.pt-dynamic .pt-board-no {
	width: 4em;
}

.pt-dynamic .pt-board-title {
	width: 48%;
}

.pt-dynamic .pt-lock {
	border: 1px solid #111111;
	display: inline-block;
	font-size: 0.65em;
	letter-spacing: 0.08em;
	margin-right: 0.7em;
	padding: 0.2em 0.45em;
}

.pt-dynamic .pt-board-empty {
	padding: 4em 1em;
	text-align: center;
}

.pt-dynamic .pt-board-actions,
.pt-dynamic .pt-pager {
	display: flex;
	align-items: center;
	gap: 1em;
	justify-content: flex-end;
	margin-top: 1.5em;
}

.pt-dynamic .pt-pager .pt-small-btn {
	min-height: auto;
	padding: 0.7em 1em;
}

.pt-dynamic .pt-admin-strip {
	background: #fff2da;
	margin: 0 0 1.5em;
	padding: 1em;
}

.pt-dynamic .pt-post-head {
	border-bottom: 1px solid #111111;
	padding-bottom: 1.5em;
}

.pt-dynamic .pt-post-head p,
.pt-dynamic .pt-post-head h2 {
	margin: 0;
}

.pt-dynamic .pt-detail-row {
	display: flex;
	gap: 2em;
	border-bottom: 1px solid #d2d2d2;
	padding: 1em 0;
}

.pt-dynamic .pt-detail-row dt {
	flex: 0 0 12em;
}

.pt-dynamic .pt-detail-row dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pt-dynamic .pt-post-message,
.pt-dynamic .pt-post-reply,
.pt-dynamic .pt-reply-form,
.pt-dynamic .pt-unlock-form {
	border-top: 1px solid #111111;
	margin-top: 2em;
	padding-top: 2em;
}

@media screen and (max-width: 767px) {
	.pt-dynamic .pt-form-block,
	.pt-dynamic .pt-board-wrap {
		width: 100%;
	}

	.pt-dynamic .pt-detail-row {
		display: block;
	}

	.pt-dynamic .pt-detail-row dt {
		margin-bottom: 0.5em;
	}

	.pt-dynamic .pt-board-actions {
		justify-content: flex-end;
	}
}

/* Pages without the contact entrance animation must start visible. */
.pt-dynamic:not([data-page="contact"]) .contact-hero :is(.c-exp-contact-sub, .c-contact-form-block) {
	opacity: 1;
}

/* Keep every board column readable within the mobile viewport. */
@media screen and (max-width: 767px) {
	.pt-dynamic .pt-board-table {
		min-width: 0;
	}

	.pt-dynamic .pt-board-table :is(th, td) {
		padding: 1em 0.3em;
		overflow-wrap: anywhere;
	}

	.pt-dynamic .pt-board-table td {
		font-size: 0.8em;
	}

	.pt-dynamic .pt-board-no {
		width: 2em;
	}

	.pt-dynamic .pt-board-title {
		width: 42%;
	}
}

/* The setup category fields are intentionally shorter than the full-message field. */
.pt-form-block .c-contact-form-group.two-col .c-contact-form-textarea {
	min-height: 7em;
}

/* Worker-rendered legal pages use the shared shell without contact-page spacing. */
.pt-dynamic .pt-legal {
	padding: clamp(8em, 12vw, 12em) 0 clamp(5em, 8vw, 8em);
}

.pt-dynamic .pt-legal .updated {
	margin: 1em 0 0;
}

.pt-dynamic .pt-legal .doc {
	margin-top: 3em;
	max-width: 55em;
	min-width: 0;
}

.pt-dynamic .pt-legal .doc h2 {
	font-size: clamp(1.35em, 2.2vw, 2em);
	line-height: 1.25;
	margin: 2.5em 0 0.75em;
}

.pt-dynamic .pt-legal .doc :is(p, li) {
	line-height: 1.75;
}

.pt-dynamic .pt-legal .doc ul {
	padding-left: 1.4em;
}

.pt-dynamic .pt-legal .doc table {
	border-collapse: collapse;
	margin: 1.5em 0 2em;
	max-width: 100%;
	width: 100%;
}

.pt-dynamic .pt-legal .doc :is(th, td) {
	border-bottom: 1px solid #b8b2a8;
	line-height: 1.6;
	overflow-wrap: anywhere;
	padding: 1em 0.75em;
	text-align: left;
	vertical-align: top;
}

.pt-dynamic .pt-legal .doc th {
	font-weight: 700;
	width: 14em;
}

@media screen and (max-width: 767px) {
	.pt-dynamic .pt-legal {
		padding-top: 7em;
	}

	.pt-dynamic .pt-legal .doc {
		margin-top: 2em;
	}

	.pt-dynamic .pt-legal .doc table {
		font-size: 0.82em;
		table-layout: fixed;
	}

	.pt-dynamic .pt-legal .doc :is(th, td) {
		padding: 0.85em 0.4em;
	}

	.pt-dynamic .pt-legal .doc th {
		width: 36%;
	}
}

.pt-dynamic .pt-legal > .o-container > .t-micro {
	margin-bottom: 1.5rem;
}

.pt-dynamic .pt-legal h1 {
	line-height: 1.2;
	margin-bottom: 1rem;
}

/* The team and news sections were dropped from About, so st-how now sits right above the footer.
   The footer slides up from underneath, which the original news section allowed with this stacking. */
.c-section.st-how {
	z-index: 15;
	position: relative;
}

/* Contact, setup and their boards: split layout (user 10-27 「cantct 이랑 setup 다른 디자인으로 모두 변경해줘 지금 width너무 작고」).
   Title column stays pinned on the left, the form or board takes the wide right column. */
.pt-split.c-section.contact-hero {
	padding-top: max(140px, 8em);
	padding-bottom: 8em;
}
.pt-split .o-row.contact-hero {
	flex-flow: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6em;
	text-align: left;
}
.pt-split .c-contact-hero {
	flex: 0 0 34%;
	width: 34%;
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 2.5em;
	position: sticky;
	top: 8em;
}
.pt-split .c-contact-hero .t-huge-0 {
	font-size: clamp(96px, 9vw, 200px);
	line-height: 0.85;
	text-align: left;
}
.pt-split .c-exp-contact-sub {
	display: flex;
	flex-direction: column;
	gap: 2em;
	border-top: 2px solid #000000;
	padding-top: 1.5em;
}
.pt-split .c-exp-contact-sub .t-base {
	margin: 0;
}
.pt-split .pt-mail {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
}
.pt-split .pt-mail a {
	font-size: 1.4em;
	text-decoration: none;
	transition: color 0.2s;
}
.pt-split .pt-mail a::after {
	content: " \2197";
}
.pt-split .pt-mail a:hover {
	color: var(--accent--tart);
}
.pt-split .pt-form-block,
.pt-split .pt-board-wrap,
.pt-split .pt-post-col {
	flex: 1 1 auto;
	max-width: none;
	margin-top: 0;
	min-width: 0;
}

/* Boxed fields replace the underline inputs. */
.pt-split .c-contact-form {
	gap: 2em;
	counter-reset: pt-step;
}
.pt-split .c-contact-form-group.two-col {
	gap: 1.5em;
}
.pt-split .c-contact-form-item {
	gap: 0.6em;
}
.pt-split :is(.c-contact-form-input, .c-contact-form-textarea) {
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 0;
	padding: 0.9em 1em;
	height: auto;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.pt-split :is(.c-contact-form-input, .c-contact-form-textarea):focus {
	border-color: var(--accent--tart);
	box-shadow: 0 0 0 1px var(--accent--tart);
	outline: none;
}
.pt-split .c-contact-form-textarea {
	min-height: 12em;
}
.pt-split .pt-field-error :is(input, textarea) {
	border-color: #9d241d;
}

/* Setup section heads become numbered dividers. */
.pt-split .c-contact-form-group:has(> .c-contact-form-hint),
.pt-split .c-contact-form-group:has(> .t-micro:only-child) {
	border-top: 2px solid #000000;
	margin-top: 1em;
	padding-top: 1em;
}
.pt-split .c-contact-form-group:has(> .c-contact-form-hint) > .t-micro::before,
.pt-split .c-contact-form-group:has(> .t-micro:only-child) > .t-micro::before {
	counter-increment: pt-step;
	content: counter(pt-step, decimal-leading-zero) " / ";
	color: var(--accent--tart);
}
.pt-split .c-contact-form-group:first-of-type:has(> .t-micro:only-child) {
	margin-top: 0;
}
.pt-split .c-btn.form.w-button {
	width: 100%;
	padding: 1.2em;
}

/* Board: full-width list rows, no underlined titles. */
.pt-split .pt-board-table thead th {
	border-top: 2px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 1em;
}
.pt-split .pt-board-table td {
	padding: 1.4em 1em;
	vertical-align: middle;
}
.pt-split .pt-board-table tbody tr {
	transition: background-color 0.2s;
}
.pt-split .pt-board-table tbody tr:hover {
	background: #ffffff;
}
.pt-split .pt-board-no {
	width: 5em;
}
.pt-split .pt-board-title {
	width: auto;
}
.pt-split .pt-board-table :is(th, td):nth-child(3) {
	width: 7em;
}
.pt-split .pt-board-title a {
	text-decoration: none;
}
.pt-split .pt-board-table tbody tr:hover .pt-board-title a {
	color: var(--accent--tart);
}
.pt-split .pt-board-date,
.pt-split .pt-board-status {
	white-space: nowrap;
	width: 9em;
}
.pt-split .pt-board-status span {
	border: 1px solid #000000;
	border-radius: 2em;
	display: inline-block;
	font-size: 0.75em;
	padding: 0.3em 0.9em;
}
.pt-split .pt-board-status span.is-done {
	background: #000000;
	color: #ffffff;
}

@media screen and (max-width: 991px) {
	.pt-split .o-row.contact-hero {
		flex-flow: column;
		gap: 3em;
	}
	.pt-split .c-contact-hero {
		flex-basis: auto;
		position: static;
		width: 100%;
	}
	.pt-split .pt-form-block,
	.pt-split .pt-board-wrap,
	.pt-split .pt-post-col {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.pt-split.c-section.contact-hero {
		padding-top: 110px;
		padding-bottom: 5em;
	}
	.pt-split .c-contact-hero .t-huge-0 {
		font-size: 88px;
	}
	.pt-split .pt-board-table td {
		padding: 1em 0.3em;
	}
	.pt-split .pt-board-no {
		width: 2.5em;
		white-space: nowrap;
	}
	.pt-split .pt-board-table :is(th, td):nth-child(3) {
		display: none;
	}
	.pt-split .pt-board-date {
		width: 6.5em;
	}
	.pt-split .pt-board-status {
		width: 5em;
	}
	.pt-split .pt-board-title a {
		display: block;
		overflow: hidden;
		overflow-wrap: normal;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Korean form labels: DM Mono's monospace space opens wide gaps between Korean words
   (「글  비밀번호」), so labels in these pages use the body face. */
.pt-split .t-micro {
	font-family: Onsitestandard, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0;
}

/* Post view: one column holds the post and its actions; one rule per boundary. */
.pt-split .pt-post-col .pt-board-wrap {
	width: 100%;
}
.pt-split .pt-post-head {
	border-top: 2px solid #000000;
	border-bottom: 1px solid #000000;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	padding: 1.5em 0;
}
.pt-split .pt-post-head + * {
	border-top: 0;
}
.pt-split .pt-detail-row:last-child {
	border-bottom: 0;
}
.pt-split .pt-unlock-form {
	gap: 1.5em;
	max-width: 480px;
}
.pt-split .pt-unlock-form :is(h3, p) {
	margin: 0;
}
.pt-split .c-btn.form {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 1;
}
.pt-split .pt-post-head .t-micro {
	font-family: Onsitestandard, Arial, sans-serif;
	letter-spacing: 0;
	opacity: 0.7;
}

/* Board actions: policy link on the left, the button on the right, under the content. */
.pt-split .pt-board-actions {
	border-top: 1px solid #000000;
	justify-content: space-between;
	margin-top: 2.5em;
	padding-top: 1.5em;
}
.pt-split .pt-board-table + .pt-board-actions,
.pt-split .pt-board-scroll + .pt-board-actions,
.pt-split .pt-pager + .pt-board-actions {
	border-top: 0;
	margin-top: 1.5em;
	padding-top: 0;
}
.pt-split .pt-board-actions .t-micro {
	font-family: Onsitestandard, Arial, sans-serif;
	letter-spacing: 0;
}

.pt-split .pt-detail-row {
	align-items: baseline;
}
.pt-split :is(.pt-post-message, .pt-post-reply) {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
}
.pt-split :is(.pt-post-message, .pt-post-reply) :is(h3, p) {
	margin: 0;
}
.pt-split input.c-btn.form {
	height: auto;
	line-height: 1.2;
	padding: 1.1em 1em;
}