/* 공통 — Crest 디자인 시스템 위의 salesus 층 (토큰: crest/tokens.css, 컴포넌트: crest/components.css)
   값은 토큰으로만 쓴다. 손으로 만든 마크업(입력 칸·체크 상자·라디오·배지·오류 문구)도 Crest 컴포넌트 규격 그대로 보이게 한다 */
:root {
  /* 예전 이름 → Crest 시맨틱 (점점 걷어 낸다) */
  --navy: var(--primary-normal);
  --navy-2: var(--primary-strong);
  --navy-soft: var(--cr-primary-soft);
  --orange: var(--primary-normal);
  --orange-2: var(--primary-strong);
  --orange-soft: var(--cr-primary-soft);
  --cream: var(--background-alternative);
  --paper: var(--background-normal);
  --ink: var(--label-normal);
  --text: var(--label-neutral);
  --muted: var(--label-alternative);
  --line: var(--line-normal-neutral);
  --line-soft: var(--line-normal-alternative);
  --radius: var(--radius-12);
  --shadow: var(--cf-card);
  /* cofounder.ai: 카드는 그림자 없이 안쪽 1px 반투명 선. 그림자는 메뉴·팝오버·떠 있는 것에만 */
  --cf-card: inset 0 0 0 1px var(--line-normal-neutral);
  --shadow-lg: var(--shadow-strong);
  /* cofounder.ai 디자인 시스템 스킬 값으로 덮어쓰기 (crest/tokens.css 는 생성 파일이라 여기서). 색은 두 쪽이 같다 */
  --shadow-emphasize: 0 4px 12px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.08);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
  --radius-full: 1000px;
  --state-light-hover: 0.038;
  --state-strong-hover: 0.075;
  /* Crest 규칙(배지 8% · 칩 5% · 테두리 43%)으로 만든 옅은 색 */
  --cr-primary-soft: color-mix(in srgb, var(--primary-normal) 8%, transparent);
  --cr-negative-soft: color-mix(in srgb, var(--status-negative) 8%, transparent);
  --cr-positive-soft: color-mix(in srgb, var(--status-positive) 10%, transparent);
  --cr-cautionary-soft: color-mix(in srgb, var(--status-cautionary) 10%, transparent);
  --cr-hover: 5%;
  --cr-press: 12%;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--label-normal); background: var(--background-normal);
  font-size: 16px; line-height: 24px; letter-spacing: .0057em; word-break: keep-all; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--label-strong); line-height: 1.35; margin: 0; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }

/* 화면 구조용 이름 — 모양은 cr-btn 이 맡는다 */
.btn { font-family: var(--font-sans); }
a.btn { text-decoration: none; }

/* 배지 — ContentBadge (small 24 · caption-1 medium) */
.tag {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 var(--space-6); border-radius: var(--radius-6);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .0252em; white-space: nowrap;
  color: var(--primary-normal); background: var(--cr-primary-soft);
}
.tag.navy { color: var(--label-alternative); background: var(--fill-normal); }

.dev-badge {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  background: var(--inverse-background); color: var(--inverse-label); padding: 6px 10px; border-radius: var(--radius-8); opacity: .88;
}

/* 입력 칸 — TextField (48 · radius-12 · 안쪽 1px 선 + shadow-xsmall · 포커스 2px primary 43%) */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], input:not([type]), textarea, select {
  font-family: var(--font-sans) !important; font-size: 16px !important; line-height: 24px; letter-spacing: .0057em; color: var(--label-normal);
  min-height: 48px; padding: var(--space-12) var(--space-16) !important; border: 0 !important; border-radius: var(--radius-12) !important;
  background: var(--background-normal) !important; box-shadow: inset 0 0 0 1px var(--line-normal-neutral), var(--shadow-xsmall) !important;
  outline: 0 !important; transition: box-shadow .12s ease; width: 100%;
}
textarea { resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 44px !important; cursor: pointer;
  background: var(--background-normal) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M4.081%208.081C4.588%207.573%205.411%207.573%205.919%208.081L12%2014.162L18.081%208.081C18.588%207.573%2019.411%207.573%2019.919%208.081C20.427%208.588%2020.427%209.412%2019.919%209.919L12.919%2016.919C12.411%2017.427%2011.588%2017.427%2011.081%2016.919L4.081%209.919C3.573%209.412%203.573%208.588%204.081%208.081Z%22/%3E%3C/svg%3E") no-repeat right 16px center / 16px !important; }
input:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-normal) 43%, transparent), var(--shadow-xsmall) !important; }
::placeholder { color: var(--label-assistive); opacity: 1; }
input:disabled, textarea:disabled { background: var(--interaction-disable) !important; color: var(--label-disable); }

