/* OmicsPharm 공통 레이아웃: 헤더(GNB) · 푸터 · 토스트
   Figma: 04_Resource/Component — Header Navigation (130:27973), Footer (458:31963), toast (1120:43102)
   기존 페이지 CSS와 충돌하지 않도록 모든 클래스에 op- 접두사를 쓴다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --op-teal-50:#edfefa; --op-teal-500:#00bba6; --op-teal-600:#009788; --op-teal-700:#00786e;
  --op-bg-green:#f6faf9; --op-gray-50:#fafafa; --op-gray-100:#f5f5f5; --op-gray-200:#e5e5e5; --op-gray-300:#d4d4d4;
  --op-gray-400:#a3a3a3; --op-gray-500:#737373; --op-gray-600:#525252; --op-gray-700:#404040; --op-red-600:#f00011;
  --op-shadow2:0 4px 8px #00000014, 0 0 2px #0000000a;
  --op-toast:#0f172acc;
  --op-font:"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
}

/* ── Header Navigation ── */
/* 기본은 반투명 + 블러, 스크롤을 내리면 흰색 배경 (site.js가 .is-scrolled 토글) */
.op-gnb { position:sticky; top:0; z-index:50; height:70px; padding:0 60px; background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background-color .2s;
  font-family:var(--op-font); color:#000; -webkit-font-smoothing:antialiased; box-sizing:border-box; }
.op-gnb { border-bottom:1px solid var(--op-gray-200); } /* 로그인 여부와 관계없이 gray 200 경계선 (Figma login 상태엔 없었으나 통일) */
.op-gnb.is-scrolled, .op-drawer-open .op-gnb { background:#fff; }
.op-gnb *, .op-footer * { box-sizing:border-box; }
.op-gnb a, .op-footer a { color:inherit; text-decoration:none; }
.op-gnb button { font:inherit; border:0; background:none; padding:0; cursor:pointer; color:inherit; }
.op-gnb-in { max-width:1320px; height:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.op-gnb-logo img { display:block; width:190px; height:20px; } /* 219×23 → 약 87% */
.op-gnb-menu { display:flex; gap:48px; height:100%; align-items:center; }
.op-gnb-menu a { display:flex; align-items:center; gap:8px; height:70px; font-size:16px; font-weight:500; line-height:22px; white-space:nowrap; }
.op-gnb-menu a:hover, .op-gnb-menu a.on { color:var(--op-teal-600); }
.op-gnb-menu img { width:16px; height:16px; }
/* 메가메뉴 (dropdown_item 342:28061) */
.op-dd { position:relative; height:100%; display:flex; align-items:center; }
.op-gnb .op-dd-btn { display:flex; align-items:center; gap:8px; height:70px; font-size:16px; font-weight:500; line-height:22px; white-space:nowrap; } /* .op-gnb button의 font:inherit보다 우선 */
.op-dd-btn img { transition:transform .15s; }
.op-dd.open .op-dd-btn, .op-dd-btn:hover { color:var(--op-teal-600); }
.op-dd.open .op-dd-btn img { transform:rotate(180deg); }
.op-dd-menu { position:absolute; top:calc(100% + 8px); left:-1px; min-width:205px; padding:10px; background:#fff; border-radius:8px; box-shadow:var(--op-shadow2);
  display:none; flex-direction:column; z-index:60; }
.op-dd-menu::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; } /* 버튼과 메뉴 사이 틈에서 hover가 끊기지 않게 */
.op-dd.open .op-dd-menu { display:flex; }
.op-dd-menu a { display:flex; align-items:center; height:48px; padding:0 8px; border-radius:4px; font-size:16px; font-weight:500; line-height:22px; color:#000; white-space:nowrap; } /* GNB 메뉴와 같은 16px Medium */
.op-dd-menu a:hover { background:var(--op-gray-100); }
.op-dd-menu a:active { background:var(--op-gray-200); }
.op-dd-menu a.on { color:var(--op-teal-600); } /* 선택 표시는 글자색만 — 배경은 hover일 때만 */
.op-gnb .op-lang .op-dd-btn { height:auto; }
.op-lang .op-dd-btn img { transform:none !important; }
.op-lang .op-dd-menu { left:-1px; top:calc(100% + 31px); } /* 다른 메가메뉴와 같은 폭·정렬 */
.op-lang .op-dd-menu::before { top:-31px; height:31px; }
.op-gnb-cta { display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.op-gnb.is-login .op-gnb-cta { width:202px; }
.op-gnb-cta .op-ic24 { display:block; width:24px; height:24px; }
.op-gnb-cta .op-lang { height:auto; }
.op-gnb-login { display:inline-flex; align-items:center; height:32px; font-size:16px; font-weight:500; line-height:22px; }
.op-gnb-login:hover { color:var(--op-gray-700); }
.op-gnb-join { display:inline-flex; align-items:center; justify-content:center; height:48px; min-width:84px; padding:0 16px; border-radius:8px;
  background:#000; color:#fff !important; font-size:16px; font-weight:500; line-height:22px; }
.op-gnb-join:hover { background:var(--op-gray-600); }
.op-bell { position:relative; }
.op-bell.on::after { display:block; }
.op-bell::after { display:none; content:""; position:absolute; top:1px; right:4px; width:6px; height:6px; border-radius:1000px; background:var(--op-red-600); }
.op-user { position:relative; }
.op-user > button { display:flex; align-items:center; }
.op-user > button img { display:block; width:24px; height:24px; border-radius:50%; object-fit:cover; } /* 지구본·알림 아이콘과 같은 24px (Figma 원본 36px) */
.op-user > button:hover img { filter:brightness(.8); } /* 올린 프로필 사진 */
.op-user > button:hover img[src*="user-icon.svg"] { filter:none; content:url(../main/user-icon-hover.svg?v=2); } /* 기본 아이콘: Figma hover 상태(1088:36000) */
.op-user-menu { position:absolute; top:calc(100% + 12px); right:0; min-width:220px; padding:8px; background:#fff; border-radius:8px;
  box-shadow:0 0 2px #00000029, 0 16px 24px #00000029; display:none; }
.op-user.open .op-user-menu { display:block; }
.op-user-menu .who { padding:10px 12px 12px; border-bottom:1px solid var(--op-gray-200); margin-bottom:6px; }
.op-user-menu .who b { display:block; font-size:14px; font-weight:500; line-height:20px; word-break:break-all; }
.op-user-menu .who span { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:8px; border:1px solid var(--op-teal-600);
  color:var(--op-teal-600); font-size:12px; font-weight:500; line-height:18px; letter-spacing:-.12px; }
.op-switch { padding:4px 12px 12px; border-bottom:1px solid var(--op-gray-200); margin-bottom:6px; }
.op-switch p { font-size:12px; line-height:18px; color:var(--op-gray-500); margin-bottom:6px; }
.op-switch p.sub { margin-top:10px; }
/* 분석파트너 인증 표시 */
.op-vchip, .op-user-menu .who .vchip { display:inline-flex; align-items:center; gap:3px; margin-left:4px; padding:2px 8px; border-radius:8px; border:1px solid var(--op-gray-300); background:var(--op-gray-100); color:var(--op-gray-500); font-size:12px; font-weight:500; line-height:18px; letter-spacing:-.12px; }
/* 인증: badge_basic blue · tertiary (Figma 605:41267) — 테두리 없음(배경색과 같게 두어 높이는 다른 배지와 같은 24px), 아이콘은 유지 */
.op-vchip.ok, .op-user-menu .who .vchip.ok { border-color:#edf6ff; background:#edf6ff; color:#0065f4; }
.op-vchip.ok::before, .op-user-menu .who .vchip.ok::before { content:""; width:12px; height:12px; background:currentColor; -webkit-mask:url(../main/ic-seal-check.svg) center/contain no-repeat; mask:url(../main/ic-seal-check.svg) center/contain no-repeat; }
.op-vchip.ok.lg { gap:4px; padding:2px 8px 2px 2px; border:0; font-size:14px; line-height:20px; letter-spacing:0; } /* 사업자등록증 '인증완료' badge_basic (Figma 1590:30382): SealCheck 16 + Body/Small/M */
.op-vchip.ok.lg::before { width:16px; height:16px; }
.op-switch div { display:flex; gap:4px; padding:3px; border-radius:8px; background:var(--op-gray-100); }
.op-user-menu .op-switch button { flex:1; width:auto; padding:6px 8px; border-radius:6px; text-align:center; font-size:13px; font-weight:500; color:var(--op-gray-500); }
.op-user-menu .op-switch button:hover { background:#fff; color:#000; }
.op-user-menu .op-switch button.on { background:#fff; color:var(--op-teal-600); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.op-user-menu a, .op-user-menu button { display:block; width:100%; text-align:left; padding:10px 12px; border-radius:4px; font-size:14px; line-height:20px; }
.op-user-menu a:hover, .op-user-menu button:hover { background:var(--op-gray-100); }

/* ── 햄버거 메뉴 (900px 미만) ── */
.op-burger { display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; }
.op-burger:hover { background:var(--op-gray-100); }
.op-burger img { width:24px; height:24px; }
.op-burger .i-close, .op-burger[aria-expanded="true"] .i-open { display:none; }
.op-burger[aria-expanded="true"] .i-close { display:block; }
.op-drawer { position:fixed; top:70px; left:0; right:0; bottom:0; z-index:49; overflow-y:auto; background:#fff; padding:0 0 32px; font-family:var(--op-font); -webkit-font-smoothing:antialiased; }
.op-drawer[hidden] { display:none; }
.op-drawer a { color:inherit; text-decoration:none; }
.op-drawer button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left; }
.op-drawer-open, .op-drawer-open body { overflow:hidden; }
/* 메뉴 한 줄 = 화면 폭 전체, 모두 같은 크기·굵기 */
.op-dr-nav { display:flex; flex-direction:column; }
.op-drawer .op-dr-link, .op-drawer .op-dr-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; height:56px; padding:0 20px; border-bottom:1px solid var(--op-gray-200); background:#fff; font-size:16px; font-weight:500; line-height:22px; color:#000; }
.op-dr-link:active, .op-dr-toggle:active { background:var(--op-gray-50); }
.op-dr-toggle img { width:16px; height:16px; transition:transform .15s; }
.op-dr-group.open .op-dr-toggle { color:var(--op-teal-600); }
.op-dr-group.open .op-dr-toggle img { transform:rotate(180deg); }
.op-dr-sub { display:none; flex-direction:column; background:var(--op-gray-50); border-bottom:1px solid var(--op-gray-200); }
.op-dr-group.open .op-dr-sub { display:flex; }
.op-dr-sub a { display:flex; align-items:center; height:48px; padding:0 32px; font-size:15px; font-weight:400; line-height:22px; color:var(--op-gray-700); }
.op-dr-sub a + a { border-top:1px solid var(--op-gray-200); }
.op-dr-sub a:active { background:var(--op-gray-100); }
.op-dr-auth { display:flex; gap:8px; padding:20px; }
.op-dr-btn { flex:1; display:flex; align-items:center; justify-content:center; height:48px; border-radius:8px; background:#000; color:#fff !important; font-size:16px; font-weight:500; }
.op-dr-btn.line { background:#fff; color:#000 !important; border:1px solid var(--op-gray-300); }
/* 모바일 메뉴 맨 위 내 정보 (로그인) */
.op-dr-me { display:flex; flex-direction:column; gap:16px; padding:20px; background:var(--op-gray-50); border-bottom:1px solid var(--op-gray-200); }
.op-dr-me .who { display:flex; align-items:center; gap:12px; }
.op-dr-me .who > img { width:48px; height:48px; flex:none; border-radius:50%; object-fit:cover; }
.op-dr-me .who > div { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.op-dr-me .who b { font-size:17px; font-weight:600; line-height:24px; }
.op-dr-me .who .role { padding:2px 8px; border-radius:8px; border:1px solid var(--op-teal-600); color:var(--op-teal-600); font-size:12px; font-weight:500; line-height:16px; }
.op-dr-me .who .op-vchip { margin-left:0; }
.op-dr-me .who small { flex-basis:100%; font-size:13px; line-height:18px; color:var(--op-gray-500); word-break:break-all; }
.op-dr-me .bell { position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; }
.op-dr-me .bell img { width:24px; height:24px; }
.op-dr-me .bell i { position:absolute; top:8px; right:9px; width:6px; height:6px; border-radius:50%; background:#f00011; }
.op-dr-me .btns { display:flex; flex-direction:column; gap:8px; }
.op-dr-me .op-dr-btn { flex:none; height:44px; font-size:15px; }
.op-dr-btn.soft { background:var(--op-teal-50, #edfefa); color:var(--op-teal-700, #00786e) !important; border:1px solid #a6e3d9; }
/* 맨 아래 작은 로그아웃 */
.op-dr-foot { padding:20px; }
.op-drawer .op-dr-foot button { font-size:13px; line-height:18px; color:var(--op-gray-500); }

/* ── Footer ── */
.op-footer { background:var(--op-bg-green); border-top:1px solid var(--op-gray-300); padding:0 60px; font-family:var(--op-font); color:#000; -webkit-font-smoothing:antialiased; }
.op-footer-in { max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding:40px 0; }
.op-f-top { display:flex; align-items:flex-end; justify-content:space-between; }
.op-f-left { display:flex; flex-direction:column; gap:32px; }
.op-f-left > img { display:block; width:219px; height:23px; }
.op-f-info { display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:20px; }
.op-f-info div { display:flex; gap:8px; }
.op-f-info b { font-weight:500; }
.op-f-social { display:flex; gap:20px; align-items:center; }
.op-f-social .s1 { position:relative; display:block; width:24px; height:24px; border-radius:2px; background:#000; }
.op-f-social .s1 img { position:absolute; left:5px; top:5.5px; width:13px; height:13px; }
.op-f-social .s2, .op-f-social .s2 img { display:block; width:24px; height:24px; }
.op-f-social a { transition:opacity .15s; }
.op-f-social a:hover { opacity:.7; }
.op-f-line { height:0; box-shadow:0 0 0 .5px var(--op-gray-300); }
.op-f-bottom { display:flex; align-items:center; justify-content:space-between; height:25px; font-size:12px; line-height:18px; letter-spacing:-.12px; }
.op-f-bottom nav { display:flex; gap:24px; }

/* ── 오른쪽 아래 플로팅: 맨 위로 + 챗봇(상담) 자리 ── */
.op-float { position:fixed; right:40px; bottom:40px; z-index:45; display:flex; flex-direction:column; align-items:center; gap:12px; }
.op-float a, .op-float button { font:inherit; border:0; background:none; padding:0; cursor:pointer; }
.op-top { width:48px; height:48px; border-radius:50%; background:#fff !important; border:1px solid var(--op-gray-200) !important; box-shadow:var(--op-shadow2);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s; }
.op-top.show { opacity:1; visibility:visible; transform:none; }
.op-top:hover { background:var(--op-gray-50) !important; }
.op-top img { width:24px; height:24px; }
.op-chat { display:block; width:84px; height:84px; border-radius:50%; } /* Figma FAB (1088:33719). 챗봇 기능이 정해지면 교체 */
.op-chat img { display:block; width:84px; height:84px; }
.op-chat:hover { filter:brightness(.92); }
.op-drawer-open .op-float { display:none; }
@media (max-width:760px) {
  .op-float { right:16px; bottom:16px; gap:8px; }
  .op-chat, .op-chat img { width:64px; height:64px; }
  .op-top { width:44px; height:44px; }
}

/* ── Toast ── */
.op-toast { position:fixed; left:50%; bottom:40px; transform:translate(-50%, 20px); opacity:0; visibility:hidden; z-index:300; display:flex; align-items:center; gap:8px;
  width:max-content; max-width:min(600px, calc(100vw - 32px)); min-height:54px; padding:8px 16px; border-radius:12px; background:var(--op-toast); color:#fff;
  font-family:var(--op-font); font-size:14px; font-weight:400; line-height:20px; transition:opacity .2s, transform .2s, visibility .2s; }
.op-toast > img { flex:none; width:20px; height:20px; }
.op-toast span { flex:1; min-width:0; word-break:keep-all; }
.op-toast button { flex:none; display:flex; width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer; }
.op-toast button img { width:20px; height:20px; }
.op-toast.show { opacity:1; visibility:visible; transform:translate(-50%, 0); }

@media (max-width:1180px) {
  .op-gnb, .op-footer { padding-left:24px; padding-right:24px; }
  .op-gnb-menu { gap:24px; }
}
@media (max-width:899px) {
  .op-gnb-menu, .op-gnb-cta .op-lang, .op-bell, .op-user { display:none; }
  .op-gnb.is-login .op-gnb-cta { width:auto; }
  .op-gnb-cta { gap:16px; }
  .op-burger { display:flex; }
}
@media (max-width:560px) {
  .op-gnb-login, .op-gnb-join { display:none; }
  .op-gnb-logo img { width:152px; height:16px; }
}
@media (max-width:760px) {
  .op-gnb, .op-footer { padding-left:16px; padding-right:16px; }
  .op-f-top { flex-direction:column; align-items:flex-start; gap:20px; }
  .op-f-bottom { flex-direction:column; align-items:flex-start; height:auto; gap:8px; }
}



/* 페이지 진입 효과 (메인 제외, e-biogen의 AOS fade-up 참고): 페이지를 열 때 한 번, 본문 블록이 아래에서 위로 올라오며 나타남 */
@keyframes opEnter { from { opacity:0; transform:translate3d(0,100px,0); } to { opacity:1; transform:none; } }
.op-enter { animation:opEnter .8s ease both; animation-delay:var(--op-d,0s); }
@media (prefers-reduced-motion:reduce), (max-width:960px) { .op-enter { animation:none; } } /* 모바일·태블릿은 등장 효과 없이 바로 표시 */

/* 자동완성 목록 (소속·부서 등) */
.op-ac { position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:30; max-height:280px; overflow-y:auto; padding:6px; list-style:none; background:#fff; border:1px solid var(--op-gray-200); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.op-ac li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:6px; font-size:15px; line-height:22px; cursor:pointer; }
.op-ac li span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.op-ac li b { color:var(--op-teal-600); font-weight:600; }
.op-ac li small { flex:none; font-size:12px; line-height:18px; color:var(--op-gray-500); }
.op-ac li:hover, .op-ac li.on { background:var(--op-gray-100); }
.op-ac li.add span { font-weight:500; }
.op-ac li.add em { flex:none; font-style:normal; font-size:14px; font-weight:600; line-height:20px; color:var(--op-teal-600); }
.op-ac li.add:hover em, .op-ac li.add.on em { color:var(--op-teal-700); }
.op-ac li.none { cursor:default; font-size:14px; color:var(--op-gray-500); }
.op-ac li.none:hover { background:none; }

/* 휴대폰 번호 (국가번호 + 3칸) — Figma 1222:69206 */
.op-phone { display:flex; align-items:center; gap:8px; width:100%; }
div.op-phone select, div.op-phone input { height:40px; min-width:0; border:1px solid var(--op-gray-300); border-radius:8px; background-color:#fff; font:inherit; font-size:14px; line-height:20px; color:#000; }
div.op-phone select { flex:none; width:auto; padding:0 34px 0 16px; appearance:none; -webkit-appearance:none; background:#fff url(../find/ic-chevron-down.svg) right 12px center/16px no-repeat; cursor:pointer; }
div.op-phone input { flex:1 1 0; width:0; padding:0 16px; }
div.op-phone input::placeholder { color:var(--op-gray-400); }
div.op-phone select:focus, div.op-phone input:focus { outline:0; border-color:var(--op-teal-700); box-shadow:0 0 0 3px #00786e33; }
.op-phone > span { flex:none; font-size:16px; line-height:22px; color:#000; }
div.op-phone :disabled { background-color:var(--op-gray-100); color:var(--op-gray-400); cursor:default; opacity:1; -webkit-text-fill-color:var(--op-gray-400); }
div.op-phone.bad input, div.op-phone.bad select { border-color:var(--op-red-600); }
@media (max-width:480px) { .op-phone { gap:4px; } div.op-phone select { padding:0 26px 0 10px; background-position:right 8px center; } div.op-phone input { padding:0 8px; text-align:center; } }
/* toast_description (Figma 1120:43116): 아이콘 위 정렬 + 제목(Body/Small/M) · 설명(Body/Small/R) 4px 간격 */
.op-toast.desc { align-items:flex-start; padding:12px 16px; }
.op-toast.desc span { display:flex; flex-direction:column; gap:4px; }
.op-toast.desc span b { font-size:14px; font-weight:500; line-height:20px; }
.op-toast.desc span i { font-style:normal; font-size:14px; font-weight:400; line-height:20px; word-break:break-all; }

/* infobox (Figma 1153:52097): Style default(회색)·highlight(파랑)·warning(빨강) × Type default(제목+목록)·simple(한 줄)
   제목 = 아이콘 20px + 4px + Body/Small/M, 목록 = 점 칸 12px + 4px + Body/Small/R, 줄 간격 8px, 제목~목록 12px
   <div class="op-ibox warn"><p class="t">제목</p><ul><li>…</li></ul></div> */
.op-ibox { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:16px 12px; border:1px solid #e5e5e5; border-radius:8px; background:#f5f5f5; text-align:left; --ib:#374151; --ibt:#000; --ibi:url(ic-info.svg); }
.op-ibox.simple { gap:8px; }
.op-ibox.hl { border-color:#b8dcff; background:#edf6ff; --ib:#004fe0; --ibt:#004fe0; }
.op-ibox.warn { border-color:#ffc7c9; background:#fff1f2; --ib:#ca0008; --ibt:#ca0008; --ibi:url(ic-warning.svg); }
.op-ibox > .t { display:flex; align-items:flex-start; gap:4px; font-size:14px; font-weight:500; line-height:20px; color:var(--ibt); word-break:keep-all; }
.op-ibox.simple > .t { font-weight:400; }
.op-ibox > .t::before { content:""; flex:none; width:20px; height:20px; background:var(--ib); -webkit-mask:var(--ibi) center/contain no-repeat; mask:var(--ibi) center/contain no-repeat; }
.op-ibox ul { display:flex; flex-direction:column; gap:8px; width:100%; margin:0; padding:0; list-style:none; }
.op-ibox li { position:relative; padding-left:16px; font-size:14px; font-weight:400; line-height:20px; color:#000; word-break:keep-all; list-style:none; }
.op-ibox li::before { content:""; position:absolute; left:4px; top:8px; width:4px; height:4px; border-radius:50%; background:#525252; }
.op-ibox[hidden] { display:none; }

/* 인증 안내 팝업 (미인증 분석파트너가 견적서 작성을 누를 때, OP.verifyGate) */
.op-gate { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.5); }
.op-gate .box { position:relative; width:100%; max-width:440px; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.14); text-align:center; }
.op-gate .x { position:absolute; top:20px; right:24px; width:20px; height:20px; border:0; border-radius:4px; background:none; cursor:pointer; } /* Figma 1586:13474: 닫기 X 20px, 위 20 · 오른쪽 24 */
.op-gate .x::before { content:""; position:absolute; inset:0; background:#000; -webkit-mask:url(../main/ic-x.svg) center/contain no-repeat; mask:url(../main/ic-x.svg) center/contain no-repeat; } /* Phosphor X */
.op-gate .x:hover::before { background:#525252; }
.op-gate h3 { margin:52px 24px 0; font-size:20px; font-weight:600; line-height:28px; letter-spacing:-.2px; color:#000; } /* Heading/Medium/B */
.op-gate .box > p { margin:12px 24px 0; font-size:14px; line-height:20px; color:var(--op-gray-600, #525252); word-break:keep-all; }
.op-gate .bar { position:relative; height:6px; margin-top:47px; background:#f0f0f0; } /* 설명 → 툴팁 12 + 툴팁 28 + 꼬리 3 + 4 */
.op-gate .bar .fill { position:absolute; left:0; top:0; bottom:0; background:var(--op-teal-600); }
.op-gate .bar .gtip { position:absolute; left:50%; bottom:13px; transform:translateX(-50%); padding:4px 8px; border-radius:4px; background:#1b1b1b; color:#fff; font-size:14px; font-weight:500; line-height:20px; white-space:nowrap; } /* Figma tooltip 1424:14012 */
.op-gate .bar .gtip::after { /* 툴팁 bottom 13 = 바 높이 6 + 꼬리 3 + 간격 4 */ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:3px solid transparent; border-bottom:0; border-top-color:#1b1b1b; }
.op-gate .bar .gtip b { font-weight:500; color:var(--op-teal-500); } /* 진행률 숫자만 teal (검정 배경 대비로 teal/500) */
.op-gate .list { display:flex; flex-direction:column; gap:10px; padding:24px 28px 28px; background:#f6faf9; }
.op-gate .gi { display:flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 16px; border-radius:8px; border:1px solid var(--op-teal-600); background:#fff; color:var(--op-teal-600); font-size:16px; font-weight:500; line-height:22px; } /* button_outline (Figma 1586:13474) */
.op-gate a.gi:hover, .op-gate button.gi:hover { background:#fafafa; color:#00786e; } /* button_outline primary hovered: 배경 gray 50, 글자 teal 700, 테두리 teal 600 유지 */
.op-gate button.gi { width:100%; font:inherit; font-size:16px; font-weight:500; cursor:pointer; }
.op-gate .gi.off { border-color:#e5e5e5; background:#f5f5f5; color:#a3a3a3; cursor:default; } /* 메일 인증 전 사업자등록증 업로드 */
.op-gate .gi.done { border-color:#d4d4d4; color:#a3a3a3; }
.op-gate .gi em { font-style:normal; font-size:13px; color:var(--op-teal-600); }
.op-gate .gi i { width:16px; height:16px; background:currentColor; }
.op-gate .gi .pl { -webkit-mask:url(../auth/ic-plus.svg) center/contain no-repeat; mask:url(../auth/ic-plus.svg) center/contain no-repeat; }
.op-gate .gi .ck { -webkit-mask:url(../auth/ic-check.svg) center/contain no-repeat; mask:url(../auth/ic-check.svg) center/contain no-repeat; }
.op-gate .gi.done .ck { background:var(--op-teal-500); }
.op-gate .gi .go { -webkit-mask:url(../auth/ic-caret-right.svg) center/contain no-repeat; mask:url(../auth/ic-caret-right.svg) center/contain no-repeat; }
.op-gate .gi.opt { border-color:#d4d4d4; color:#737373; } /* 선택 항목: 회색 아웃라인, 글자 gray 500 */
.op-gate a.gi.opt:hover { background:#fafafa; border-color:#d4d4d4; color:#525252; } /* button_outline tertiary hovered: 배경 gray 50, 글자 gray 600 */
.op-gate .gi .tag { padding:1px 7px; border:1px solid #525252; border-radius:8px; color:#525252; font-size:12px; font-weight:500; line-height:18px; letter-spacing:-.12px; } /* badge_basic gray outline (605:41259) */