/* onboarding.css — v62 회원가입 온보딩 (신규 디자인)
   #onb 스코프 전용 — retro/official 테마와 독립적으로 동작합니다. */

#onb {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  overflow: auto;
  background: #eef0e6;
  color: #1c2430;
  font-family: 'ES Emoji', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}
#onb.show { display: block; }
#onb * { box-sizing: border-box; }
#onb .obwrap { min-height: 100%; display: flex; flex-direction: column; }

@keyframes obUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#onb .obanim { animation: obUp .18s ease-out; }

/* ---------- 헤더 ---------- */
#onb .obhead {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 22px; height: 56px; background: #fff; border-bottom: 1px solid #dcd8c0;
}
#onb .obdot { width: 9px; height: 9px; border-radius: 99px; background: #5a6636; display: inline-block; flex: none; }
#onb .obhead b { font-size: 15px; letter-spacing:-.3px; }
#onb .obhead .obtag { font-size: 12.5px; color: #98a08a; }
#onb .obhead .obright { margin-left: auto; display: flex; align-items: center; gap: 9px; }
#onb .obhead .obright span { font-size: 12.5px; color: #6b7160; }

/* ---------- 본문 ---------- */
#onb .obmain { flex: 1; display: flex; justify-content: center; padding: 38px 20px 60px; }
#onb .obcol { width: 100%; max-width: 760px; min-width: 0; }
#onb .obcol.wide { max-width: 1040px; }
#onb h1.obt { margin: 0; font-size: 24px; font-weight: 800; letter-spacing:-.4px; }
#onb p.obd { margin: 7px 0 20px; font-size: 13.5px; color: #6b7160; line-height: 1.6; }

/* ---------- 스텝 ---------- */
#onb .obsteps { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
#onb .obstep { display: inline-flex; align-items: center; gap: 8px; }
#onb .obstep i {
  width: 22px; height: 22px; border-radius: 99px; border: 1.5px solid #dcd8c0; background: #fff; color: #c6c8b4;
  font-size: 11.5px; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center;
}
#onb .obstep b { font-size: 12.5px; color: #c6c8b4; white-space: nowrap; font-weight: 700; }
#onb .obstep.on i { border-color: #5a6636; background: #5a6636; color: #fff; }
#onb .obstep.done i { border-color: #cbdcb6; background: #e9f0e0; color: #3f6626; }
#onb .obstep.on b, #onb .obstep.done b { color: #1c2430; }
#onb .obarrow { color: #c6c8b4; font-size: 12.5px; margin: 0 2px; }

/* ---------- 카드 ---------- */
#onb .obcard { background: #fff; border: 1px solid #dcd8c0; border-radius: 12px; padding: 18px 20px; }
#onb .obcard.flat { padding: 0; overflow: hidden; }
#onb .obch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#onb .obch b { font-size: 13.5px; }
#onb .obch span { font-size: 11.5px; color: #98a08a; }
#onb .obnote {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px;
  border: 1px solid #e8e5d1; border-radius: 12px; background: #fff;
  font-size: 12.5px; color: #6b7160; line-height: 1.65;
}
#onb .obnote b { color: #1c2430; }

/* ---------- 시작 방식 선택 카드 ---------- */
#onb .obpaths { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; min-width: 0; }
#onb .obpath {
  text-align: left; padding: 20px; border: 1.5px solid #dcd8c0; border-radius: 14px; background: #fff;
  font: inherit; cursor: pointer; color: #1c2430; min-width: 0; display: block; width: 100%;
}
#onb .obpath:hover { border-color: #5a6636; background: #f5f4e7; }
#onb .obpath .obph { display: flex; align-items: center; gap: 10px; }
#onb .obpath .obico {
  width: 38px; height: 38px; flex: none; border-radius: 11px; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
#onb .obpath .obtt { display: block; font-size: 15px; letter-spacing:-.3px; font-weight: 700; }
#onb .obpath .obsub { display: block; font-size: 12.5px; color: #98a08a; margin-top: 2px; }
#onb .obpath .obdesc { display: block; font-size: 12.5px; color: #6b7160; line-height: 1.65; margin-top: 12px; }
#onb .obpath .obcta { display: block; font-size: 12.5px; font-weight: 700; color: #4d5434; margin-top: 14px; }
#onb .obchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
#onb .obchip {
  font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 3px 9px;
  background: #eef0e6; color: #4f5644; white-space: nowrap;
}

