/* ============================================================================
   런닝인사이드 — 계정 화면 전용 CSS (가입 · 로그인 · 마이페이지)
   회원팀 · 2026-08-18

   ★규칙
   ① 색 리터럴은 «이 파일에만» 있다. 템플릿(.php)에는 색이 한 번도 나오지 않는다.
   ② 계약 토큰(--ri-*)은 tokens.css 가 주인이다. 여기서 이름을 새로 짓지 않는다.
      단 하나 예외 = 소셜 브랜드색 2개. 이건 카카오·네이버 «규정색» 이라
      우리 토큰 체계에 넣을 수 없어 아래 :root 에 «계약 밖 이름» 으로 둔다.
   ③ app.css 에 이미 있는 것(.ri-btn · .ri-panel · .ri-chip · .ri-check · .ri-field)은
      다시 만들지 않는다. 여기 있는 것은 «가입 화면에만 있는» 것뿐이다.
   ④ 이 파일은 계정 세 화면에서만 실린다(플러그인 inc/account.php 가 싣는다).
      목록 200KB 예산에 들어가지 않는다.
   ============================================================================ */

:root {
  /* 소셜 규정색 — «계약 밖». 버튼이 지금은 disabled 라 실제로는 흐리게 보인다.
     ★카카오 노랑 위 «검정» 글자 = 13.75:1 (디자인팀 계산값)
     ★네이버 공식 초록 위 «흰» 글자는 2.25:1 로 기준 미달이라 쓰지 않는다.
       네이버 가이드가 함께 주는 «흰 버튼 + 초록 로고» 쪽을 쓴다. */
  --ri-kakao:     #FEE500;
  --ri-kakao-ink: #191919;
  --ri-naver:     #03C75A;
}

/* ── 한 칸짜리 화면 틀 ────────────────────────────────────────────────── */
.ri-auth { max-width: 520px; margin: 0 auto; padding-bottom: var(--ri-space-9); }
.ri-auth__head { text-align: center; padding: var(--ri-space-6) 0 var(--ri-space-5); }
.ri-auth__t { font-size: var(--ri-fs-2xl); font-weight: 800; letter-spacing: -.035em; margin: 0 0 8px; }
.ri-auth__d { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base); margin: 0; }

/* ── 폼 ───────────────────────────────────────────────────────────────── */
.ri-fieldset { border: 0; padding: 0; margin: 0 0 var(--ri-space-5); min-width: 0; }
.ri-legendt {
  font-size: var(--ri-fs-lg); font-weight: 800; letter-spacing: -.02em;
  margin-bottom: var(--ri-space-3); padding: 0;
}
.ri-label { display: block; font-size: var(--ri-fs-sm); font-weight: 800; margin-bottom: 6px; }
.ri-req { color: var(--ri-danger); margin-left: 2px; font-weight: 800; }
.ri-opt { color: var(--ri-text-sub); font-weight: 600; margin-left: 4px; font-size: var(--ri-fs-xs); }
/* ★.ri-field input[type=…] (app.css) 이 «더 강해서» 42px 로 눌린다.
   가입 화면 입력칸은 시안대로 48px 이어야 하므로 선택자를 한 칸 올려 맞춘다.
   (app.css 를 고치지 않고 이기는 유일한 방법이다) */
.ri-input,
.ri-field input.ri-input,
.ri-field select.ri-input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--ri-line-strong); border-radius: var(--ri-radius-sm);
  background: var(--ri-surface); color: var(--ri-text);
}
.ri-input::placeholder { color: var(--ri-text-sub); opacity: 1; }
.ri-input:focus { outline: 2px solid var(--ri-brand); outline-offset: -2px; border-color: var(--ri-brand); }
select.ri-input { padding-right: 34px; }
.ri-help { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); margin-top: 6px; line-height: 1.55; }
.ri-why {
  background: var(--ri-brand-weak); color: var(--ri-brand);
  border-radius: var(--ri-radius-sm); padding: 12px 14px;
  font-size: var(--ri-fs-sm); font-weight: 600; line-height: var(--ri-lh-base);
  margin-bottom: var(--ri-space-5);
}
.ri-err {
  border: 1px solid var(--ri-danger); border-left-width: 4px;
  border-radius: var(--ri-radius-sm); background: var(--ri-surface);
  color: var(--ri-danger); font-size: var(--ri-fs-sm); font-weight: 700;
  padding: 11px 13px; margin-bottom: var(--ri-space-4);
}
.ri-ok {
  border: 1px solid var(--ri-line); border-left: 4px solid var(--ri-st-open);
  border-radius: var(--ri-radius-sm); background: var(--ri-surface);
  font-size: var(--ri-fs-sm); padding: 11px 13px; margin-bottom: var(--ri-space-4);
}
/* 벌꿀통 — 사람 눈에 보이지 않되 display:none 은 쓰지 않는다(일부 봇이 건너뛴다) */
.ri-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 관심사 알약 — app.css 의 .ri-chip 을 그대로 쓴다. 감싸는 줄만 여기서 만든다 */
.ri-pickchips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 동의 묶음 ────────────────────────────────────────────────────────── */
.ri-agree {
  border: 1px solid var(--ri-line); border-radius: var(--ri-radius-sm);
  padding: 2px var(--ri-space-4); background: var(--ri-surface);
}
.ri-agree .ri-check { margin: 0; min-height: var(--ri-tap); padding: 8px 0; align-items: flex-start; }
.ri-checkrow { border-bottom: 1px solid var(--ri-line); }
.ri-checkrow:last-child { border-bottom: 0; }
.ri-agree__view {
  margin-left: auto; font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
  font-weight: 700; text-decoration: underline; white-space: nowrap; padding-left: 8px;
  display: inline-flex; align-items: center; min-height: var(--ri-tap); flex: none;
}
.ri-adline { padding: 10px 0 12px; }
.ri-adline__t { font-size: var(--ri-fs-sm); font-weight: 600; padding-top: 6px; margin: 0; }
.ri-subchecks { display: flex; flex-wrap: wrap; gap: 0 var(--ri-space-5); padding-left: 28px; }
.ri-subchecks .ri-check { margin: 0; }
.ri-notcollect {
  margin-top: var(--ri-space-5); border: 1px dashed var(--ri-line-strong);
  border-radius: var(--ri-radius-sm); padding: 12px 14px;
}
.ri-notcollect b { display: block; font-size: var(--ri-fs-sm); margin-bottom: 5px; }
.ri-collect {
  margin-top: var(--ri-space-2); font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
  background: var(--ri-surface-2); border-radius: var(--ri-radius-sm); padding: 10px 12px;
}
.ri-collect dt { font-weight: 700; color: var(--ri-text); }
.ri-collect dd { margin: 0 0 4px; }

