/* 팔림 표면 토큰 — «생성물이다. 손으로 고치지 마라.»
 * 원본: docs/design-grammar/표면/좌표.json  sha256:ceef87747f36
 * 만든이: docs/design-grammar/tools/build-tokens.mjs
 * 다시 만들기: node docs/design-grammar/tools/build-tokens.mjs
 *
 * 이 파일은 «팔림 자사 표면»(자사랜딩 · 업종랜딩 · 고객대시보드)에만 쓴다.
 * 고객 테넌트 사이트에 쓰지 마라 — 고객 사이트가 서로 닮는 것이 「AI 티」 그 자체다.
 */

:root {
	--바탕: #1c1c1c;
	--면: #262626;
	--면-진: #2e2e2e;
	--글: #c5c5c5;
	--제목: #fcfbf8;
	--꺼짐: color-mix(in oklab, #fcfbf8 70%, #1c1c1c);
	--선: color-mix(in oklab, #fcfbf8 14%, transparent);

	--반경: 10px;
	--반경-작: 6px;

	--글꼴: Pretendard, "Apple SD Gothic Neo", system-ui, -apple-system, "Noto Sans KR", sans-serif;
	--글꼴-숫자: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	--자-작: 16px;
	--자-본문: 18px;
	--자-h3: 21px;
	--자-h2: clamp(26px, 4.4vw, 42px);
	--자-h1: clamp(32px, 7vw, 68px);
	--자-숫자: clamp(38px, 9vw, 84px);

	--칸: clamp(20px, 5vw, 40px);
	--절-여백: clamp(72px, 12vw, 152px);
	--폭: 1120px;

	--전이: 240ms;
	--전이-느림: 420ms;

	/* 상태색 — 대시보드 전용. 랜딩은 무채가 좌표다 */
	--상태-성공: oklch(0.78 0.15 150);
	--상태-주의: oklch(0.82 0.14 85);
	--상태-오류: oklch(0.72 0.17 25);
	--상태-정보: oklch(0.78 0.11 250);

	/* 부호를 뒤집는 절(밝은 판) */
	--뒤집-바탕: #f4f1ec;
	--뒤집-글: #2a2724;
	--뒤집-제목: #17150f;

	color-scheme: dark;
}

/* 색 구간 — 정거장을 «바닥에서 px 로» 앵커한다. % 로 두면 화면이 짧아질 때
 * 밝은 띠가 글 밑까지 올라와 대비가 경계 밑으로 떨어진다(실측 4.09:1) */
.색구간-바탕 {
	background-image: linear-gradient(
		to top,
		oklch(0.72 0.17 55) 0,
		oklch(0.56 0.155 12) 150px,
		oklch(0.34 0.085 300) 330px,
		oklch(0.24 0.045 292) 470px,
		var(--바탕) 640px
	);
}

/* 경계 — 밀도 축과 무관하게 고정된다 */
.단추,
button,
[role="button"] {
	min-block-size: 44px;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--바탕);
	color: var(--글);
	font-family: var(--글꼴);
	font-size: var(--자-본문);
	line-height: 1.65;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.속 { max-width: 760px; margin-inline: auto; padding-inline: var(--칸); }
h1, h2, h3 { color: var(--제목); line-height: 1.3; margin: 0; font-weight: 700; }
h1 { font-size: var(--자-h2); }
h2 { font-size: var(--자-h3); }
h3 { font-size: var(--자-본문); font-weight: 600; }
p { margin: 0; }
a { color: var(--제목); }
.작 { font-size: var(--자-작); color: var(--꺼짐); }

/* ── 머리 ── */
.머리 { padding-block: clamp(40px, 8vw, 72px) 0; }
.머리 .부제 { margin-block-start: 6px; }
.머리 .길잡이 {
	margin-block-start: 20px;
	padding: 16px 18px;
	border: 1px solid var(--선);
	border-radius: var(--반경);
	background: var(--면);
}
.머리 .길잡이 p + p { margin-block-start: 8px; }

/* ── 칸 ──
 * 테두리는 «비문자 대비» 3:1 을 넘어야 칸이 칸으로 보인다(WCAG 1.4.11).
 * --선(흰색 14%)은 #1c1c1c 위에서 1.55:1 이라 못 넘는다 — 그래서 칸에만 따로 둔다.
 * 값을 새로 만들지 않고 --제목 을 섞어서 만든다(pallim-design 규칙 ②). */
textarea {
	width: 100%;
	min-block-size: 44px;
	padding: 11px 14px;
	border: 1px solid color-mix(in oklab, var(--제목) 42%, transparent);
	border-radius: var(--반경-작);
	background: var(--면);
	color: var(--제목);
	font: inherit;
	transition: border-color var(--전이);
	resize: vertical;
}
/* 예시 답 — 칸 안에 흐리게 선다. 적기 시작하면 사라지므로 «묻는말을 여기 넣지 않는다».
 * 파이어폭스는 placeholder 에 기본 opacity 0.54 를 먹여 대비를 무너뜨린다 — 1 로 되돌린다. */
textarea::placeholder { color: var(--꺼짐); opacity: 1; }

/* 스스로 늘어나는 것은 JS 가 떴을 때뿐이다. 안 떴는데 넘침을 감추면 적은 글이 «안 보인다» */
.설문폼.js textarea { overflow: hidden; }
textarea:focus { outline: none; border-color: var(--제목); }
:focus-visible { outline: 2px solid var(--제목); outline-offset: 3px; border-radius: var(--반경-작); }

/* ── 절 · 문항 ── */
.절 { margin-block-start: clamp(36px, 6vw, 56px); }
.절머리 { display: flex; align-items: baseline; gap: 10px; padding-block-end: 10px; border-block-end: 1px solid var(--선); }
.절머리 .차례 { font-family: var(--글꼴-숫자); font-size: var(--자-작); color: var(--꺼짐); }
.문항 { padding-block: 22px; border-block-end: 1px solid var(--선); display: grid; gap: 10px; }
.문항:last-child { border-block-end: 0; }
.문항 .도움말, .문항 .덧붙임 { font-size: var(--자-작); color: var(--꺼짐); }
.덧링크 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 4px; }
/* 종이에서는 눌러지지 않으므로 주소를 «함께» 찍는다. 화면에서는 단추가 곧 주소다 */
.덧링크 .주소 { display: none; color: var(--꺼짐); word-break: break-all; }
.문항 .덧붙임 { margin-block-start: 2px; }

/* ── 보기 단추 — 정형화된 답을 눌러 칸에 넣는다(대표 지시 2026-09-11) ──
 * 스크립트가 떴을 때만 «보인다». 눌러도 아무 일이 없는 단추를 화면에 두지 않는다.
 * 테두리는 칸과 «같은» 비문자 대비 3:1 짜리를 쓴다(WCAG 1.4.11) — 새 값을 만들지 않았다.
 * 높이 44px 은 토큰.css 의 button 규칙이 이미 건다(좌표 B1-터치) — 여기 다시 적지 않는다.
 * 켜짐을 «색으로만» 가르지 않는다(WCAG 1.4.1): 눈금이 함께 선다. */
.보기목록 { display: none; flex-wrap: wrap; gap: 8px; }
.설문폼.js .보기목록 { display: flex; }
.보기 {
	padding: 8px 14px;
	border: 1px solid color-mix(in oklab, var(--제목) 42%, transparent);
	border-radius: var(--반경-작);
	background: transparent;
	color: var(--제목);
	font: inherit;
	font-size: var(--자-작);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: border-color var(--전이), background-color var(--전이);
}
.보기:hover { border-color: var(--제목); background: var(--면); }
.보기[aria-pressed="true"] { border-color: var(--제목); background: var(--면-진); }
.보기[aria-pressed="true"]::before { content: "✓"; font-family: var(--글꼴-숫자); }

/* ── 동의 · 손잡이 ── */
.동의 {
	margin-block-start: 32px;
	padding: 18px;
	border: 1px solid var(--선);
	border-radius: var(--반경);
	background: var(--면);
	display: grid;
	gap: 10px;
}
/* 누를 수 있는 넓이가 44px 을 넘어야 한다(좌표 B1-터치). 체크칸 자체는 20px 이라
 * «label 전체»를 누를 수 있게 하고 그 높이를 44px 로 잡는다 */
.동의 label { display: flex; gap: 10px; align-items: flex-start; min-block-size: 44px; padding-block: 8px; color: var(--제목); cursor: pointer; }
.동의 input[type="checkbox"] { inline-size: 22px; block-size: 22px; margin-block-start: 2px; flex: 0 0 auto; accent-color: var(--제목); }
.손잡이 { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 28px clamp(56px, 10vw, 96px); }
.단추 {
	min-block-size: 44px;
	padding: 11px 20px;
	border-radius: var(--반경-작);
	border: 1px solid var(--선);
	background: transparent;
	color: var(--제목);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--전이), background-color var(--전이);
}
.단추:hover:not(:disabled) { border-color: var(--제목); background: var(--면); }
.단추.주 { background: var(--제목); color: var(--바탕); border-color: var(--제목); }
.단추.주:hover:not(:disabled) { background: var(--면-진); color: var(--제목); }
.단추:disabled { opacity: 0.5; cursor: progress; }