/* ---------- 폼 ---------- */
#onb .obgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
#onb .obgrid .sp2 { grid-column: span 2; }
@media (max-width: 640px) { #onb .obgrid { grid-template-columns: minmax(0, 1fr); } #onb .obgrid .sp2 { grid-column: span 1; } }
#onb label.obf { display: block; min-width: 0; }
#onb label.obf > span.obl {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #4f5644; margin-bottom: 6px;
}
#onb label.obf > span.obl em { color: #a8442a; font-style: normal; }
#onb label.obf > span.obl i { font-size: 10.5px; font-weight: 600; color: #98a08a; font-style: normal; }
#onb .obin {
  width: 100%; padding: 10px 12px; border: 1.5px solid #dcd8c0; border-radius: 9px; outline: none;
  font: inherit; font-size: 13.5px; background: #fff; color: #1c2430;
}
#onb .obin:focus { border-color: #5a6636; }
#onb .obin::placeholder { color: #c6c8b4; }
#onb .obhint { display: block; font-size: 11.5px; color: #98a08a; margin-top: 5px; line-height: 1.5; }
#onb .oberr { display: block; font-size: 11.5px; color: #a8442a; margin-top: 5px; line-height: 1.5; }
#onb .obin.bad { border-color: #e3c2b6; }

/* ---------- 버튼 ---------- */
#onb .obbtn {
  padding: 10px 15px; border: 1px solid #dcd8c0; border-radius: 10px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #1c2430; cursor: pointer;
}
#onb .obbtn:hover { background: #f6f5ec; }
#onb .obbtn.pri {
  border-color: #5a6636; background: #5a6636; color: #fff; font-weight: 700; padding: 10px 20px; white-space: nowrap;
}
#onb .obbtn.pri:hover { background: #4d5434; }
#onb .obbtn.pri:disabled { background: #9aa075; border-color: #9aa075; cursor: default; opacity: .6; }
#onb .obbtn.sm { padding: 7px 14px; font-size: 12.5px; font-weight: 700; }
#onb .obbtn.sm:hover { border-color: #5a6636; color: #4d5434; background: #fff; }
#onb .obback {
  width: 32px; height: 32px; border: 1px solid #dcd8c0; border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; color: #4f5644; cursor: pointer; padding: 0; flex: none;
}
#onb .obback:hover { border-color: #5a6636; color: #4d5434; }
#onb .obhd2 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
#onb .obhd2 b { font-size: 20px; letter-spacing:-.4px; }
#onb .obhd2 span { font-size: 12.5px; color: #98a08a; }

/* ---------- 약관 ---------- */
#onb .obtermh {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px;
  border-bottom: 1px solid #e8e5d1; background: #fbfaf2; flex-wrap: wrap;
}
#onb .obtermh b { font-size: 12.5px; }
#onb .obver { font-size: 11.5px; font-weight: 700; border-radius: 5px; padding: 2px 7px; background: #eceade; color: #4f5644; }
#onb .obcount { font-size: 11.5px; }
#onb .oballbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid #dcd8c0; border-radius: 8px; background: #fff; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #4f5644; cursor: pointer; white-space: nowrap;
}
#onb .oballbtn.on { border-color: #c9c5a1; background: #ecead7; color: #4d5434; }
#onb .obbox {
  width: 15px; height: 15px; border: 1.5px solid #c6c8b4; border-radius: 4px; background: #fff;
  color: #fff; font-size: 10.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none;
}
#onb .oballbtn.on .obbox, #onb .obterm.on .obbox { border-color: #5a6636; background: #5a6636; }
#onb .obterm {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid #eef0e6; background: #fff; min-width: 0; flex-wrap: wrap;
}
#onb .obterm.on { background: #fbfaf2; }
#onb .obterm > button.obck {
  flex: none; width: 18px; height: 18px; border: 1.5px solid #c6c8b4; border-radius: 5px; background: #fff;
  color: #fff; font-size: 11.5px; font-weight: 900; cursor: pointer; padding: 0; line-height: 1;
}
#onb .obterm.on > button.obck { border-color: #5a6636; background: #5a6636; }
#onb .obtg {
  flex: none; font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 2px 7px;
  background: #eceade; color: #4f5644; white-space: nowrap;
}
#onb .obtg.req { background: #f7e7e1; color: #a8442a; }
#onb .obterm .obtl { flex: 1 1 220px; min-width: 0; font-size: 12.5px; color: #3a4030; line-height: 1.5; }
#onb .obview {
  flex: none; padding: 4px 10px; border: 1px solid #dcd8c0; border-radius: 7px; background: #fff;
  font: inherit; font-size: 11.5px; font-weight: 700; color: #4d5434; cursor: pointer; white-space: nowrap;
}
#onb .obview:hover { background: #f4f3e8; }
#onb .obtermf { padding: 11px 16px; font-size: 11.5px; color: #98a08a; line-height: 1.6; }

