/* ==========================================================================
   Starting Point 3.0 — Brand Tokens
   브랜드 가이드 v3.0 (2026) 기준. 컬러/타이포/모티프의 단일 정의 지점.
   브랜드가 바뀌면 이 파일만 수정한다.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  /* --- 컬러 시스템 (가이드 p.5) ------------------------------------------ */
  --sp-black:     #111111;  /* 주연 */
  --sp-paper:     #f7f6f3;  /* 주연 · 바탕 */
  --sp-orange:    #e14e00;  /* 신호 · 방향 */
  --sp-green:     #256825;  /* 신호 · 검증 */
  --sp-gray:      #e0e0e0;  /* 보조 */
  --sp-charcoal:  #3a3a3a;  /* 다크 보조 */

  /* 파생 — 위 6색에서만 유도한다 */
  /* 화살촉 모양 — .sp-arrow::after 가 mask 로 쓴다. 색은 currentColor 가 정한다 */
  --sp-arrowhead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 482'%3E%3Cpath d='M24.7 25L240.7 241L24.7 457' fill='none' stroke='%23000' stroke-width='70' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10'/%3E%3C/svg%3E");

  --sp-white:     #ffffff;
  --sp-line:      #d9d6cf;  /* 입력창·버튼 등 '조작 가능'을 알리는 선 */
  --sp-rule:      #e7e5df;  /* 항목을 나누는 헤어라인. 존재를 눈치채지 못할 만큼 옅게 */
  --sp-line-dark: #2a2a2a;  /* black 위 경계선 */
  --sp-muted:     #6b6862;  /* 본문 보조 텍스트 (paper 위 5.14:1, AA) */
  --sp-muted-dk:  #9a9691;  /* black 위 보조 텍스트 (6.43:1, AA) */

  /* 오렌지 2단계 운용 — 브랜드 색을 유지하면서 WCAG AA를 만족시키기 위함.
     #e14e00 은 흰 배경에서 3.97:1 이라 작은 텍스트에 쓰면 AA에 미달한다.
       · --sp-orange       : 시그니처. 큰 타이포·화살촉 모티프·버튼 배경·면적.
       · --sp-orange-deep  : 밝은 배경 위 작은 텍스트/링크 (흰 배경 5.6:1, AA). hover 겸용. */
  --sp-orange-deep: #b83f00;

  /* --- 타이포그래피 (가이드 p.6) ----------------------------------------- */
  /* Gustavo/카르멘은 유료 상용 서체 → 라이브 사이트와 동일한 무료 조합 사용 */
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Montserrat', var(--font-body);

  /* 본문 16–22px, 행간 1.7 / 헤드라인 행간 1.2, 자간 -2% */
  --lh-head: 1.16;
  --lh-body: 1.7;
  --ls-head: -0.02em;
  --ls-label: 0.18em;

  /* --- 간격 ------------------------------------------------------------- */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-2xl: 64px;
  --gap-3xl: 104px;

  /* 레퍼런스(Neo)와 동일하게 전 섹션이 하나의 좁은 중앙 컬럼을 공유한다.
     헤더·히어로·리스트의 좌측 기준선이 어긋나지 않게 폭을 통일한다. */
  --w-page: 880px;    /* 기본 콘텐츠 폭 */
  --w-list: 880px;    /* 카드 리스트 폭 */
  --w-form: 720px;
  --w-admin: 1240px;  /* 관리자 테이블만 넓게 */

  /* --- 형태: 3.0은 SHARP. 라운드를 쓰지 않는다 -------------------------- */
  --radius: 0;

  /* ========================================================================
     테두리 정책 — 이 규칙을 지키지 않으면 화면이 다시 'AI가 만든 것'처럼 보인다.
     ------------------------------------------------------------------------
     AI 생성 UI의 전형적 시그니처는 "흰 카드 + 얇은 회색 테두리 + 균일한 padding"
     이다. 학습 데이터의 평균이 그 모양이기 때문이다. 평균은 스타일이 아니라
     스타일의 부재다. 그래서 아래를 규칙으로 못박는다.

       ✅ 테두리를 쓰는 곳 — '누를 수 있다 / 입력할 수 있다'는 신호일 때만
          input, select, textarea, .btn, .chip, .tag, .radio-card

       ❌ 테두리를 쓰지 않는 곳 — 순수하게 장식일 때
          콘텐츠를 감싸는 카드 외곽선, 섹션 박스, 헤딩 밑줄,
          흰 배경 박스(--sp-paper 위에 --sp-white 를 깔아 만드는 '카드')

       ➖ 구분이 꼭 필요하면 --sp-rule 헤어라인 1개만. 박스로 감싸지 않는다.

     위계는 테두리가 아니라 여백과 타이포(크기·굵기·색)로 만든다.
     ======================================================================== */

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* display:flex/grid 를 쓰는 컴포넌트가 hidden 속성을 이기지 못하도록 강제한다.
   JS의 el.hidden = true 가 모든 요소에서 동일하게 동작하는 것을 보장한다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sp-paper);
  color: var(--sp-black);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 한글은 어절 단위로만 끊는다.
     이 선언이 없으면 브라우저가 한글을 영어처럼 취급해
     "한 시간만 이야 / 기하면" 처럼 단어 한가운데를 자른다.
     긴 이메일·URL 이 좁은 칸을 뚫고 나가는 것만 anywhere 로 막아 둔다. */
  word-break: keep-all;
  /* anywhere 가 아니라 break-word 를 쓴다.
     anywhere 는 min-content 폭까지 글자 단위로 줄여버려서, 좁은 flex/grid 칸 안의
     버튼 글자가 "저 / 장" 처럼 쪼개진다. break-word 는 한 단어가 자기 줄에도
     안 들어갈 때만 끊으므로 긴 이메일·URL 만 안전하게 처리된다. */
  overflow-wrap: break-word;
}