/* ── 알림 ── */
.알림 { margin-block-start: 16px; padding: 14px 16px; border-radius: var(--반경-작); border: 1px solid var(--선); background: var(--면); }
.알림.오류 { border-color: var(--상태-오류); color: var(--상태-오류); }
.알림.성공 { border-color: var(--상태-성공); color: var(--상태-성공); }
.알림[hidden] { display: none; }
.자백 { border-color: var(--상태-주의); color: var(--상태-주의); }

/* ── 관리자 ── */
.표 { inline-size: 100%; border-collapse: collapse; margin-block-start: 20px; }
.표 th, .표 td { text-align: start; padding: 12px 10px; border-block-end: 1px solid var(--선); vertical-align: top; }
.표 th { color: var(--꺼짐); font-size: var(--자-작); font-weight: 600; }
.표 td a { color: var(--제목); font-weight: 600; }
.때 { font-family: var(--글꼴-숫자); font-size: var(--자-작); color: var(--꺼짐); white-space: nowrap; }
.빈목록 { margin-block-start: 24px; padding: 24px; border: 1px dashed var(--선); border-radius: var(--반경); text-align: center; color: var(--꺼짐); }

/* ── 답(읽기 전용 · 관리자) ── */
.답 { color: var(--제목); white-space: pre-wrap; }
/* 종이 전용 거울 칸 — 화면에서는 없는 셈이다 */
.종이답 { display: none; }
.답.빔 { color: var(--꺼짐); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


@page { margin: 14mm 12mm; }
@media print {
	
body {
	--바탕: var(--뒤집-바탕);
	--면: var(--뒤집-바탕);
	--면-진: var(--뒤집-바탕);
	--글: var(--뒤집-글);
	--제목: var(--뒤집-제목);
	--꺼짐: color-mix(in oklab, var(--뒤집-글) 72%, var(--뒤집-바탕));
	--선: color-mix(in oklab, var(--뒤집-글) 30%, transparent);
	color-scheme: light;
	background: var(--뒤집-바탕);
	color: var(--뒤집-글);
}
body .머리 { padding-block-start: 0; }
body .절 { margin-block-start: 16pt; }
body .절머리 { break-after: avoid; }
body .문항 { padding-block: 9pt; gap: 5pt; break-inside: avoid; border-block-end: 0; }
body .머리칸 { gap: 8pt; }
body textarea, body .답 {
	border: 0;
	border-block-end: 1px solid var(--선);
	border-radius: 0;
	background: transparent;
	color: var(--뒤집-제목);
	padding: 2pt 0;
	min-block-size: 0;
}
/* 칸 대신 «거울 칸»을 찍는다. 화면용으로 잰 칸 높이가 종이에 따라오면 빈 상자가 한 뼘씩 생기고
 * 리사이즈 손잡이까지 인쇄된다(2026-09-11 실측). 거울 칸은 글 길이만큼만 차지한다.
 * JS 가 돌았을 때(.js)만 바꾼다 — 스크립트 없이 적은 글을 «빈 줄»로 찍어 버리지 않기 위해서다. */
body .설문폼.js textarea { display: none; }
body .설문폼.js .종이답 { display: block; }
body .종이답 {
	white-space: pre-wrap;
	border-block-end: 1px solid var(--선);
	min-block-size: 2.4em;
	padding: 2pt 0;
	color: var(--뒤집-제목);
}
body .덧링크 .단추 { display: none; }
body .덧링크 .주소 { display: inline; }
body .동의 { border: 1px solid var(--선); background: transparent; padding: 8pt; margin-block-start: 14pt; break-inside: avoid; }
body .표 th, body .표 td { padding: 5pt 4pt; }

	/* 숨김은 «인쇄에서만». body.종이 에 걸면 관리자 화면의 인쇄 단추까지 화면에서 사라진다.
	 * 고객 화면의 보기 단추(.보기목록)도 이 규칙이 지운다 — 고른 답은 칸에 «글»로 들어가 있다. */
	.인쇄안함, .손잡이, .알림, .길잡이 { display: none !important; }
	body { background: #fff; font-size: 11pt; line-height: 1.5; }
	.속 { max-width: none; padding-inline: 0; }
	h1 { font-size: 17pt; }
	h2 { font-size: 13pt; }
	h3 { font-size: 11pt; }
}

body.종이 {
	--바탕: var(--뒤집-바탕);
	--면: var(--뒤집-바탕);
	--면-진: var(--뒤집-바탕);
	--글: var(--뒤집-글);
	--제목: var(--뒤집-제목);
	--꺼짐: color-mix(in oklab, var(--뒤집-글) 72%, var(--뒤집-바탕));
	--선: color-mix(in oklab, var(--뒤집-글) 30%, transparent);
	color-scheme: light;
	background: var(--뒤집-바탕);
	color: var(--뒤집-글);
}
body.종이 .머리 { padding-block-start: 0; }
body.종이 .절 { margin-block-start: 16pt; }
body.종이 .절머리 { break-after: avoid; }
body.종이 .문항 { padding-block: 9pt; gap: 5pt; break-inside: avoid; border-block-end: 0; }
body.종이 .머리칸 { gap: 8pt; }
body.종이 textarea, body.종이 .답 {
	border: 0;
	border-block-end: 1px solid var(--선);
	border-radius: 0;
	background: transparent;
	color: var(--뒤집-제목);
	padding: 2pt 0;
	min-block-size: 0;
}
/* 칸 대신 «거울 칸»을 찍는다. 화면용으로 잰 칸 높이가 종이에 따라오면 빈 상자가 한 뼘씩 생기고
 * 리사이즈 손잡이까지 인쇄된다(2026-09-11 실측). 거울 칸은 글 길이만큼만 차지한다.
 * JS 가 돌았을 때(.js)만 바꾼다 — 스크립트 없이 적은 글을 «빈 줄»로 찍어 버리지 않기 위해서다. */
body.종이 .설문폼.js textarea { display: none; }
body.종이 .설문폼.js .종이답 { display: block; }
body.종이 .종이답 {
	white-space: pre-wrap;
	border-block-end: 1px solid var(--선);
	min-block-size: 2.4em;
	padding: 2pt 0;
	color: var(--뒤집-제목);
}
body.종이 .덧링크 .단추 { display: none; }
body.종이 .덧링크 .주소 { display: inline; }
body.종이 .동의 { border: 1px solid var(--선); background: transparent; padding: 8pt; margin-block-start: 14pt; break-inside: avoid; }
body.종이 .표 th, body.종이 .표 td { padding: 5pt 4pt; }

body.종이 { padding-block: clamp(24px, 5vw, 48px); }