/* 체크 상자 · 라디오 — Checkbox(18 · radius-5 · 1.5px line-normal) / Radio(20 · 흰 점 8) */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer; display: inline-grid; place-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-5); box-shadow: inset 0 0 0 1.5px var(--line-normal); background: var(--background-normal);
  transition: background .12s ease, box-shadow .12s ease;
}
input[type=checkbox]:checked { background: var(--primary-normal); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
input[type=checkbox]:checked::after { content: ""; width: 14px; height: 14px; background: var(--static-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M19.67%206.581C20.177%207.089%2020.177%207.912%2019.67%208.419L10.67%2017.419C10.162%2017.927%209.339%2017.927%208.831%2017.419L4.331%2012.919C3.824%2012.412%203.824%2011.589%204.331%2011.081C4.839%2010.573%205.662%2010.573%206.17%2011.081L9.75%2014.662L17.831%206.581C18.339%206.073%2019.162%206.073%2019.67%206.581Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M19.67%206.581C20.177%207.089%2020.177%207.912%2019.67%208.419L10.67%2017.419C10.162%2017.927%209.339%2017.927%208.831%2017.419L4.331%2012.919C3.824%2012.412%203.824%2011.589%204.331%2011.081C4.839%2010.573%205.662%2010.573%206.17%2011.081L9.75%2014.662L17.831%206.581C18.339%206.073%2019.162%206.073%2019.67%206.581Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=radio] { width: 20px; height: 20px; border-radius: var(--radius-full); }
input[type=radio]:checked { background: var(--primary-normal); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
input[type=radio]:checked::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--static-white); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: var(--opacity-43); cursor: not-allowed; }

/* 입력 검사 — TextField negative (forms.js) */
.invalid input:not([type=radio]):not([type=checkbox]), .invalid textarea, .invalid select, input.invalid, textarea.invalid {
  box-shadow: inset 0 0 0 1px var(--status-negative), var(--shadow-xsmall) !important; }
.invalid input:not([type=radio]):not([type=checkbox]):focus, .invalid textarea:focus { box-shadow: inset 0 0 0 2px var(--status-negative), var(--shadow-xsmall) !important; }
fieldset.invalid, .invalid.ap-sec, .invalid.agree, .invalid.q { box-shadow: inset 0 0 0 1px var(--status-negative); border-radius: var(--radius-12); }
.field-msg { color: var(--status-negative); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .0194em; margin: var(--space-8) 0 0; display: flex; gap: var(--space-4); align-items: center; }
.field-msg::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM12%207.1C12.497%207.1%2012.9%207.503%2012.9%208L12.9%2012.5C12.9%2012.997%2012.497%2013.4%2012%2013.4C11.503%2013.4%2011.1%2012.997%2011.1%2012.5L11.1%208C11.1%207.503%2011.503%207.1%2012%207.1ZM13%2016C13%2016.552%2012.552%2017%2012%2017C11.448%2017%2011%2016.552%2011%2016C11%2015.448%2011.448%2015%2012%2015C12.552%2015%2013%2015.448%2013%2016Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM12%207.1C12.497%207.1%2012.9%207.503%2012.9%208L12.9%2012.5C12.9%2012.997%2012.497%2013.4%2012%2013.4C11.503%2013.4%2011.1%2012.997%2011.1%2012.5L11.1%208C11.1%207.503%2011.503%207.1%2012%207.1ZM13%2016C13%2016.552%2012.552%2017%2012%2017C11.448%2017%2011%2016.552%2011%2016C11%2015.448%2011.448%2015%2012%2015C12.552%2015%2013%2015.448%2013%2016Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
[data-form-summary] { display: flex; gap: var(--space-8); align-items: center; background: var(--cr-negative-soft); color: var(--status-negative);
  border-radius: var(--radius-12); padding: var(--space-12) var(--space-16); font-size: 14px; line-height: 20px; font-weight: 600; }
[data-form-summary]::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM12%207.1C12.497%207.1%2012.9%207.503%2012.9%208L12.9%2012.5C12.9%2012.997%2012.497%2013.4%2012%2013.4C11.503%2013.4%2011.1%2012.997%2011.1%2012.5L11.1%208C11.1%207.503%2011.503%207.1%2012%207.1ZM13%2016C13%2016.552%2012.552%2017%2012%2017C11.448%2017%2011%2016.552%2011%2016C11%2015.448%2011.448%2015%2012%2015C12.552%2015%2013%2015.448%2013%2016Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM12%207.1C12.497%207.1%2012.9%207.503%2012.9%208L12.9%2012.5C12.9%2012.997%2012.497%2013.4%2012%2013.4C11.503%2013.4%2011.1%2012.997%2011.1%2012.5L11.1%208C11.1%207.503%2011.503%207.1%2012%207.1ZM13%2016C13%2016.552%2012.552%2017%2012%2017C11.448%2017%2011%2016.552%2011%2016C11%2015.448%2011.448%2015%2012%2015C12.552%2015%2013%2015.448%2013%2016Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
[data-form-summary][hidden] { display: none; }
.spot { animation: spot 2.4s ease-out; border-radius: var(--radius-12); }
@keyframes spot { 0%, 40% { box-shadow: 0 0 0 4px var(--cr-primary-soft), inset 0 0 0 2px color-mix(in srgb, var(--primary-normal) 43%, transparent); } 100% { box-shadow: none; } }

/* 아이콘(_icon) */
.ico-i { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; flex: none; }
/* 성공 표시용 아이콘 마스크 */
:root { --cr-icon-ok: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM16.647%209.876C16.992%209.519%2016.983%208.949%2016.626%208.603C16.269%208.257%2015.699%208.267%2015.353%208.624L10.677%2013.455L8.647%2011.352C8.302%2010.994%207.733%2010.984%207.375%2011.33C7.017%2011.675%207.007%2012.245%207.352%2012.602L10.029%2015.375C10.198%2015.55%2010.432%2015.65%2010.676%2015.65C10.92%2015.65%2011.153%2015.551%2011.323%2015.376L16.647%209.876Z%22/%3E%3C/svg%3E"); --cr-icon-exc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.1%2012C2.1%206.532%206.532%202.1%2012%202.1C17.467%202.1%2021.9%206.532%2021.9%2012C21.9%2017.468%2017.467%2021.9%2012%2021.9C6.532%2021.9%202.1%2017.468%202.1%2012ZM12%207.1C12.497%207.1%2012.9%207.503%2012.9%208L12.9%2012.5C12.9%2012.997%2012.497%2013.4%2012%2013.4C11.503%2013.4%2011.1%2012.997%2011.1%2012.5L11.1%208C11.1%207.503%2011.503%207.1%2012%207.1ZM13%2016C13%2016.552%2012.552%2017%2012%2017C11.448%2017%2011%2016.552%2011%2016C11%2015.448%2011.448%2015%2012%2015C12.552%2015%2013%2015.448%2013%2016Z%22/%3E%3C/svg%3E"); --cr-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M19.67%206.581C20.177%207.089%2020.177%207.912%2019.67%208.419L10.67%2017.419C10.162%2017.927%209.339%2017.927%208.831%2017.419L4.331%2012.919C3.824%2012.412%203.824%2011.589%204.331%2011.081C4.839%2010.573%205.662%2010.573%206.17%2011.081L9.75%2014.662L17.831%206.581C18.339%206.073%2019.162%206.073%2019.67%206.581Z%22/%3E%3C/svg%3E"); }

/* cofounder.ai 워드마크 — 승인안 2c (Sora · 'co-founder' 600 · '.ai' 500 Primary Blue), 글자만 */
.cf-logo { display: inline-flex; align-items: baseline; font-family: "Sora", var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: var(--label-strong); white-space: nowrap; }
.cf-logo > span { font-weight: 500; color: var(--primary-normal); }
.cf-logo.inverse { color: var(--static-white); }
.cf-logo.inverse > span { color: color-mix(in srgb, var(--static-white) 72%, transparent); }