/* 41-onboarding.css — 처음 설정(#/welcome) 화면. 프로토타입 public/onboarding-proto/v2.html 을 v2 셸 안으로 옮긴 것(#1813).
   토큰은 01-base 것만 쓴다. 클래스는 전부 ob- 접두 — 전역 .chip/.btn/.card 와 겹치지 않게. 사이드바는 실제 것(40-v2.css). */
.ob-root{ --ghost:#D5DCE8; --blue-soft:#EEF5FF; --hover:#F6FAFF; --card:#FFFFFF; --shadow:0 1px 2px rgba(21,35,59,.05), 0 4px 14px rgba(21,35,59,.07);
  display:flex; flex-direction:column; flex:1; min-height:0; height:100%; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; position:relative }
.ob-root *{box-sizing:border-box}
/* 버튼 리셋 — **명시도를 0 으로 눕힌다**(`:where()`).
   ⚠ 이식(3ad440e7) 때 프로토의 `button{…}`(0,0,1)을 `.ob-root button`(0,1,1)로 감쌌는데, 그 순간
   이 리셋이 `.ob-btn-pri`·`.ob-opt-card`·`.ob-q-skip`·`.ob-chip`(전부 0,1,0)을 **이겨버렸다** —
   색과 배경이 통째로 inherit/none 이 돼 파란 버튼이 맨 글자로, 카드가 테두리 없는 줄로 보였다
   (실측 2026-08-26 실서비스·프리뷰). 프로토가 멀쩡했던 이유가 이 한 글자 차이다.
   `:where(.ob-root)` 는 명시도에 0 을 기여하므로 프로토의 `button{…}` 과 정확히 같은 무게가 된다. */
:where(.ob-root) button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.ob-root input{font:inherit; color:inherit}
.ob-root b{font-weight:600}
/* ═══ 노션을 참조한 온보딩 v2 — 3막 구조 (#1813, 2026-08-24)
   막1 이름만(민낯) · 막2 왼쪽 사이드바가 유령으로 서 있고 답할수록 실체가 됨 · 막3 컨설팅이 곧 채팅.
   문구는 기존 프로토(교정 31건 반영본)에서 그대로 가져왔다 — 여기서 새로 쓴 문구는 주석에 [새문구] 표시. */


/* ── 오른쪽 본문 ─────────────────────────────────────────────── */
.ob-main{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}
.ob-crumb{display:flex; align-items:center; gap:6px; padding:10px 16px; font-size:13px; color:var(--ink-sub); border-bottom:1px solid transparent; min-height:41px}
/* 막1(이름)은 민낯이라 빵부스러기를 숨긴다 — 다만 **나가는 문은 남긴다**(#2171).
   종전엔 줄 전체를 숨겨서, 첫 화면에 떨어진 사람은 스스로 나갈 길이 아예 없었다. */
/*  ⚠ visibility 가 아니라 display 로 걷는다 — visibility 는 자리를 남겨서, 나가는 문의 margin-left:auto 가
    빈 자리 뒤에서 멈춘다(줄 가운데에 뜬다). 줄 높이는 .ob-crumb 의 min-height 가 지킨다. */
.ob-root.ob-stage-name .ob-crumb>*:not(.ob-q-exit){display:none}
.ob-crumb .ob-lm{width:18px;height:18px;font-size:9px}
.ob-crumb .ob-sep{color:var(--ghost)}

