/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./components/policy-modal.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   약관·개인정보 전문 모달 — pm- 프리픽스로 격리.
   가입(/join-account)과 계정 완료(/verify-phone)가 함께 쓴다.
   ============================================================ */

.pm-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.pm-panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(76dvh, 640px);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-overlay);
  outline: none;
}

/* --- 머리 ------------------------------------------------- */

.pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 20px 20px 16px 26px;
  border-bottom: 1px solid var(--border-soft);
}

.pm-title {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pm-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.pm-close:hover {
  background: var(--hover);
  color: var(--text);
}

.pm-close:focus-visible {
  outline: 2px solid var(--green-strong);
  outline-offset: 1px;
}

/* --- 본문 ------------------------------------------------- */

/* 흰 면 위에 글만 둔다. 회색 상자를 한 겹 더 두면 카드 안에 카드가 생겨
   글이 갇혀 보인다. 아래 페이드로 "더 있다"만 알린다. */
.pm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 26px 28px;
  font-size: var(--fs-13-5);
  line-height: 1.72;
  color: var(--text-soft);
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.pm-body > *:first-child {
  margin-top: 0;
}

.pm-body h3 {
  margin: 22px 0 8px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pm-body p {
  margin: 0 0 10px;
}

.pm-body ol,
.pm-body ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.pm-body li {
  margin-bottom: 5px;
}

/* --- 발 --------------------------------------------------- */

.pm-foot {
  flex: 0 0 auto;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--border-soft);
}

.pm-foot .au-submit {
  margin-top: 0;
}

@media (max-width: 480px) {
  .pm-scrim {
    padding: 16px;
  }
  .pm-head {
    padding: 16px 14px 14px 20px;
  }
  .pm-body {
    padding: 16px 20px 24px;
  }
  .pm-foot {
    padding: 14px 20px 18px;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./components/status-toast.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* 하단 상태 토스트 — 새로고침 완료/실패.
   Groa 셸: 네이비 면 + 브랜드 그린 마크 + radius-sm */

.st-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 120;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.st-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  box-shadow: var(--shadow-overlay);
  animation: st-in 0.18s ease-out;
}
.st-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-soft) 22%, transparent);
  color: var(--green-soft);
}
.st-toast.is-err .st-mark {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: color-mix(in srgb, var(--danger) 70%, #fff);
}
.st-copy {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.st-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tooltip-fg);
}
.st-detail {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
@keyframes st-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-toast {
    animation: none;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/auth-forms.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   Auth forms — 로그인 / 회원가입 / 비밀번호 재설정 / 계정 완료 공용 폼 시스템
   au- 프리픽스로 격리한다.

   기하 구조(중앙 카드 · 한 줄 입력면 · 입력면에 붙는 인증 버튼 · 같은 높이의
   채운 CTA)는 v2r 시안에서 가져왔고, 색·서체·라운드는 전부 앱 토큰이다 —
   시안은 레이아웃 소스이지 팔레트 소스가 아니다.

   위계 규칙: **초록은 CTA 하나뿐**이다. 보조 링크는 회색으로 내려서 주 동작과
   경쟁시키지 않는다. 그리고 **비활성은 옅은 초록이 아니라 중립 회색**이다 —
   브랜드색을 물 타면 "고장 난 버튼"으로 읽힌다.
   ============================================================ */

/* ── 셸: 가운데 카드 하나 ─────────────────────────────────── */

.au-wrap {
  min-height: 100dvh;
  display: grid;
  /* auto 트랙은 카드의 min-content 로 부풀어 좁은 뷰포트에서 가로로 넘친다. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* 좌우 24px 는 login-layout.spec 이 320/375/390 에서 지키는 값이다. 줄이지 말 것. */
  padding: 40px 24px;
  position: relative;
  background:
    radial-gradient(
      900px 460px at 50% -8%,
      color-mix(in srgb, var(--green) 10%, transparent),
      transparent 68%
    ),
    var(--band);
}

/* 큰 그라데이션은 8bit 화면에서 띠(밴딩)가 생긴다. 아주 얕은 노이즈를 덮으면
   띠가 흩어진다. 정지 이미지라 프레임을 먹지 않는다. */
.au-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 화면에는 없지만 스크린 리더·테스트에는 있어야 하는 제목·라벨용. */
.au-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.au-card {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-self: center;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(9, 30, 66, 0.04),
    0 18px 44px -14px rgba(9, 30, 66, 0.16);
  padding: 40px 34px 30px;
}

/* 가입은 필드가 많아 카드가 길어진다 — 폭을 조금 더 준다. */
.au-wrap.is-wide .au-card {
  width: min(480px, 100%);
}

/* --- 머리 ------------------------------------------------- */

/* 워드마크만 두고 설명 줄은 붙이지 않는다. 비어 보이는 게 아니라 조용한 것이다. */
.au-brand {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin: 0 0 34px;
  font-size: var(--fs-28);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.au-brand-dot {
  color: var(--green);
}

/* 제목이 필요한 화면(가입·재설정·계정완료)만 쓴다. 로그인은 워드마크로 끝. */
.au-title {
  margin: 0 0 6px;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--ink);
}

.au-brand + .au-title {
  /* 워드마크 아래 제목이 오면 워드마크 여백을 줄여 한 덩어리로 읽히게 한다. */
  margin-top: -18px;
}

.au-lead {
  margin: 0 0 26px;
  font-size: var(--fs-13-5);
  line-height: 1.6;
  color: var(--text-muted);
}

.au-notice {
  margin: 0 0 22px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--green-strong);
}

/* --- 끝난 단계는 한 줄로 접는다 ---------------------------- */

/* 인증이 끝난 이메일·코드 칸을 그대로 두면 큰 초록 블록이 화면 절반을 먹는다.
   확정된 값 하나만 남기고 되돌아갈 길을 준다. */
.au-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1px solid var(--border-ok);
  border-radius: var(--radius-sm);
  background: var(--surface-ok);
}

