/* ============================================================
 * 쌤하고 v2 공용 스타일 (가입과 유입 화면)
 *
 * 쓰는 곳
 *   html/html/login-v2.html      로그인, 아이디 찾기, 비밀번호 찾기, 카카오 후 온보딩
 *   html/html/type-test-v2.html  자기주도학습 유형검사
 *   html/html/planner-v2.html    교재 맞춤 계획표
 *   html/html/survey-v2.html     체험 만족도 조사
 *
 * 색값 출처: html/css/web/samhago-design-system.css
 *   정본을 var()로 참조하지 않고 값을 옮겨 적었다.
 *   시안이 파일 하나로 열려야 하고, 정본 CSS를 함께 배포하지 않기 때문.
 *   정본이 바뀌면 이 파일도 같이 손봐야 한다.
 *
 * 화면마다 다른 것은 각 파일의 <style> 블록에 남겨 둔다.
 * ============================================================ */

:root{
  /* 먹색과 중립 */
  --ink:#2C2C2C;      /* 제목 */
  --ink2:#4B5563;     /* 본문 */
  --ink3:#8A939B;     /* 보조 */
  --mute:#C4CAD1;     /* placeholder */
  --line:#E5E7EB;     /* 테두리와 구분선 */
  --line2:#EDF0F4;
  --bg:#F4F4F4;
  --card:#FFFFFF;

  /* 브랜드 */
  --blue:#19B4F5; --blue-deep:#0E8FC4; --blue-soft:#E8F7FE; --blue-ink:#0E6E9B;
  --yellow:#F2B819; --yellow-deep:#D9A317; --yellow-soft:#FDF3D8; --yellow-ink:#8A6400;
  --brown:#915B41; --brown-soft:#F5EBE5;
  --kakao:#FEE500; --kakao-ink:#191600;

  /* 화면의 주 색. 노랑을 쓰는 화면은 자기 <style>에서 이 값만 바꾼다 */
  --accent:var(--blue);
  --accent-deep:var(--blue-deep);
  --accent-soft:var(--blue-soft);
  --accent-ink:var(--blue-ink);
}

/* 실서버 적용 주의
   시안 원본은 `*` 와 `body` 에 전역 리셋을 걸지만, 실서버 로그인 화면은
   bootstrap 3 / common.css / modal.css 와 함께 로드된다.
   전역 리셋이 공통 모달(web/include/modal)까지 건드리는 것을 막기 위해
   래퍼 클래스 `.sh-v2` 안으로만 범위를 좁혔다.
   화면 최상위 요소에 class="sh-v2" 를 붙여야 스타일이 적용된다. */