/* 막1·막2 — 가운데 질문 기둥 (노션 p1~p4 참조) */
.ob-qwrap{flex:1; overflow-y:auto; display:flex; justify-content:center}
.ob-qcol{width:min(560px, 92%); padding:8vh 0 60px; animation:rise .45s ease-out}
.ob-qcol.ob-wide{width:min(820px, 94%)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.ob-q-ic{width:40px; height:40px; border-radius:50%; background:var(--bg-success); border:1px solid #CDEFE3; display:grid; place-items:center; color:var(--mint-deep); font-size:15px; font-weight:800; margin-bottom:14px}
.ob-q-prog{display:flex; gap:4px; margin:0 0 22px; width:96px}
.ob-q-prog i{flex:1; height:3px; border-radius:2px; background:var(--ghost)}
.ob-q-prog i.ob-on,.ob-q-prog button.ob-on{background:var(--ink)}
.ob-q-lead{font-size:14px; color:var(--ink-sub); margin-bottom:8px}
.ob-q-title{font-size:26px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px}
.ob-q-help{font-size:14px; color:var(--ink-sub); margin-bottom:26px}
/* 노션식 선택 카드 */
.ob-opt-cards{display:flex; flex-direction:column; gap:10px}
.ob-opt-card{display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:var(--card); transition:border-color .12s, box-shadow .12s}
.ob-opt-card:hover{border-color:#cfcecb; box-shadow:var(--shadow)}
.ob-opt-card.ob-on{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.ob-opt-card .ob-oc-ic{width:22px; display:grid; place-items:center; flex:0 0 22px}
.ob-blogo{width:17px; height:17px; flex:none; display:block}
.ob-opt-cards .ob-oc-ic .ob-blogo{width:20px; height:20px}
.ob-oc-st{margin-left:auto; display:grid; place-items:center; width:16px; flex:0 0 16px}
.ob-opt-card .ob-oc-t{font-weight:600; font-size:14.5px}
.ob-opt-card .ob-oc-d{display:block; font-size:12.5px; color:var(--muted); margin-top:1px}
.ob-opt-card .ob-oc-chk{margin-left:auto; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--ghost); flex:0 0 16px; display:grid; place-items:center; color:#fff; font-size:10px}
.ob-opt-card.ob-on .ob-oc-chk{background:var(--blue); border-color:var(--blue)}
.ob-opt-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; margin-bottom:10px}
.ob-opt-grid .ob-opt-card{padding:9px 11px; gap:9px}
.ob-opt-grid .ob-opt-card .ob-oc-t{font-size:13.5px}
.ob-opt-group{margin:2px 0 4px; font-size:11.5px; font-weight:600; color:var(--muted)}
.ob-q-write{display:flex; gap:8px; margin-top:12px}
.ob-q-write input{flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 12px; outline:none}
.ob-q-write input:focus{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.ob-btn{display:block; width:100%; text-align:center; border-radius:8px; padding:10px 14px; font-weight:600; font-size:14px; margin-top:18px}
.ob-btn-pri{background:var(--blue); color:#fff}
.ob-btn-pri:hover{background:#1b74cc}
.ob-btn-pri:disabled{background:var(--blue-soft); color:#9cc7ec; cursor:default}
.ob-btn-sub{background:#f1f1ef; color:var(--ink-sub); margin-top:8px}
.ob-btn-sub:hover{background:#e9e9e6}
.ob-btn-inline{width:auto; display:inline-block; padding:8px 14px}
.ob-q-skip{display:block; margin:16px auto 0; font-size:13px; color:var(--muted)}
.ob-q-skip:hover{color:var(--ink-sub); text-decoration:underline}
.ob-q-fine{margin-top:18px; font-size:12px; color:var(--muted); text-align:center}
.ob-benefit{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-sub); padding:3px 0}
.ob-benefit::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--muted-2); flex:none}
.ob-benefits{margin:0 0 18px}

/* 막3 — 채팅 (노션 p5·p6 참조) */
.ob-chat{flex:1; overflow-y:auto; display:flex; justify-content:center}
.ob-thread{width:min(680px,94%); padding:26px 0 20px; display:flex; flex-direction:column; gap:14px}
.ob-msg{display:flex; gap:10px; animation:rise .35s ease-out}
.ob-msg .ob-ava{width:26px; height:26px; border-radius:50%; background:var(--bg-success); border:1px solid #CDEFE3; flex:0 0 26px; display:grid; place-items:center; color:var(--mint-deep); font-size:11px; font-weight:800; margin-top:2px}
.ob-msg .ob-body{max-width:86%; font-size:14.5px; line-height:1.65}
.ob-msg .ob-body p{margin-bottom:6px}
.ob-msg .ob-body p:last-child{margin-bottom:0}
.ob-msg.ob-user{justify-content:flex-end}
.ob-msg.ob-user .ob-body{background:#f1f1ef; border-radius:14px; padding:8px 14px; font-size:14px}
.ob-chips{display:flex; flex-wrap:wrap; gap:8px; padding-left:36px; animation:rise .35s ease-out}
.ob-chip{border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:13.5px; font-weight:500; background:var(--card)}
.ob-chip:hover{background:var(--hover); border-color:#cfcecb}
.ob-chip.ob-cta{background:var(--blue-soft); color:var(--blue); border-color:transparent; font-weight:600}
.ob-chip.ob-cta:hover{background:#d8ebfb}
.ob-chip.ob-ghost{color:var(--ink-sub)}
.ob-tags{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px}
.ob-tag{border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:12.5px; color:var(--ink-sub); background:var(--canvas)}
.ob-tag b{color:var(--ink); font-variant-numeric:tabular-nums}
.ob-excard{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:8px 0 0; cursor:pointer; transition:border-color .12s, box-shadow .12s; background:var(--card)}
.ob-excard:hover{border-color:#cfcecb; box-shadow:var(--shadow)}
.ob-excard .ob-xt{font-size:14px; font-weight:600; margin-bottom:5px}
.ob-excard .ob-xd{font-size:12.5px; color:var(--muted)}
.ob-excard .ob-xd b{color:var(--amber); font-weight:600}
.ob-fine{font-size:12.5px; color:var(--muted); padding-left:36px}
.ob-readline{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-sub)}
.ob-readbar{flex:0 0 120px; height:4px; border-radius:2px; background:var(--line-net); overflow:hidden}
.ob-readbar i{display:block; height:100%; background:var(--blue); width:0; transition:width .25s linear}

/* 채팅 입력 (노션 'Describe your own' 참조) */
.ob-composer{padding:12px 0 18px; display:flex; justify-content:center; border-top:1px solid transparent}
.ob-composer-in{width:min(680px,94%); border:1.5px solid var(--blue); border-radius:14px; padding:10px 14px 8px; box-shadow:0 4px 18px rgba(35,131,226,.08)}
.ob-composer-in input{width:100%; border:0; outline:none; font-size:14.5px; padding:2px 0 8px; background:none}
.ob-composer-row{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px}
.ob-composer-row .ob-send{margin-left:auto; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px}
.ob-composer-row .ob-send:disabled{background:var(--ghost); cursor:default}
.ob-root:not(.ob-stage-chat) .ob-composer{display:none}
.ob-chat, .ob-composer{background:var(--bg)}
.ob-root:not(.ob-stage-chat) .ob-chat{display:none}
.ob-root.ob-stage-chat .ob-qwrap{display:none}

.ob-toast{position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:100px; padding:8px 18px; font-size:13px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:60}
.ob-toast.ob-on{opacity:1}

/* 막1(이름) — 노션 p1 처럼 아무것도 없는 가운데 카드. 셸(사이드바·손잡이·탭 줄)을 잠깐 숨긴다. */
/* 막1 = 민낯(사이드바·레일·탭 없이 가운데 한 칸).
   ⚠ **열 폭을 0 으로 만드는 방식은 못 쓴다.** 두 가지가 동시에 어긋난다:
    ① 명시도·순서 — `#v2-root.rail-mode.no-aside`(1,2,0)가 `#v2-root.ob-bare`(1,1,0)를 이기고,
       같은 명시도로 맞춰도 47-v2-rail.css 가 이 파일보다 **뒤에** 실려 순서에서 진다.
    ② 자동 배치 — 숨긴 형제(.v2-side·손잡이·레일)가 display:none 이면 칸을 안 먹어 본문이 **한 칸씩 당겨진다**.
   그 둘이 겹쳐 본문이 사이드바(316px)·레일(68px) 칸에 앉았다(실측 2026-08-26: 실서비스·프리뷰 양쪽).
   그래서 폭을 다투지 않고 **본문을 전 열에 걸친다** — 열이 몇 개든(5열·레일 6열), 어느 규칙이 이기든 같다. */
/*  ⚠ 막1에서는 **그리드 자체를 끈다.** 열 폭·열 수·grid-column 을 규칙 하나씩 이기려던 시도가 세 번
     연달아 졌다(레일 6열 · 열 어긋남 · has-topbar 의 grid-area). 셸은 상태에 따라 열 정의를 계속 바꾸는데,
     민낯은 «가운데 한 칸» 이라 애초에 그리드가 필요 없다. display:block 이면 숨긴 형제는 그대로 빠지고
     본문만 폭을 다 쓴다 — 셸이 열을 어떻게 바꾸든 무관해진다. */
#v2-root.ob-bare.has-topbar, #v2-root.ob-bare { display: block; padding-left: 0; }
#v2-root.ob-bare > .v2-main { width: 100%; height: 100vh; }
#v2-root.ob-bare .v2-side, #v2-root.ob-bare > .v2-split-x, #v2-root.ob-bare .v2-tabs, #v2-root.ob-bare .v2-tl-btn,
#v2-root.ob-bare > .v2-rail,
/* 맨 윗줄(뒤로·앞으로·검색·레일 토글)은 **사이드바 밖**에 산다 — 브라우저는 .v2-topbar, 데스크톱은 창 제목줄
   (main.ts navHost). 그래서 위 사이드바 규칙으로는 안 지워지고, 막1에 그 줄만 남아 본문을 오른쪽으로 밀었다
   (원준님 실측 2026-08-27). 민낯은 **가운데 한 칸**이어야 하므로 이 줄도 함께 걷는다. */
/*  ⚠ `.has-topbar` 까지 붙여 **명시도를 하나 더** 올린다. 43-v2-topbar-search.css 의
     `#v2-root.has-topbar > .v2-topbar { display:flex }` 와 동점(1,2,1)이면 나중에 실리는 43 이 이긴다
     — 이 파일(41)이 앞이라 순서로는 못 이긴다. 이 화면에서 두 번 밟은 함정이다(레일·버튼 리셋). */
#v2-root.ob-bare.has-topbar > .v2-topbar, #v2-root.ob-bare > .v2-topbar { display: none; }
/* (좁은 화면에서 레일이 fixed 로 서며 붙는 padding-left 도 위 규칙이 함께 걷는다.) */

/* 되돌아가기 + 파일 받는 자리 (2026-08-25 플로우 재배치 — 로컬 업로드를 앞으로, 앱 연결을 뒤로) */
.ob-q-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ob-q-back{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 9px;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer}
.ob-q-back[hidden]{display:none}
/* 나가는 문(#2171) — 줄의 오른쪽 끝. [← 이전] 이 함께 보일 때만 그 뒤에 붙는다(그때는 [← 이전] 이 밀린다). */
.ob-q-exit{margin-left:auto}
.ob-q-back:not([hidden])~.ob-q-exit{margin-left:8px}
.ob-q-back:hover{color:var(--ink);background:var(--bg-tint);border-color:var(--line)}
.ob-q-prog{gap:5px;width:118px}
.ob-q-prog button.ob-go{cursor:pointer}
.ob-q-prog button.ob-go:hover{background:var(--blue)}
.ob-drop{border:1.5px dashed var(--line-net);border-radius:14px;padding:26px 20px;text-align:center;transition:border-color .15s,background .15s;display:flex;flex-direction:column;align-items:center;gap:6px}
.ob-drop:hover,.ob-drop.ob-over{border-color:var(--blue);background:var(--blue-soft)}
.ob-drop.ob-has{padding:18px 20px;border-style:solid}
.ob-drop-t{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.ob-drop-d{display:block;font-size:12.5px;color:var(--muted)}

/* AI 잇기 — setup-token 붙여넣기 (#1813). 토큰은 화면에 남기지 않는다(type=password). */
.ob-tok{display:flex; flex-direction:column; gap:9px; margin:2px 0 16px}
.ob-tok ol{margin:0; padding-left:19px; font-size:13.5px; color:var(--ink-sub); line-height:1.85}
.ob-tok code{background:var(--line-row); border-radius:5px; padding:2px 7px; font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}
.ob-tok input{border:1px solid var(--line); border-radius:9px; padding:11px 13px; outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
.ob-tok input:focus{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.ob-tok .ob-err{font-size:13px; color:#C0392B; min-height:1px}
.ob-tok .ob-ok{font-size:13px; color:var(--mint-text)}
/* #1879 — 사실을 덧붙이는 줄(다른 AI 가 이미 이어져 있음·판정 불가 등). 오류(빨강)도 성공(민트)도 아닌
   '그냥 알려 드리는 것' 이라 본문과 같은 톤으로 낮춰 둔다. */
.ob-tok .ob-note{font-size:13px; color:var(--ink-sub); line-height:1.7}
.ob-tok .ob-note code{font-size:12px}

/* ══ #1879 «내 컴퓨터에 잇기» — 설치 걸음표 · 명령 한 줄 · OS 토글 ══════════════════
   기준은 리브 페르소나의 성립 조건("컴맹인 중학생도 따라올 수 있어야 한다")이다. 그래서 이 블록의
   시각 규칙은 셋뿐 — ① 걸음마다 번호가 눈에 먼저 들어온다 ② 붙여넣을 줄은 다른 무엇과도 안 헷갈리게
   한 덩어리로 떨어져 있다 ③ 누를 키는 본문 글자와 다르게 보인다. 장식은 넣지 않는다. */
.ob-ins-list{display:flex; flex-direction:column; gap:22px; margin:0 0 22px}
.ob-ins{position:relative; padding-left:34px}
.ob-ins::before{content:attr(data-n); position:absolute; left:0; top:0; width:23px; height:23px;
  border-radius:50%; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums}
.ob-ins-t{display:block; font-size:15px; font-weight:700; margin:1px 0 7px; line-height:1.45}
.ob-ins-p{font-size:13.5px; color:var(--ink-sub); line-height:1.8; margin:0 0 8px}
.ob-ins-ul{margin:0 0 8px; padding-left:17px; font-size:13.5px; color:var(--ink-sub); line-height:1.8}
.ob-ins-ul li{margin-bottom:3px}
.ob-ins-n{font-size:12.5px; color:var(--muted); line-height:1.75; margin:0}
.ob-ins-n2{color:var(--muted)}
.ob-ins-n code,.ob-ins-ul code{background:var(--line-row); border-radius:5px; padding:2px 6px; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}

/* 붙여넣을 줄 — 길면 감싸지 말고 가로로 흐르게 둔다(한 줄이라는 사실이 눈에 보여야 한다). */
.ob-cmd{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px;
  background:var(--line-row); padding:9px 9px 9px 12px; margin:0 0 10px}
.ob-cmd code{flex:1; min-width:0; overflow-x:auto; white-space:nowrap; font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}
.ob-cmd-copy{flex:none; border:1px solid var(--line); border-radius:7px; background:var(--card);
  padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ink-sub)}
.ob-cmd-copy:hover{border-color:#cfcecb; color:var(--ink)}
.ob-cmd-copy.ob-on{border-color:var(--blue); color:var(--blue)}

.ob-kbd{display:inline-block; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  background:var(--card); padding:1px 6px; font-size:12px; font-weight:600; color:var(--ink);
  font-family:inherit; line-height:1.6; white-space:nowrap}

.ob-tok .ob-fine2{font-size:12.5px; color:var(--muted)}
/* 터미널 갈래 접힘 — 주된 길(앱) 아래에 조용히. 여는 사람만 본다. */
.ob-ins-alt{margin-top:22px; border-top:1px solid var(--line); padding-top:14px}
.ob-ins-alt>summary{font-size:13px; color:var(--muted); cursor:pointer; list-style:none}
.ob-ins-alt>summary::-webkit-details-marker{display:none}
.ob-ins-alt>summary::before{content:'＋ '; color:var(--ghost)}
.ob-ins-alt[open]>summary::before{content:'－ '}
.ob-ins-alt>summary:hover{color:var(--ink-sub)}
.ob-ins-alt .ob-ins-n{margin:10px 0 8px}

/* ── #1879 «가져올 곳 잇기» 실배선 ─────────────────────────────────────────────
   고를 수 없는 카드(이미 이어짐 · 회사가 아직 안 열어 둠)와, 카드 아래에서 펼쳐지는 «글자 받아 오기». */
.ob-opt-card.ob-locked{cursor:default}
.ob-opt-card.ob-locked:hover{border-color:var(--line); box-shadow:none}
/* 회사가 안 열어 둔 것만 흐리게 — 이미 이어진 것은 흐리면 '꺼졌다'로 읽힌다(정반대 뜻이 된다). */
.ob-opt-card.ob-locked[data-ask]{opacity:.66; cursor:pointer}
/* 곧 지원(#1813) — **눌러도 되는 것처럼 보이면 안 된다.** 흐리게 + 점선 테두리로 «아직 아니다» 를 형태로 말하고,
   설명 줄은 대기 색(앰버)으로 둔다. 체크 자리는 아예 비운다(고를 수 없으므로). */
.ob-opt-card.ob-soon{opacity:.58; background:var(--bg); border-style:dashed}
.ob-opt-card.ob-soon:hover{border-color:var(--line); box-shadow:none}
.ob-opt-card.ob-soon .ob-oc-d{color:var(--amber, #C98A16); font-weight:600}
.ob-opt-card.ob-soon .ob-blogo{filter:grayscale(1)}
.ob-opt-card.ob-locked[data-ask]:hover{opacity:1; border-color:#cfcecb; box-shadow:var(--shadow)}
/* 펼쳐 둔 카드 — 아래 패널과 한 덩어리로 읽히게 아랫모서리를 편다. */
.ob-opt-card.ob-open{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue);
  border-bottom-left-radius:0; border-bottom-right-radius:0}
.ob-tok-in{margin:-10px 0 0; padding:14px 15px 16px; background:var(--card);
  border:1px solid var(--blue); border-top:0; border-radius:0 0 10px 10px}
.ob-tok-in ol{margin:2px 0}
.ob-tok-in .ob-btn{margin-top:0}
.ob-tok-in .ob-btn-inline{align-self:flex-start}
.ob-tok-in .ob-err:empty{display:none}
.ob-root a.ob-btn{text-decoration:none}

/* 자료 올리기 — 고르기 버튼 둘을 드롭존 안에 나란히(팝오버 메뉴 폐기, #1813).
   폴더 올리기가 메뉴 안에 숨어 있어 사람이 못 찾았다 — 고를 것이 둘뿐이면 숨기지 않는다. */
.ob-drop-pick{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.ob-drop-pick .ob-btn{margin-top:0}