.au-done-ico {
  flex: 0 0 auto;
  color: var(--green-strong);
}

.au-done-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13-5);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 폼 --------------------------------------------------- */

.au-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.au-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.au-label {
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
}

.au-input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  box-sizing: border-box;
  /* 테두리를 아예 두지 않는다. 어떤 상태에서도 선 색이 바뀌지 않게 하려면
     선 자체가 없어야 한다 — 상태는 전부 **면**과 **깊이**로만 말한다. */
  border: none;
  border-radius: var(--radius-sm);
  background: var(--chip);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-15);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.au-input::placeholder {
  color: var(--text-faint);
}

/* 포커스 표시 자체는 없앨 수 없다(WCAG 2.4.7 · DESIGN.md 8절). 색 대신 **깊이**로
   말한다 — 눌려 있던 면이 흰색으로 올라오고 그림자가 생긴다. */
.au-input:focus {
  outline: none;
  background: var(--card);
  box-shadow:
    0 2px 4px rgba(9, 30, 66, 0.05),
    0 12px 26px -12px rgba(9, 30, 66, 0.42);
}

/* 그림자를 지우는 고대비·강제색 모드에서는 포커스가 통째로 사라진다.
   그 환경에서만 아웃라인으로 되돌린다. */
@media (forced-colors: active) {
  .au-input:focus {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
}

.au-input:disabled {
  background: var(--card-soft);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 인증이 끝난 칸은 회색으로 죽이지 않고 옅은 초록 면으로 "확정" 을 보여 준다. */
.au-input.is-verified:disabled {
  background: var(--surface-ok);
  color: var(--text);
}

/* 오류도 **면**으로만 말한다. 테두리는 어떤 상태에서도 건드리지 않는다 —
   포커스든 오류든 선 색이 바뀌는 표현은 반려됐다(2026-08-02). */
.au-input.is-invalid {
  background: var(--surface-danger);
}

.au-input.is-invalid:focus {
  background: var(--surface-danger);
  box-shadow:
    0 2px 4px rgba(9, 30, 66, 0.05),
    0 12px 26px -12px rgba(9, 30, 66, 0.42);
}

/* --- 입력면 + 옆 버튼 한 줄 ------------------------------- */

.au-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.au-row > .au-input,
.au-row > .au-code-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.au-side-btn {
  flex: 0 0 auto;
  /* 문구가 "인증번호 요청" ↔ "58초" 로 오가도 입력면 폭이 흔들리지 않게 고정한다. */
  width: 104px;
  height: 54px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--green-action);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.au-side-btn:hover:not(:disabled) {
  background: var(--green-action-hover);
}

.au-side-btn:disabled {
  background: var(--chip);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* 인증이 끝난 버튼은 꺼진 게 아니라 완료다 — 회색이 아니라 옅은 초록 면. */
.au-side-btn.is-done:disabled {
  background: var(--surface-ok);
  color: var(--green-strong);
}

/* --- 인증번호 칸(남은 시간 배지 포함) --------------------- */

.au-code-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.au-code-wrap .au-input {
  padding-right: 66px;
}

.au-timer {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semibold);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--danger);
  pointer-events: none;
}

/* --- 비밀번호 표시 토글 ----------------------------------- */

.au-pw-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.au-pw-wrap .au-input {
  padding-right: 50px;
}

.au-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.au-pw-toggle:hover {
  color: var(--text);
  background: var(--hover);
}

.au-pw-toggle:focus-visible {
  outline: 2px solid var(--green-strong);
  outline-offset: 1px;
}

/* --- 상태 문구 -------------------------------------------- */

.au-hint,
.au-error,
.au-ok {
  margin: 0;
  font-size: var(--fs-12-5);
  line-height: 1.5;
}

.au-hint {
  color: var(--text-muted);
}

.au-error {
  color: var(--danger);
  font-weight: var(--fw-medium);
}

.au-ok {
  color: var(--ok);
  font-weight: var(--fw-semibold);
}

/* 만료 안내처럼 "오류는 아니지만 알려야 하는" 줄. 붉은색을 쓰지 않는다. */
.au-notice-row {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: var(--radius-xs);
  background: var(--chip);
  font-size: var(--fs-12-5);
  line-height: 1.6;
  color: var(--text-soft);
}

.au-notice-row .au-link {
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- CTA -------------------------------------------------- */

.au-submit {
  width: 100%;
  height: 54px;
  /* 진행 중에는 문구 오른쪽에 도는 표시가 붙는다 — 둘을 함께 가운데 정렬한다. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--green-action);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(0, 111, 70, 0.55);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.au-submit:hover:not(:disabled) {
  background: var(--green-action-hover);
}

.au-submit:disabled {
  background: var(--chip);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}

/* 처리 중은 "못 누른다" 가 아니라 "일하는 중" 이다. 회색으로 죽이면 눌러도
   반응이 없는 버튼처럼 보인다 — 브랜드색을 그대로 두고 살짝만 눌러 준다. */
.au-submit.is-busy:disabled {
  background: color-mix(in srgb, var(--green-action) 88%, #000);
  color: #fff;
  box-shadow: 0 4px 12px -6px rgba(0, 111, 70, 0.5);
  cursor: progress;
}

/* 로딩 표시는 장식이 아니라 상태 전달이라 저모션 환경에서도 없애지 않는다.
   대신 눈에 덜 튀도록 천천히 돌린다. */
.au-spin {
  flex: 0 0 auto;
  animation: au-spin 0.8s linear infinite;
}

@keyframes au-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-spin {
    animation-duration: 2.4s;
  }
}

/* --- 보조 링크 줄 ----------------------------------------- */

/* 초록은 CTA 하나뿐이다. 여기는 회색으로 내린다. */
.au-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  font-size: var(--fs-13-5);
}

.au-sep {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--text-faint);
  flex: 0 0 auto;
}

.au-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--fs-13-5);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.au-link:hover {
  color: var(--green-strong);
}