/* ── 소셜 «자리» ──────────────────────────────────────────────────────── */
.ri-social { display: flex; flex-direction: column; gap: var(--ri-space-2); }
.ri-social__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; border-radius: var(--ri-radius-sm); font-weight: 800;
  font-size: var(--ri-fs-base); border: 1px solid transparent; position: relative;
  width: 100%; cursor: not-allowed;
}
.ri-social__btn[disabled] { opacity: .55; }
.ri-social--kakao { background: var(--ri-kakao); color: var(--ri-kakao-ink); }
.ri-social--naver { background: var(--ri-surface); color: var(--ri-text); border-color: var(--ri-line-strong); }
.ri-social__mark { width: 18px; height: 18px; flex: none; }
.ri-social__mark--naver { color: var(--ri-naver); }
.ri-social__soon {
  position: absolute; right: 12px; font-size: var(--ri-fs-xs); font-weight: 700;
  background: var(--ri-surface-2); color: var(--ri-text); border-radius: var(--ri-radius-pill);
  padding: 3px 8px;
}
.ri-or {
  display: flex; align-items: center; gap: 12px; color: var(--ri-text-sub);
  font-size: var(--ri-fs-sm); font-weight: 700; margin: var(--ri-space-5) 0;
}
.ri-or::before, .ri-or::after { content: ""; flex: 1; height: 1px; background: var(--ri-line); }

.ri-bottomlink {
  text-align: center; margin-top: var(--ri-space-5);
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub); font-weight: 600;
}
.ri-bottomlink a {
  font-weight: 800; display: inline-flex; align-items: center;
  min-height: var(--ri-tap); padding: 0 4px;
}

/* ── 마이페이지 ───────────────────────────────────────────────────────── */
.ri-my { max-width: var(--ri-container); margin: 0 auto; }
.ri-my__head {
  display: flex; align-items: baseline; gap: var(--ri-space-3);
  flex-wrap: wrap; padding: var(--ri-space-5) 0 var(--ri-space-4);
}
.ri-my__name { font-size: var(--ri-fs-xl); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.ri-my__mail { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }
.ri-my__cols { display: block; }
.ri-my__sec + .ri-my__sec { margin-top: var(--ri-space-4); }
.ri-my__sec h2 { font-size: var(--ri-fs-lg); font-weight: 800; margin: 0 0 var(--ri-space-3); }
.ri-my__row {
  display: flex; align-items: center; gap: var(--ri-space-3);
  padding: 10px 0; border-bottom: 1px solid var(--ri-line); flex-wrap: wrap;
}
.ri-my__row:last-child { border-bottom: 0; }
.ri-my__row form { margin-left: auto; }
.ri-my__t { font-weight: 700; font-size: var(--ri-fs-sm); min-width: 0; }
.ri-my__sub { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.ri-my__off { opacity: .6; }
.ri-sub { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); font-weight: 600; }
.ri-actions { display: flex; flex-wrap: wrap; gap: var(--ri-space-2); margin-top: var(--ri-space-4); }
.ri-danger {
  border: 1px solid var(--ri-danger); border-radius: var(--ri-radius);
  padding: var(--ri-space-4); background: var(--ri-surface);
}
.ri-danger h2 { color: var(--ri-danger); }
.ri-danger__btn { color: var(--ri-text-sub); font-weight: 700; text-decoration: underline; }
.ri-danger ul { margin: 0 0 var(--ri-space-3); padding-left: 18px; list-style: disc; font-size: var(--ri-fs-sm); }
.ri-danger li { margin: 2px 0; }

@media (min-width: 900px) {
  .ri-my__cols {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ri-space-4); align-items: start;
  }
  .ri-my__sec + .ri-my__sec { margin-top: 0; }
  .ri-my__full { grid-column: 1 / -1; }
}