/* 합류 화면용 약관 (버튼형) */
#onb .objterm {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #e8e5d1;
  border-radius: 9px; background: #fff; font: inherit; cursor: pointer; text-align: left;
  color: #1c2430; min-width: 0; flex-wrap: wrap; width: 100%;
}
#onb .objterm.on { border-color: #c9c5a1; background: #fbfaf2; }
#onb .objterm:hover { border-color: #5a6636; }
#onb .objterm .obbox { width: 17px; height: 17px; border-radius: 5px; }
#onb .objterm.on .obbox { border-color: #5a6636; background: #5a6636; }
#onb .objterm .obtl { flex: 1 1 180px; min-width: 0; font-size: 12.5px; line-height: 1.5; }

/* ---------- 개설 레이아웃 ---------- */
#onb .oblay { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
@media (max-width: 900px) { #onb .oblay { grid-template-columns: minmax(0, 1fr); } #onb .obside { position: static !important; } }
#onb .obmainc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#onb .obside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 22px; }
#onb .obside .obcard { padding: 15px 16px; }
#onb .obside b.t { font-size: 12.5px; }
#onb .obafter { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
#onb .obafter > div { display: flex; gap: 9px; align-items: flex-start; }
#onb .obafter i {
  width: 22px; height: 22px; flex: none; border-radius: 7px; background: #ecead7; color: #4d5434;
  font-size: 11.5px; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center;
}
#onb .obafter b { display: block; font-size: 12.5px; }
#onb .obafter span { display: block; font-size: 11.5px; color: #6b7160; margin-top: 2px; line-height: 1.5; }
#onb .obsidenote { font-size: 11.5px; color: #98a08a; margin-top: 10px; line-height: 1.55; }
#onb .obfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#onb .obfoot .msg { font-size: 12.5px; color: #98a08a; }
#onb .obfoot .msg.warn { color: #8f6708; }
#onb .obfoot .btns { margin-left: auto; display: flex; gap: 7px; }

/* ---------- 합류 ---------- */
#onb .obcodebar { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
#onb .obcode {
  flex: 1 1 220px; min-width: 0; padding: 12px 14px; border: 1.5px solid #dcd8c0; border-radius: 10px;
  outline: none; font: inherit; font-size: 15px; font-weight: 700; letter-spacing:-.3px;
  background: #fff; text-transform: uppercase;
}
#onb .obcode.ok { border-color: #cbdcb6; }
#onb .obcode.bad { border-color: #e3c2b6; }
#onb .obcodemsg { font-size: 11.5px; color: #98a08a; margin-top: 9px; line-height: 1.55; }
#onb .obcodemsg.ok { color: #3f6626; }
#onb .obcodemsg.bad { color: #a8442a; }
#onb .obfound {
  margin-top: 14px; padding: 14px 15px; border: 1.5px solid #cbdcb6; border-radius: 11px; background: #f0f4e8;
}
#onb .obfound .h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#onb .obfound .ic {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; color: #3f6626;
  font-size: 15px; display: flex; align-items: center; justify-content: center; border: 1px solid #cbdcb6;
}
#onb .obfound b { display: block; font-size: 13.5px; }
#onb .obfound .r { display: block; font-size: 11.5px; color: #3f6626; margin-top: 2px; }
#onb .obgrant {
  font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 4px 10px;
  background: #fff; color: #3f6626; border: 1px solid #cbdcb6; white-space: nowrap;
}

