/* 위티프렌즈 사무실 — H1 직원 고용 · 인터뷰 · 갈림길 (app/interview.js · hire.js · onboarding.js)
   styles.css 토큰만 써요(라이트·다크 자동). 모든 클래스는 hr- 로 시작해요.
   간격 8/12/16/24 · 누르는 곳 44px 이상 · 한 묶음에 글자 굵기 2가지까지 */

/* =========================================================
   공통
   ========================================================= */
.hr-muted{margin:8px 0;color:var(--ink-3);font-size:14px;word-break:keep-all}
.hr-loading{text-align:center;padding:24px 0}
.hr-note{margin:8px 0 0;font-size:13.5px;color:var(--accent-text);word-break:keep-all;min-height:0}
.hr-note:empty{display:none}
.hr-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
/* [고용하기]는 스크롤해도 아래에 붙어 있게 */
.hr-sticky{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));margin-bottom:calc(-24px - env(safe-area-inset-bottom));padding:16px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 16px)}
.hr-chev{flex:none;width:20px;height:20px;color:var(--ink-3)}
.hr-chev svg{display:block;width:100%;height:100%}
.hr-tag{display:inline-flex;align-items:center;flex:none;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap;line-height:1.5}
.hr-tag.is-on{background:var(--done-bg);color:var(--done)}
.hr-badge{display:inline-flex;align-items:center;flex:none;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;white-space:nowrap;line-height:1.5}

/* 두부 한 줄 (말풍선) */
.hr-lead{display:flex;align-items:flex-start;gap:12px;margin:12px 0 4px}
.hr-lead-face{flex:none}
.hr-lead-av{display:block;width:44px;height:44px;border-radius:50%}
.hr-lead-say{margin:0;flex:1;min-width:0;padding:12px 14px;border-radius:6px 18px 18px 18px;background:var(--surface);color:var(--ink);font-size:15px;line-height:1.5;word-break:keep-all;box-shadow:0 1px 2px var(--shadow)}
.hr-lead-say:focus,.hr-lead-say:focus-visible{outline:none}
.hr-iv-say:focus-visible,.hr-q:focus-visible,.hr-prof-name:focus-visible{outline:none}
/* 시트 높이가 질문마다 출렁이지 않게 */
.hr-sheet[open]{min-height:min(640px, calc(100dvh - max(20px, env(safe-area-inset-top))))}
.hr-sheet .sheet-body{flex:1}

/* =========================================================
   인터뷰 (한 화면 한 질문)
   ========================================================= */
.hr-iv{display:flex;flex-direction:column;gap:12px;min-width:0}
.hr-iv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.hr-iv-back{margin-left:-8px;padding-left:8px;padding-right:12px}
.hr-iv-prog{display:flex;align-items:center;gap:8px;min-width:0}
.hr-dots{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.hr-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:width .2s}
.hr-dots i.is-done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.hr-dots i.is-on{width:18px;border-radius:999px;background:var(--accent)}
.hr-iv-count{font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hr-iv-title{margin:-4px 0 0;font-size:12.5px;color:var(--ink-3);word-break:keep-all}

.hr-iv-dubu{display:flex;align-items:flex-start;gap:12px}
.hr-iv-lead{flex:none}
.hr-iv-lead-av{display:block;width:44px;height:44px;border-radius:50%}
.hr-iv-bubble{flex:1;min-width:0;padding:12px 14px;border-radius:6px 18px 18px 18px;background:var(--surface);box-shadow:0 1px 2px var(--shadow)}
.card .hr-iv-bubble,.card .hr-lead-say{background:var(--surface-2);box-shadow:none}
.hr-iv-intro{margin:0 0 4px;font-size:13.5px;color:var(--ink-2);word-break:keep-all}
.hr-iv-say{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.3px;color:var(--ink);word-break:keep-all}
.hr-iv-say:focus{outline:none}
.hr-iv-help{margin:4px 0 0;font-size:13.5px;color:var(--ink-3);word-break:keep-all}
.hr-iv-friend{display:flex;align-items:center;gap:8px;margin:0 0 0 56px;font-size:13px;color:var(--ink-3);word-break:keep-all}
.hr-iv-friend-av{display:block;width:26px;height:26px;border-radius:50%;flex:none}
.hr-iv-friend-line b{font-weight:700;color:var(--ink-2)}

.hr-iv-answer{display:flex;flex-direction:column;gap:8px;min-width:0}
.hr-chips{display:flex;flex-wrap:wrap;gap:8px}
.hr-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:15px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:background .15s,border-color .15s,transform .1s}
.card .hr-chip{background:var(--surface-2);border-color:transparent}
.hr-chip:hover:not(:disabled){background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.hr-chip:active:not(:disabled){transform:scale(.97)}
.hr-chip:disabled{opacity:.45;cursor:default}
.hr-chip.is-prev{border-color:var(--accent);color:var(--accent-text)}
.hr-chip.is-input{border-style:dashed;color:var(--ink-2)}
.card .hr-chip.is-input{border-color:var(--line)}
.hr-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.hr-chip[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink)}
.hr-iv-tip{margin:0;font-size:12.5px;color:var(--ink-3);word-break:keep-all}
.hr-edit{display:flex;gap:8px;align-items:stretch;min-width:0}
.hr-edit .input{flex:1;min-width:0}
.hr-edit .hr-next{flex:none;min-width:72px}
.hr-edit:has(textarea){flex-direction:column}
.hr-textarea{min-height:104px;padding:12px 14px;line-height:1.5;resize:vertical}
.hr-multi-text:empty{display:none}
.hr-multi-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hr-multi-foot .hr-next{flex:none;min-width:96px}