/* 마지막 줄에 한 단어만 남는 것(고아 줄)을 피한다.
   keep-all 과 함께 쓰면 한국어 본문이 눈에 띄게 정돈된다. */
p, li, dd, .field__hint, .field-note { text-wrap: pretty; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sp-orange);
  outline-offset: 2px;
}

::selection { background: var(--sp-orange); color: var(--sp-white); }

/* ==========================================================================
   타이포 유틸
   ========================================================================== */

/* 영문 디스플레이·라벨 — 대문자 + 레터스페이싱 (가이드 p.6) */
.sp-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sp-muted);
}
.sp-label--orange { color: var(--sp-orange-deep); }
.sp-label--ondark { color: var(--sp-muted-dk); }

/* 한글 헤드라인 — Heavy, 행간 1.2, 자간 -2% */
.sp-display {
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
}
.sp-h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: var(--ls-head);
  margin: 0;
}
.sp-h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0;
}
.sp-body { font-size: 17px; line-height: var(--lh-body); }
.sp-small { font-size: 14px; line-height: 1.6; color: var(--sp-muted); }

/* 오렌지는 '행동'과 '강조 1점'에만 (가이드 p.9 규칙 4) */
.sp-dot { color: var(--sp-orange); }

/* ==========================================================================
   그래픽 모티프 — 점 → 각진 화살촉 (가이드 p.7)
   3.0의 유일한 그래픽 모티프. 구분선·진행·리스트·사인에 이것만 쓴다.
   ========================================================================== */

/* 지급받은 원본(csprint/csprint_로고.png, 2097×750)을 픽셀 단위로 계측해 옮겼다.
   원본 비율 — 점 지름 300 : 막대 두께 65 : 화살촉 스트로크 70, 화살촉 높이 484.
   즉 점 : 화살촉높이 = 0.62, 막대 : 화살촉높이 = 0.134.

   화살촉은 CSS 테두리로는 재현이 안 된다. 원본의 화살촉은 끝이 45° 마이터로
   뾰족하게 모이는데, border 로 만든 꺽쇠는 두 변이 직각으로 잘려 뭉툭하다.
   그래서 화살촉만 SVG 를 mask 로 씌우고 배경을 currentColor 로 채운다.
   덕분에 --sp-arrow--orange 같은 기존 색 규칙이 그대로 동작한다.

   SVG 좌표는 원본 계측값을 그대로 옮긴 것:
     꺽쇠 중심선 (24.7,25) → (240.7,241) → (24.7,457), stroke 70, butt cap, miter join
     → 바운딩 290×482 (원본 실측 290×482 와 일치) */
