/* unduck — 로그인 / 가입 / 비밀번호 재설정 화면
   공식 4색만 쓴다. 기준값은 /koco-assets/ui/xex-monster/xex-brand.css 의
   확정 토큰(--xex-*)이다. 파랑·보라·초록·파스텔은 이 파일에 넣지 않는다.

   밀도는 와우인벤형 고밀도를 따른다.
   화면 절반을 먹는 히어로, 넓은 빈 공간, 과한 라운드·그림자·블러는 쓰지 않는다.

   이 화면은 단독으로도 뜨고 포털 레이아웃 중앙 칸 안에도 들어간다.
   중앙 칸은 화면 폭과 상관없이 좁아질 수 있어서, 폭 기준을 vw 가 아니라
   컨테이너(%, @container)로 잡는다. 예전에는 패딩을 5vw 로 줬는데 좁은 칸
   안에서도 1920 화면이면 58px 씩 잡아먹어 카드 안쪽이 얼마 안 남았고,
   그 상태에서 레이아웃이 물려준 overflow-wrap: anywhere 때문에 한글 제목이
   "웹 비밀번호로 로그 / 인" 처럼 낱말 중간에서 잘렸다. */

:root {
  --ka-bg: var(--xex-canvas, #FFF9EE);
  --ka-surface: var(--xex-surface, #FFF9EE);
  --ka-soft: #FFF9EE;
  --ka-ink: var(--xex-ink, #146B43);
  --ka-muted: var(--xex-ink-soft, #146B43);
  --ka-border: var(--xex-line, #146B43);
  --ka-border-strong: var(--xex-line-strong, #146B43);

  /* 넓게 칠하는 면(버튼·배지)은 확정 브랜드 적색을 그대로 쓴다.
     탁한 적갈색(#F27A00 → #F27A00 그라데이션)은 브랜드 축이 아니라 뺐다. */
  --ka-primary: var(--xex-red, #F27A00);
  --ka-primary-hover: #FFC928;
  /* 흰 바탕 위 작은 글자에는 같은 적색 축의 어두운 값을 쓴다. #F27A00 는
     흰 바탕에서 대비가 모자라 12px 글자가 읽히지 않는다. */
  --ka-primary-text: #146B43;
  --ka-tint: #FFF9EE;
  --ka-tint-line: #FFC928;
  --ka-radius: var(--xex-radius, 2px);
}

.koco-auth-page,
.koco-auth-page * {
  box-sizing: border-box;
}

.koco-auth-page [hidden] {
  display: none !important;
}

.koco-auth-page {
  /* 안쪽 요소들이 화면 폭이 아니라 이 상자의 폭을 보고 접히게 한다. */
  container-type: inline-size;
  /* 로그인 폼은 끝없이 늘리지 않는다. 한 줄이 1200px 가 되면 라벨과 입력칸이
     너무 멀어져 눈이 짝을 못 찾는다. */
  width: min(1000px, calc(100% - 20px));
  margin: 14px auto 26px;
  color: var(--ka-ink);
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:15px;
  line-height: 1.5;
  /* 한글이 낱글자로 쪼개지지 않게 한다. 레이아웃이 .xex-content 에 걸어 둔
     overflow-wrap: anywhere 를 여기서 끊는다. 긴 영문 한 덩어리만 예외로
     끊어 가로 스크롤을 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 포털 레이아웃 안에 들어갔을 때는 바깥 여백을 레이아웃에 맡긴다.
   여기서 또 여백을 주면 패널 안에 액자가 하나 더 생긴다. */
.xex-content .koco-auth-page,
.koco-page-content .koco-auth-page,
.koco-subpage-content .koco-auth-page {
  width: min(1000px, 100%);
  margin: 0 auto;
}

.koco-auth-page a {
  color: inherit;
  text-decoration: none;
}

.koco-auth-page button,
.koco-auth-page input {
  font: inherit;
}

.koco-auth-page a:focus-visible,
.koco-auth-page button:focus-visible,
.koco-auth-page input:focus-visible {
  outline: 2px solid var(--ka-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- 상단 브랜드 줄
   레이아웃이 붙지 않은 단독 렌더에서만 나온다. */

.koco-auth-brandbar {
  min-height: 52px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--ka-surface);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
}

.koco-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.koco-auth-brandmark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--ka-radius);
  color: #FFF9EE;
  background: var(--ka-primary);
  font-size:19px;
  font-weight: 900;
  line-height: 1;
}

.koco-auth-brand > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.koco-auth-brand strong {
  font-size:17px;
  letter-spacing: -.02em;
}

.koco-auth-brand small {
  margin-top: 2px;
  color: var(--ka-muted);
  font-size:15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.koco-auth-home {
  min-height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
  background: #FFF9EE;
  color: var(--ka-muted);
  font-size:15px;
  font-weight: 700;
  white-space: nowrap;
}

.koco-auth-home:hover {
  color: var(--ka-primary-text);
  border-color: var(--ka-tint-line);
  background: var(--ka-tint);
}

/* ---------------------------------------------------------- 본문 패널 */

.koco-auth-panel {
  margin-top: 10px;
  padding: clamp(14px, 2.4%, 26px);
  position: relative;
  background: var(--ka-surface);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
}

/* 레이아웃 패널(.xex-panel) 안에서는 테두리가 겹쳐 이중 액자가 된다.
   그때는 껍데기를 벗고 내용만 남긴다. profile.css 의 활동 카드와 같은 처리다. */
.xex-content .koco-auth-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.koco-auth-intro {
  max-width: 62ch;
}

.koco-auth-intro > span {
  display: inline-block;
  color: var(--ka-primary-text);
  font-size:15px;
  font-weight: 800;
  letter-spacing: .1em;
}

.koco-auth-intro h1 {
  margin: 4px 0 0;
  font-size:clamp(19px, 2vw, 25px);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.koco-auth-intro p {
  margin: 6px 0 0;
  color: var(--ka-muted);
  font-size:15px;
}

/* ---------------------------------------------------------- 두 갈래 로그인 */

.koco-auth-columns {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.koco-auth-section {
  min-width: 0;
  padding: clamp(13px, 3.4%, 20px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
  background: var(--ka-soft);
}

.koco-auth-section-head {
  margin-bottom: 13px;
  padding-bottom: 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-bottom: 1px solid var(--ka-border);
}

.koco-auth-section-head > div {
  min-width: 0;
}

.koco-auth-step {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--ka-radius);
  color: #FFF9EE;
  background: var(--ka-primary);
  font-size:15px;
  font-weight: 800;
  line-height: 1;
}

/* 제목은 어떤 폭에서도 낱말 중간에서 끊기지 않는다. */
.koco-auth-section-head h2 {
  margin: 0;
  font-size:15px;
  line-height: 1.3;
  letter-spacing: -.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.koco-auth-section-head p {
  margin: 3px 0 0;
  color: var(--ka-muted);
  font-size:15px;
}

/* '또는' 구분자.
   세로쓰기(writing-mode: vertical-rl)를 쓰면 한글이 한 글자씩 세로로 쌓인다.
   글자는 늘 가로로 두고, 선만 방향을 바꾼다. */
.koco-auth-divider {
  position: relative;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.koco-auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ka-border);
}

.koco-auth-divider span {
  position: relative;
  padding: 0 9px;
  color: var(--ka-muted);
  background: var(--ka-surface);
  font-size:15px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.xex-content .koco-auth-divider span {
  background: var(--xex-surface, #FFF9EE);
}

/* 칸이 넉넉해지면 두 갈래를 좌우로 편다. 화면 폭이 아니라 이 상자의 폭을 본다. */
@container (min-width: 640px) {
  .koco-auth-columns {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(10px, 1.4%, 18px);
  }

  .koco-auth-divider {
    width: 30px;
    min-height: 0;
  }

  .koco-auth-divider::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    transform: translateX(-50%);
  }

  .koco-auth-divider span {
    padding: 7px 0;
  }
}

/* @container 를 모르는 브라우저용 최소 대비. 화면 폭으로만 판단한다. */
@supports not (container-type: inline-size) {
  @media (min-width: 960px) {
    .koco-auth-columns {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 16px;
    }

    .koco-auth-divider {
      width: 30px;
      min-height: 0;
    }

    .koco-auth-divider::before {
      top: 0;
      bottom: 0;
      left: 50%;
      right: auto;
      width: 1px;
      height: auto;
      transform: translateX(-50%);
    }

    .koco-auth-divider span {
      padding: 7px 0;
    }
  }
}

/* ---------------------------------------------------------- 입력 */

.koco-auth-form {
  display: grid;
  align-content: start;
  gap: 7px;
}

.koco-auth-form + .koco-auth-form {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--ka-border);
}

.koco-auth-form label {
  color: var(--ka-ink);
  font-size:15px;
  font-weight: 700;
}

.koco-auth-form label small {
  margin-left: 4px;
  color: var(--ka-muted);
  font-size:15px;
  font-weight: 600;
}

.koco-auth-form input[type="text"],
.koco-auth-form input[type="email"],
.koco-auth-form input[type="password"] {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ka-border-strong);
  border-radius: var(--ka-radius);
  outline: none;
  color: var(--ka-ink);
  background: #FFF9EE;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.koco-auth-form input::placeholder {
  color: #146B43;
}

.koco-auth-form input:focus {
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, #F27A00 14%, transparent);
}

.koco-auth-form input[readonly] {
  color: var(--ka-muted);
  background: #FFF9EE;
}

.koco-auth-check {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size:15px;
}

.koco-auth-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--ka-primary);
}

/* ---------------------------------------------------------- 버튼 */

.koco-auth-primary,
.koco-auth-secondary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--ka-radius);
  cursor: pointer;
  font-size:15px;
  font-weight: 800;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.koco-auth-primary {
  color: #FFF9EE;
  border: 1px solid var(--ka-primary);
  background: var(--ka-primary);
}

.koco-auth-primary:hover {
  border-color: var(--ka-primary-hover);
  background: var(--ka-primary-hover);
}

.koco-auth-secondary {
  color: var(--ka-primary-text);
  border: 1px solid var(--ka-tint-line);
  background: var(--ka-tint);
}

.koco-auth-secondary:hover {
  border-color: var(--ka-primary);
  background: #FFF9EE;
}

.koco-auth-primary:disabled,
.koco-auth-secondary:disabled {
  opacity: .62;
  cursor: not-allowed;
}

/* ---------------------------------------------------------- 상태 줄 */

.koco-auth-message {
  margin: 11px 0 0;
  font-size:15px;
  font-weight: 700;
  line-height: 1.45;
}

/* 아무 일도 없을 때 회색 빈 상자가 카드 안에 남아 있으면 고장처럼 보인다. */
.koco-auth-message:empty {
  display: none;
}

.koco-auth-message.is-working,
.koco-auth-message.is-success,
.koco-auth-message.is-error {
  padding: 8px 10px;
  border-radius: var(--ka-radius);
}

.koco-auth-message.is-working {
  color: var(--ka-muted);
  background: #FFF9EE;
}

.koco-auth-message.is-success {
  color: var(--ka-primary-text);
  background: var(--ka-tint);
  border-left: 3px solid var(--ka-primary);
}

.koco-auth-message.is-error {
  color: #FFF9EE;
  background: var(--ka-primary-hover);
}

/* 짧은 도움말. OTP 카드는 입력 줄이 두 줄 적어서 좌우 카드 높이를 맞추면
   아래가 크게 빈다. 도움말을 바닥에 붙여 그 자리를 채운다. */
.koco-auth-hint {
  margin: 11px 0 0;
  color: var(--ka-muted);
  font-size:15px;
  line-height: 1.5;
}

.koco-otp-box .koco-auth-hint {
  margin-top: auto;
  padding-top: 11px;
}

/* ---------------------------------------------------------- 아래 안내 */

.koco-auth-helpbar {
  margin-top: 12px;
  padding: 11px 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
  background: var(--ka-soft);
}

.koco-auth-helpbar > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.koco-auth-helpbar strong {
  font-size:15px;
}

.koco-auth-helpbar span {
  margin-top: 2px;
  color: var(--ka-muted);
  font-size:15px;
}

.koco-auth-helpbar > a {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ka-tint-line);
  border-radius: var(--ka-radius);
  color: var(--ka-primary-text);
  background: #FFF9EE;
  font-size:15px;
  font-weight: 800;
  white-space: nowrap;
}

.koco-auth-helpbar > a:hover {
  border-color: var(--ka-primary);
  background: var(--ka-tint);
}

.koco-auth-security {
  margin: 9px 0 0;
  color: var(--ka-muted);
  text-align: center;
  font-size:15px;
}

/* ---------------------------------------------------------- 가입 · 재설정 */

.koco-auth-page-compact {
  width: min(760px, calc(100% - 20px));
}

.xex-content .koco-auth-page-compact,
.koco-page-content .koco-auth-page-compact,
.koco-subpage-content .koco-auth-page-compact {
  width: min(760px, 100%);
}

.koco-auth-setup-panel {
  margin-right: auto;
  margin-left: auto;
}

.koco-identity-lock {
  margin-top: 14px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: #FFF9EE;
  background: var(--xex-bar, #146B43);
  border-left: 3px solid var(--ka-primary);
  border-radius: var(--ka-radius);
}

.koco-identity-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--ka-radius);
  color: var(--ka-primary-text);
  background: var(--ka-surface);
  font-weight: 900;
}

.koco-identity-lock small {
  display: block;
  color: color-mix(in srgb, #FFF9EE 62%, transparent);
  font-size:15px;
  font-weight: 700;
  letter-spacing: .06em;
}

.koco-identity-lock strong {
  margin-top: 2px;
  display: block;
  font-size:18px;
  letter-spacing: -.02em;
}

.koco-identity-lock p {
  margin: 4px 0 0;
  color: color-mix(in srgb, #FFF9EE 68%, transparent);
  font-size:15px;
}

.koco-identity-badge {
  padding: 4px 8px;
  border-radius: var(--ka-radius);
  background: var(--ka-primary);
  font-size:15px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.koco-auth-setup-form,
.koco-reset-flow {
  margin-top: 12px;
  padding: clamp(13px, 2.6%, 20px);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
  background: var(--ka-soft);
}

/* 두 칸으로 두되, 칸이 좁아지면 알아서 한 칸으로 접힌다. */
.koco-auth-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}

.koco-auth-field-grid > div {
  display: grid;
  align-content: start;
  gap: 7px;
}

.koco-auth-field-help {
  margin: 2px 0 0;
  color: var(--ka-muted);
  font-size:15px;
}

.koco-auth-wide {
  width: 100%;
  margin-top: 4px;
}

.koco-reset-password-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ka-border);
}

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

@media (max-width: 520px) {
  .koco-auth-page {
    width: calc(100% - 16px);
    margin: 8px auto 20px;
  }

  .koco-auth-page-compact {
    width: calc(100% - 16px);
  }

  .koco-auth-brand small {
    display: none;
  }

  .koco-auth-helpbar {
    align-items: stretch;
    flex-direction: column;
  }

  .koco-auth-helpbar > a {
    justify-content: center;
  }

  .koco-identity-lock {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .koco-identity-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}