.hr-offer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.hr-offer-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:700}
.hr-offer-chip.is-ok{background:var(--done-bg);color:var(--done)}
.hr-offer-note{font-size:12.5px;color:var(--ink-3)}
.hr-fixed{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:13px;line-height:1.45;word-break:keep-all}
.card .hr-fixed{background:var(--bg)}
.hr-fixed-ic{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink-3)}
.hr-fixed-ic svg{display:block;width:100%;height:100%}
.hr-fixed b{font-weight:700;color:var(--ink)}
.hr-fixed-why{color:var(--ink-3)}
.hr-iv-foot{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.hr-iv-later{margin-left:auto}
.hr-iv-box{padding-top:4px}

/* =========================================================
   고용 시트
   ========================================================= */
.hr-sheet .sheet-body{padding-top:4px}
.hr-sec-title{margin:24px 0 2px;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.3px}
.hr-sec-title.is-sub{margin-top:24px;font-size:15px;color:var(--ink-2)}
.hr-sec-sub{margin:0 0 12px;font-size:13px;color:var(--ink-3);word-break:keep-all}
.hr-door-alt .hr-sec-title{margin-bottom:8px}

/* 문 ① 추천 직원 카드 */
.hr-roles{display:flex;flex-direction:column;gap:12px}
.hr-role{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px;border-radius:18px;background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px var(--shadow),0 10px 24px -20px var(--shadow-strong);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s}
button.hr-role:hover{background:color-mix(in srgb,var(--surface) 92%,var(--accent-soft))}
button.hr-role:active{transform:scale(.99)}
button.hr-role:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hr-role.is-rec{box-shadow:0 0 0 2px var(--accent),0 10px 24px -18px var(--shadow-strong)}
.hr-role.is-off{cursor:default;opacity:.62;box-shadow:none;background:var(--surface-2)}
.hr-role-face{flex:none}
.hr-role-av{display:block;width:52px;height:52px;border-radius:16px}
.hr-role-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hr-role-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.hr-role-name{font-weight:700;font-size:15.5px;line-height:1.3;word-break:keep-all}
.hr-role-one{font-size:14px;color:var(--ink-2);line-height:1.45;word-break:keep-all}
.hr-role-ex{display:flex;flex-direction:column;gap:0;font-size:13px;color:var(--ink-3);line-height:1.5;word-break:keep-all}
.hr-role-needs{font-size:12.5px;color:var(--ink-3);word-break:keep-all}
.hr-role .hr-chev{align-self:center}

/* 5자리가 다 찼을 때 */
.hr-full{margin:0 0 8px;padding:12px 14px;border-radius:14px;background:var(--appr-bg);color:var(--appr-ink);font-size:14px;word-break:keep-all}
.hr-agent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hr-agent-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 4px}
.hr-agent-av{display:block;width:36px;height:36px;border-radius:50%;flex:none}
.hr-agent-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hr-agent-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-agent-sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-agent-row .btn{flex:none}

/* 문 ② ③ (작게) */
.hr-door-alt{display:flex;flex-direction:column;gap:8px}
.hr-door-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:14px;background:var(--surface-2);cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.hr-door-row:hover{background:color-mix(in srgb,var(--surface-2) 85%,var(--line))}
.hr-door-row:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hr-door-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hr-door-title{font-weight:700;font-size:14.5px}
.hr-door-sub{font-size:12.5px;color:var(--ink-3);word-break:keep-all}

/* 업무 고르기 (A3) */
.hr-friend{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.hr-friend-av{display:block;width:64px;height:64px;border-radius:20px;flex:none}
.hr-friend-face{display:block;width:44px;height:44px;border-radius:50%;flex:none}
.hr-friend-txt{min-width:0}
.hr-friend-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.3px;word-break:keep-all}
.hr-friend-quote{margin:4px 0 0;font-size:13.5px;color:var(--ink-2);word-break:keep-all}
.hr-friend.is-small .hr-q{margin:0}
.hr-q{margin:16px 0 8px;font-size:16px;font-weight:700;line-height:1.4;word-break:keep-all}
.hr-q:focus{outline:none}
.hr-opts{display:flex;flex-direction:column;gap:8px}
.hr-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px;border-radius:16px;background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px var(--shadow);-webkit-tap-highlight-color:transparent}
.hr-opt.is-main{background:var(--accent-soft);box-shadow:none}
.hr-opt.is-main .hr-opt-title{color:var(--accent-text)}
.hr-opt.is-plain{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.hr-opt:hover:not(:disabled){filter:brightness(.98)}
.hr-opt:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hr-opt:disabled{cursor:default;opacity:.55}
.hr-opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hr-opt-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:700;font-size:15px}
.hr-opt-one{font-size:13.5px;color:var(--ink-2);word-break:keep-all}
.hr-opt-meta{font-size:12.5px;color:var(--ink-3)}
.hr-link{margin-top:12px;padding-left:0;padding-right:0}