.sp-arrow {
  display: flex;
  align-items: center;
  gap: 0;
  height: 18px;
}
.sp-arrow::before {                 /* 점 (시작) — 18 × 0.62 */
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.sp-arrow > i {                     /* 선 — 18 × 0.134 = 2.4 */
  display: block;
  /* 2px 로 두면 원본(막대:화살촉높이 = 0.134)보다 눈에 띄게 얇고,
     3px 은 25% 두껍다. 2.5px 이 비율상 가장 가깝다(0.139). */
  height: 2.5px;
  width: var(--arrow-len, 150px);
  background: currentColor;
  flex: none;
}
.sp-arrow::after {                  /* 각진 화살촉 — 높이 18, 폭 18 × (290/482) */
  content: '';
  width: 11px; height: 18px;
  /* 꺽쇠를 막대 위로 9px 끌어당긴다. 원본은 막대가 꺽쇠의 꼭짓점까지 이어져
     가운데가 메워져 있는데, 그냥 이어 붙이면 꺽쇠의 V자 홈이 비어 보인다.
     꺽쇠 박스(11px) 안에서 꼭짓점은 왼쪽 끝에서 240.7/290 = 83% 지점, 즉 9.1px.
     그만큼 겹쳐야 막대 끝이 꼭짓점에 정확히 닿는다. */
  margin-left: -9px;
  background: currentColor;
  -webkit-mask: var(--sp-arrowhead) no-repeat center / contain;
  mask: var(--sp-arrowhead) no-repeat center / contain;
  flex: none;
}
.sp-arrow--orange { color: var(--sp-orange); }
.sp-arrow--sm { --arrow-len: 64px; }

/* 인라인 꺽쇠 — 링크·CTA 뒤에 붙는 › */
.sp-chev {
  display: inline-block;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 9px;
  vertical-align: 1px;
  transition: transform .2s var(--ease);
}

/* ==========================================================================
   버튼 — 오렌지는 행동에만
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 13px 26px;
  /* 19px/700 은 WCAG 기준 '큰 텍스트'(14pt bold)에 해당한다.
     덕분에 브랜드 오렌지(#e14e00) 위 흰 글자 3.97:1 이 AA를 만족한다. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  text-align: center;
  white-space: nowrap;   /* 버튼 라벨은 어떤 폭에서도 줄바꿈하지 않는다 */
}
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn--primary { background: var(--sp-orange); color: var(--sp-white); }
.btn--primary:hover:not(:disabled) { background: var(--sp-orange-deep); }
.btn--primary:hover:not(:disabled) .sp-chev { transform: rotate(45deg) translate(2px, -2px); }

.btn--ghost { background: transparent; color: var(--sp-black); border-color: var(--sp-black); }
.btn--ghost:hover:not(:disabled) { background: var(--sp-black); color: var(--sp-paper); }

.btn--dark { background: var(--sp-black); color: var(--sp-paper); }
.btn--dark:hover:not(:disabled) { background: var(--sp-charcoal); }