.au-link:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}

.au-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--green-strong);
  outline-offset: 3px;
}

/* --- 좁은 화면 -------------------------------------------- */

@media (max-width: 480px) {
  .au-wrap {
    padding: 24px;
  }
  .au-card {
    padding: 30px 22px 24px;
  }
  /* 옆 버튼이 폭을 다 먹으면 입력면이 두세 글자만 남는다. 조금 줄인다. */
  .au-side-btn {
    width: 92px;
    font-size: var(--fs-12-5);
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/join-account/join-account.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   회원가입 — 가입 화면에만 있는 것들.

   입력면·인증 버튼·CTA 같은 폼 기본형은 auth-forms.css 의 au- 시스템이
   로그인·재설정·계정완료와 공유한다. 약관 모달은 components/policy-modal.tsx
   (pm- 프리픽스)가 가져갔다. 여기에는 **동의 목록**만 남는다.
   ============================================================ */

/* 코드 입력 줄은 위 입력면에 딸린 하위 단계다 — 붙여서 한 덩어리로 읽히게 한다. */
.join-auth-block {
  margin-top: 10px;
}

/* --- 약관 — 카드 표면 없이 체크 목록만 --------------------- */

.join-agree {
  margin: 22px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.join-agree-line {
  height: 1px;
  background: var(--border-soft);
  margin: 2px 0 4px;
}

.join-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}

.join-check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--green);
}

/* 약관 링크는 문장 안에 섞여 있어 밑줄이 있어야 눌리는 줄 안다. */
.join-check .au-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.join-submit {
  margin-top: 4px;
}