/* ---------- 완료 ---------- */
#onb .obdone {
  max-width: 560px; margin: 0 auto; text-align: center; background: #fff;
  border: 1px solid #dcd8c0; border-radius: 14px; padding: 34px 28px;
}
#onb .obdone .ck {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 15px; background: #e9f0e0; color: #3f6626;
  font-size: 24px; display: flex; align-items: center; justify-content: center;
}
#onb .obdone h2 { margin: 16px 0 0; font-size: 20px; font-weight: 800; letter-spacing:-.4px; }
#onb .obdone p { margin: 8px 0 0; font-size: 12.5px; color: #6b7160; line-height: 1.65; }
#onb .obnext { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; text-align: left; }
#onb .obnext > div {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid #e8e5d1; border-radius: 10px; background: #fbfaf2;
}
#onb .obnext span.tx { flex: 1; min-width: 0; font-size: 12.5px; color: #3a4030; }
#onb .obdone .go { margin-top: 18px; width: 100%; padding: 12px; font-size: 13.5px; }
#onb .obdone .again {
  margin-top: 8px; width: 100%; padding: 10px; border: 0; background: none; font: inherit;
  font-size: 12.5px; font-weight: 600; color: #98a08a; cursor: pointer;
}
#onb .obdone .again:hover { color: #4d5434; }

/* ---------- 토스트 ---------- */
#onb .obtoast {
  position: fixed; right: 20px; bottom: 22px; z-index: 99; display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; border-radius: 11px; background: #1c2430; color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .3);
}

/* 초대 코드 없이 신청 (접기) */
#onb .obmore {
  margin-top: 12px; padding: 13px 15px; border: 1px solid #e8e5d1; border-radius: 12px; background: #fff;
}
#onb .obmore > button {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #1c2430; cursor: pointer; padding: 0; text-align: left;
}
#onb .obmore .hint { font-size: 11.5px; color: #98a08a; font-weight: 400; }
#onb .obsel {
  width: 100%; padding: 10px 12px; border: 1.5px solid #dcd8c0; border-radius: 9px; outline: none;
  font: inherit; font-size: 13.5px; background: #fff; color: #1c2430;
}

/* ---------- 온보딩 중에는 테마 설정 버튼 숨김 ---------- */
#onb.show ~ #retroFab, #onb.show ~ #retroPanel { display: none !important; }

/* ---------- 모바일 ---------- */
@media (max-width: 560px) {
  #onb .obhead { height: auto; min-height: 52px; padding: 0 14px; gap: 7px; }
  #onb .obhead .obtag { display: none; }
  #onb .obhead b { font-size: 15px; white-space: nowrap; }
  #onb .obhead .obright span { display: none; }
  #onb .obhead .obright .obbtn.sm { padding: 6px 11px; white-space: nowrap; }
  #onb .obmain { padding: 22px 14px 48px; }
  #onb h1.obt { font-size: 20px; }
  #onb .obhd2 b { font-size: 17px; }
  #onb .obhd2 span { flex-basis: 100%; }
  #onb .obcard { padding: 15px 14px; }
  #onb .obch span { flex-basis: 100%; }
  #onb .obsteps { gap: 6px; }
  #onb .obstep b { font-size: 11.5px; }
  #onb .obcodebar .obbtn.pri { width: 100%; }
  #onb .obfoot .btns { width: 100%; margin-left: 0; }
  #onb .obfoot .btns .obbtn.pri { flex: 1; }
  #onb .obterm { padding: 10px 13px; }
  #onb .obtermh { padding: 11px 13px; }
  #onb .obdone { padding: 26px 18px; }
  #onb .obtoast { left: 14px; right: 14px; bottom: 14px; justify-content: center; text-align: center; }
}