/* 작은 버튼은 '큰 텍스트'가 아니므로 배경을 진한 오렌지로 낮춰 5.6:1 을 확보한다 */
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--sm.btn--primary { background: var(--sp-orange-deep); }
.btn--sm.btn--primary:hover:not(:disabled) { background: #9c3500; }
.btn--block { width: 100%; }

/* ==========================================================================
   폼 컨트롤 — 인라인 검증 상태 포함
   ========================================================================== */

.field { margin-bottom: var(--gap-lg); }
.field__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.field__req { color: var(--sp-orange-deep); margin-left: 3px; }
.field__hint { font-size: 13px; color: var(--sp-muted); margin: 6px 0 0; line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sp-black);
  background: var(--sp-white);
  border: 1px solid var(--sp-line);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #767269; }
.input:hover, .select:hover, .textarea:hover { border-color: #c9c5be; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--sp-black); outline-offset: 1px; }
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* 검증 상태 */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--sp-orange); }
.field.is-valid .input,
.field.is-valid .select { border-color: var(--sp-green); }

.field__error {
  display: none;
  font-size: 13px;
  color: var(--sp-orange-deep);
  margin: 6px 0 0;
  font-weight: 600;
}
.field.is-invalid .field__error { display: block; }

/* 라디오 카드 */
.radio-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.radio-card {
  position: relative;
  border: 1px solid var(--sp-line);
  background: var(--sp-white);
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:hover { border-color: var(--sp-black); }
.radio-card:has(input:checked) { background: var(--sp-black); color: var(--sp-paper); border-color: var(--sp-black); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

/* ==========================================================================
   공통 레이아웃
   ========================================================================== */

.wrap { width: 100%; max-width: calc(var(--w-page) + 48px); margin: 0 auto; padding: 0 24px; }
.wrap--list { max-width: calc(var(--w-list) + 48px); }
.wrap--form { max-width: calc(var(--w-form) + 48px); }
.wrap--admin { max-width: calc(var(--w-admin) + 48px); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 헤더 */
.site-header {
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-paper);
  position: sticky; top: 0; z-index: 50;
}
.site-header__in {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex: none; }
.brand__mark {
  font-family: var(--font-display);
  font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sp-orange-deep);
  white-space: nowrap;
}
.site-header__nav { display: flex; align-items: center; gap: var(--gap-lg); }
.site-header__nav a { font-size: 14px; font-weight: 600; color: var(--sp-muted); white-space: nowrap; }
.site-header__nav a:hover { color: var(--sp-black); }

/* 로그인 상태에 따라 header.js 가 채운다. 비어 있는 동안 자리를 차지하지 않게
   두어, 로그인하지 않은 대다수 방문자에게 레이아웃 흔들림이 없다. */
.site-header__auth { display: flex; align-items: center; gap: var(--gap-md); }
.site-header__auth:empty { display: none; }

/* 어드민 진입은 권한이 있는 사람에게만 보이므로 눈에 띄게 둔다.
   본문의 주황(대비 5.6:1)을 써서 작은 글씨에서도 AA 를 만족한다. */
.nav-admin {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--sp-orange-deep);
  color: var(--sp-orange-deep);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
/* ⚠️ .site-header__nav a (0,2,0) 가 .nav-admin (0,1,0) 을 이겨서, 여기 적은
   color 가 무시되고 회색 글자에 주황 테두리만 남는다. hover 만 고쳐 두고
   기본 상태를 빠뜨렸던 버그다. 기본 상태도 같은 특이도로 못박는다. */
.site-header__nav a.nav-admin { color: var(--sp-orange-deep); }
.nav-admin:hover { background: var(--sp-orange-deep); color: #fff; }
.site-header__nav a.nav-admin:hover { color: #fff; }

/* 푸터 */
.site-footer {
  border-top: 1px solid var(--sp-line);
  margin-top: var(--gap-3xl);
  padding: var(--gap-xl) 0 var(--gap-2xl);
}
.site-footer__in { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-lg); flex-wrap: wrap; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }

  /* 로고와 서브라벨을 세로로 쌓아 헤더 폭을 줄인다 */
  .site-header__in { height: 58px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .brand__mark { font-size: 15px; line-height: 1.2; }
  .brand__sub { font-size: 9px; line-height: 1.3; }
  .site-header__nav { gap: var(--gap-md); }
  .site-header__nav a { font-size: 13px; }
  .site-header__nav a.nav--optional { display: none; }
}