/* 프로필 카드 (A5) */
.hr-prof{margin-top:12px;padding:16px;border-radius:22px;background:var(--surface);box-shadow:0 1px 2px var(--shadow),0 10px 24px -20px var(--shadow-strong)}
.hr-prof-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hr-prof-av{display:block;width:56px;height:56px;border-radius:18px;flex:none}
.hr-prof-who{min-width:0}
.hr-prof-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.3px;word-break:keep-all}
.hr-prof-name:focus{outline:none}
.hr-prof-role{margin:2px 0 0;font-size:13.5px;color:var(--ink-2)}
.hr-items{list-style:none;margin:4px 0 0;padding:0}
.hr-item{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line)}
.hr-item-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hr-item-label{font-size:12.5px;color:var(--ink-3)}
.hr-item-val{font-size:14.5px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.hr-fix{flex:none;margin-right:-8px;color:var(--accent-text)}
.hr-block{margin-top:16px}
.hr-block h4{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--ink-2)}
.hr-bullets{margin:0;padding-left:18px;font-size:14px;line-height:1.55;word-break:keep-all}
.hr-bullets li::marker{color:var(--ink-3)}
.hr-cost{margin:0;font-size:14px;color:var(--ink-2);word-break:keep-all}
.hr-cost b{color:var(--ink);font-weight:700}

/* 첫 일 제안 (A7) */
.hr-first{margin-top:12px;padding:16px;border-radius:18px;background:var(--surface);box-shadow:0 1px 2px var(--shadow)}
.hr-first-title{margin:0;font-weight:700;font-size:16px;word-break:keep-all}
.hr-first-text{margin:4px 0 0;font-size:14px;color:var(--ink-2);word-break:keep-all}
.hr-first-meta{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}
.hr-direct .field{margin-top:4px}

/* =========================================================
   친구 시트 "업무·프로필" 칸 (목록형, 카드 안 카드 없음)
   ========================================================= */
.hr-ps{display:flex;flex-direction:column;gap:4px;min-width:0}
.hr-ps-sum{margin:0;font-size:14.5px;word-break:keep-all}
.hr-ps-sum b{font-weight:700}
.hr-ps-ver{color:var(--ink-3);font-size:12.5px}
.hr-ps-rules{margin:0;font-size:12.5px;color:var(--ink-3);word-break:keep-all}
.hr-ps-h{margin:12px 0 0;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.hr-ps-text{margin:0;font-size:14px;color:var(--ink);word-break:keep-all}
.hr-ps-duties{list-style:none;margin:0;padding:0}
.hr-ps-duty{padding:8px 0;border-bottom:1px solid var(--line)}
.hr-ps-duty:last-child{border-bottom:0}
.hr-ps-duty-main{display:flex;align-items:center;gap:8px;min-height:40px}
.hr-ps-duty-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hr-ps-duty-title{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-ps-duty-sub{font-size:12.5px;color:var(--ink-3)}
.hr-ps-duty-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hr-ps-now{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hr-ps-now-btns{display:flex;gap:8px}
.hr-ps-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:8px}
.hr-ps-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* =========================================================
   처음 시작 갈림길 (§2.1)
   ========================================================= */
.hr-fork{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.hr-fork-lead{margin:0 0 4px}
.hr-fork-main,.hr-fork-alt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s;word-break:keep-all}
.hr-fork-main{padding:20px;border-radius:22px;background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--accent) 80%,transparent)}
.hr-fork-main:hover{background:color-mix(in srgb,var(--accent) 90%,#000)}
.hr-fork-main .hr-fork-title{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.3px;line-height:1.3}
.hr-fork-main .hr-fork-desc{font-size:14.5px;line-height:1.5;opacity:.92}
.hr-fork-alt{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--ink);min-height:56px}
.hr-fork-alt:hover{background:var(--surface)}
.hr-fork-alt .hr-fork-title{font-weight:700;font-size:15px;line-height:1.35}
.hr-fork-alt .hr-fork-desc{font-size:13px;color:var(--ink-3)}
.hr-fork-main:active,.hr-fork-alt:active{transform:scale(.99)}
.hr-fork-main:focus-visible,.hr-fork-alt:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hr-fork-browse{align-self:center;margin-top:4px}
.hr-ob-card{padding:16px}

@media (max-width:359px){
  .hr-iv-say{font-size:17.5px}
  .hr-chip{padding:10px 14px;font-size:14.5px}
  .hr-fork-main{padding:16px}
  .hr-role{padding:14px}
  .hr-iv-friend{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .hr-chip,.hr-role,.hr-fork-main,.hr-fork-alt,.hr-dots i{transition:none}
}