.sh-v2, .sh-v2 *{box-sizing:border-box;margin:0;padding:0}
.sh-v2{
  background:var(--bg); color:var(--ink2);
  font-family:'Wanted Sans','Noto Sans KR',system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.sh-v2 button{font-family:inherit;cursor:pointer}
.sh-v2 input,.sh-v2 textarea,.sh-v2 select{font-family:inherit}
.sh-v2 :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── 헤더 ── */
.top{
  position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--line); padding:16px 20px;
  display:flex; align-items:center; gap:10px;
}
.top .t{font-size:18px;font-weight:800;color:var(--ink)}
.top .tag{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink3)}
.top .back{margin-right:2px;border:none;background:none;padding:4px;color:#6B7280;display:none}
.top .back.on{display:block}

/* 도토리 로고 (원 세 개가 브랜드 3색) */
.acorn{position:relative;width:26px;height:26px;flex:none}
.acorn i{position:absolute;border-radius:50%}
.acorn .b{width:21px;height:21px;left:0;bottom:0;background:var(--blue)}
.acorn .y{width:15px;height:15px;left:5px;top:3px;background:var(--yellow)}
.acorn .r{width:10px;height:10px;right:0;top:0;background:var(--brown)}

/* ── 틀 ── */
.wrap{max-width:600px;margin:0 auto;padding:34px 20px 60px}
.card{
  background:var(--card); border-radius:16px; padding:36px 26px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:22px;
}
.big{font-size:24px;font-weight:800;line-height:1.5;color:var(--ink);margin:2px 0 14px;word-break:keep-all}
.sub{font-size:15px;color:#6B7280;margin-bottom:4px;word-break:keep-all;line-height:1.8}
.foot{max-width:600px;margin:0 auto;padding:0 20px 50px;font-size:12.5px;color:var(--ink3);word-break:keep-all;line-height:1.8}

/* ── 화면 전환 ── */
.scr{display:none}
.scr.on{display:block}
.hidden{display:none !important}
@media(prefers-reduced-motion:no-preference){
  .scr.on .card{animation:sh-in .35s ease}
  @keyframes sh-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ── 진행 표시 ── */
.prog{display:flex;align-items:center;gap:14px;margin:8px 4px 24px}
.prog b{font-size:17px;font-weight:800;color:var(--ink2)}
.prog b em{font-style:normal;font-size:14px;font-weight:700;color:#9CA3AF}
.prog .bar{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .3s ease}

/* ── 입력 (밑줄형) ── */
.f-label{display:block;font-size:13px;font-weight:600;color:var(--ink3);margin:22px 0 2px}
.f-in{
  width:100%; border:none; border-bottom:2px solid var(--line); border-radius:0;
  background:transparent; padding:12px 2px; font-size:21px; font-weight:700; color:var(--ink);
  transition:border-color .15s;
}
.f-in:focus{outline:none;border-bottom-color:var(--accent)}
.f-in::placeholder{font-size:18px;font-weight:400;color:var(--mute)}
.f-in[readonly]{border-bottom-style:dashed;color:#6B7280}
.f-row{display:flex;gap:10px;align-items:flex-end}
.f-row .f-in{flex:1}
/* 보조 버튼: 채운 색 대신 연한 틴트 (대표 CTA와 위계 분리) */
.f-btn{
  flex:none; height:48px; padding:0 18px; border:none; border-radius:10px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:700;
}
.f-btn:hover{filter:brightness(.97)}
.f-btn:disabled{background:#F3F4F6;color:#9CA3AF;cursor:not-allowed}
.err{display:none;margin-top:8px;font-size:13px;color:#DC2626}
.err.on{display:block}

/* ── 선택 (원형 체크 행) ── */
.opts{margin-top:24px}
.opt{
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:18px 2px; text-align:left; font-size:16.5px; font-weight:600; color:var(--ink2);
  transition:background .12s;
}
.opt:last-child{border-bottom:0}
.opt:hover{background:#FBFCFE}
.opt.sel{color:var(--ink);font-weight:700}
.opt .o-sub{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink3)}

/* 체크 원형. 켜지면 주 색 */
.ck,.o-ck{
  width:22px;height:22px;border-radius:50%;flex:none;position:relative;
  background:#D5DBE1;transition:background .12s;
}
.ck::after,.o-ck::after{
  content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.opt.sel .o-ck,.opt.sel .ck,.ck.on{background:var(--accent)}

/* ── 버튼 3단 위계 (그림자 없음, 플랫) ── */
.btn{
  width:100%; height:52px; border:none; border-radius:12px;
  font-size:16px; font-weight:700; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.btn-main{color:#fff;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%)}
.btn-main:hover{filter:brightness(1.04)}
.btn-main:disabled{background:var(--line);color:#9CA3AF;cursor:not-allowed;filter:none}
.btn-sub{background:var(--line);color:#6B7280}
.btn-sub:hover{background:#D1D5DB}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.btn-ghost:hover{background:#FBFBF8}
.btn-kakao{background:var(--kakao);color:var(--kakao-ink)}
.btn-kakao:hover{filter:brightness(.97)}

/* 나란히 놓는 자리 */
.nav{display:flex;gap:12px;margin-top:14px;padding:0 4px}
.nav .btn{width:auto;flex:1}
.nav .btn-main{flex:2.2}
.btn-wrap{margin-top:26px}
.btn-wrap .btn+.btn{margin-top:10px}
.skip{display:block;width:100%;margin-top:12px;border:none;background:none;font-size:13.5px;font-weight:600;color:var(--ink3);padding:6px}
.skip:hover{color:var(--ink)}

/* ── 완료 화면 ── */
.done{text-align:center;padding:8px 0 4px}
.done-ck{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;background:var(--accent);position:relative}
.done-ck::after{
  content:"";position:absolute;left:22px;top:14px;width:14px;height:25px;
  border:solid #fff;border-width:0 4px 4px 0;transform:rotate(42deg);
}
.done h3{font-size:21px;font-weight:800;line-height:1.45;color:var(--ink);margin-bottom:8px;word-break:keep-all}
.done p{font-size:14px;color:var(--ink2);word-break:keep-all;line-height:1.7}