/* 차똑 기관용 (가입 · 로그인 · 관리 · 운전자). 색은 style.css 토큰만 쓴다. 토스식: 면으로 구분, 큰 숫자, 주버튼 하나. */

/* 대화 먼저 → 1초 뒤 선택지가 아래서 올라온다 (수칙: 대화 먼저, 선택지는 나중) */
.og-later{opacity:0;transform:translateY(14px);animation:ogUp .38s var(--ease,ease) 1s forwards;display:flex;flex-direction:column;flex:1}
@keyframes ogUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.og-later{animation-duration:.01s;animation-delay:.2s}}
.og-step{display:flex;flex-direction:column;flex:1}
.og-step[hidden]{display:none}
.og-mt8{margin-top:8px}
.og .big-input{font-size:var(--t20)}
.og .og-in{font-size:var(--t17);height:56px;margin-top:10px}
.og .lbl{margin-top:20px}
.og-banner{background:var(--gold-soft);color:var(--gold-tx);border-radius:var(--r);padding:12px 14px;font-size:var(--t14);margin:8px 0 0}
.og-banner a{color:var(--gold-tx);font-weight:700}

/* 진행 게이지 */
.og-gauge{display:flex;gap:6px;margin:6px 0 14px}
.og-gauge i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.og-gauge i.on{background:var(--gold)}

/* 카드 */
.og-card{background:var(--white);border-radius:var(--r-lg);padding:18px;margin-top:14px}
.og-why p{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 0;font-size:var(--t15);line-height:1.5;color:var(--stone)}
.og-why p+p{border-top:1px solid var(--line)}
.og-why b{color:var(--ink)}
.og-ic{font-size:22px;line-height:1.2;flex:none}
.og-h{font:700 var(--t15)/1.3 var(--kr);color:var(--ink);margin:22px 0 8px}
.og-h small{font-weight:500;color:var(--stone2);margin-left:4px}
.og-card .og-h{margin-top:0}
.og-line{margin:4px 0;font-size:var(--t15)}
.og-sub{display:block;font-size:var(--t13);color:var(--stone2);margin-top:3px;line-height:1.45}
.og-line .og-sub{display:inline;margin-left:6px}
.og-empty{color:var(--stone2);font-size:var(--t14);text-align:center;padding:22px 0;list-style:none}

/* 운영 방식 카드 */
.og-modes{display:grid;gap:10px}
.og-mode{display:flex;gap:14px;text-align:left;width:100%;border:2px solid transparent;background:var(--white);border-radius:var(--r-lg);padding:18px 16px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,transform .1s}
.og-mode:active{transform:scale(.985)}
.og-mode.sel{border-color:var(--mint);background:#F4FCF9}
.og-mode-n{font:800 22px/1 var(--kr);color:var(--mint-tx);flex:none;padding-top:2px}
.og-mode-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.og-mode-b b{font:800 var(--t20)/1.25 var(--kr);letter-spacing:-.02em}
.og-mode-b>span{font-size:var(--t14);color:var(--stone)}
.og-mode ul{margin:8px 0 0;padding:0 0 0 16px;font-size:var(--t13);color:var(--stone);line-height:1.6}
.og-mode ul b{font:inherit;font-weight:700;color:var(--ink)}
.og-mode em{font-style:normal;align-self:flex-start;margin-top:8px;font:600 var(--t12)/1 var(--kr);color:var(--gold-tx);background:var(--gold-soft);padding:6px 9px;border-radius:999px}
.og-modes.small .og-mode{padding:14px}
.og-modes.small .og-mode-b b{font-size:var(--t17)}

/* 칩 */
.og-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.og-chip{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--white);font:600 var(--t15)/1 var(--kr);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.og-chip small{font-weight:500;color:var(--stone2);margin-left:3px}
.og-chip.sel{background:var(--mint);color:var(--on-mint);box-shadow:none}
.og-chip.sel small{color:var(--on-mint)}
.og-chip-s{display:inline-block;font:600 var(--t12)/1 var(--kr);background:rgba(255,255,255,.14);padding:6px 9px;border-radius:999px;margin:0 6px 6px 0}

/* 체크 */
.og-check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:var(--t14);color:var(--ink);line-height:1.45;cursor:pointer}
.og-check input{width:22px;height:22px;flex:none;accent-color:var(--mint);margin:0}
.og-check small{display:block;color:var(--stone2);font-size:var(--t12);margin-top:2px}
.og-check a{color:var(--mint-tx)}
.og-toggle{display:flex;gap:12px;align-items:flex-start;background:var(--white);border-radius:var(--r-lg);padding:16px;margin-top:10px;cursor:pointer}
.og-toggle input{width:22px;height:22px;flex:none;accent-color:var(--mint);margin:2px 0 0}
.og-toggle b{display:block;font-size:var(--t15)}
.og-toggle small{display:block;color:var(--stone2);font-size:var(--t13);margin-top:3px;line-height:1.45}

/* 번호판 */
.og-plate{display:flex;gap:8px;align-items:center}
.og-plate .og-in{margin-top:0;flex:1;min-width:0}
.og-add{flex:none;height:56px;padding:0 18px;border:0;border-radius:var(--r);background:var(--ink);color:var(--white);font:700 var(--t15)/1 var(--kr);cursor:pointer}
.og-add:disabled{opacity:.5}
.og-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.og-list li{display:flex;align-items:center;gap:6px;background:var(--white);border-radius:10px;padding:0 6px 0 12px;min-height:44px;font-size:var(--t15)}
.og-list button{width:32px;height:32px;border:0;background:none;color:var(--stone2);font-size:14px;cursor:pointer}

.og-ta{width:100%;box-sizing:border-box;border:0;border-radius:var(--r);background:var(--white);padding:14px;font:500 16px/1.6 var(--kr);color:var(--ink);resize:vertical;margin-top:10px;box-shadow:inset 0 0 0 1px var(--line)}
.og-ta:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.og-count{font:600 var(--t13)/1.4 var(--kr);color:var(--mint-tx);margin:8px 0 0;min-height:18px}
.og-dt{width:100%;box-sizing:border-box;font-size:16px;padding:12px;border:0;border-radius:var(--r);background:var(--white);margin-top:10px;box-shadow:inset 0 0 0 1px var(--line)}

/* 관리 화면 */
.og-home{padding-top:6px}
.og-kpi{background:var(--dk2);color:var(--white);border-radius:var(--r-lg);padding:22px 20px 14px}
.og-kpi-l{margin:0;font:600 var(--t13)/1 var(--kr);color:rgba(255,255,255,.72)}
.og-kpi-n{margin:10px 0 12px;font:500 var(--t20)/1 var(--kr)}
.og-kpi-n b{font:800 44px/1 var(--kr);letter-spacing:-.03em;color:var(--mint-lt)}
.og-kpi-n span{font-size:var(--t15);color:rgba(255,255,255,.72);margin-left:6px}
.og-kpi-m{margin:0}
.og-alert{display:block;margin-top:10px;background:var(--gold-soft);color:var(--gold-tx);border-radius:var(--r);padding:14px 16px;font-size:var(--t15);text-decoration:none}
.og-tabs{display:flex;gap:4px;background:var(--surf);border-radius:var(--r);padding:4px;margin:16px 0 4px;position:sticky;top:0;z-index:5}
.og-tabs a{flex:1;text-align:center;padding:11px 0;border-radius:10px;font:600 var(--t14)/1 var(--kr);color:var(--stone);text-decoration:none;min-height:20px}
.og-tabs a.on{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.og-tabs i{font-style:normal;display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:9px;background:var(--alert);color:#fff;font-size:11px;margin-left:3px;vertical-align:1px}
.og-pane[hidden]{display:none}
.og-cars,.og-staffs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.og-car,.og-staff{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--white);border-radius:var(--r-lg);padding:16px}
.og-car-l{min-width:0}
.og-plate-t{display:block;font:800 var(--t20)/1.2 var(--kr);letter-spacing:-.01em}
.og-st{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:700 var(--t14)/1 var(--kr)}
.og-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line)}
.og-st.on{color:var(--mint-tx)}.og-st.on::before{background:var(--mint)}
.og-st.off{color:var(--stone2)}
.og-car-r{display:flex;align-items:center;gap:6px;flex:none}
.og-badge{font:600 var(--t12)/1 var(--kr);background:var(--gold-soft);color:var(--gold-tx);padding:6px 8px;border-radius:999px}
.og-more{position:relative}
.og-more summary{list-style:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;font-size:20px;color:var(--stone)}
.og-more summary::-webkit-details-marker{display:none}
.og-more[open] summary{background:var(--surf)}
.og-more>div{position:absolute;right:0;top:48px;z-index:10;background:var(--white);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;min-width:180px;display:flex;flex-direction:column}
.og-more a,.og-more button{display:block;text-align:left;padding:12px;font:500 var(--t14)/1.2 var(--kr);color:var(--ink);text-decoration:none;background:none;border:0;border-radius:8px;cursor:pointer}
.og-more button{color:var(--alert)}
.og-more a:hover,.og-more button:hover{background:var(--surf)}
.og-staff b{font-size:var(--t15)}
.og-staff-a{display:flex;gap:6px;flex:none}
.og-btn{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--surf);font:600 var(--t13)/1 var(--kr);color:var(--ink);cursor:pointer}
.og-btn.mint{background:var(--mint);color:var(--on-mint)}
.og-btn.big{min-height:52px;font-size:var(--t15);flex:1;background:var(--white)}
.og-row2{display:flex;gap:8px;margin-top:12px}
.og-range{display:flex;align-items:center;gap:8px}
.og-range input{flex:1;min-width:0;font-size:16px;padding:12px 10px;border:0;border-radius:var(--r);background:var(--surf)}
.og-tw{overflow-x:auto;background:var(--white);border-radius:var(--r-lg);margin-top:8px}
.og-tw table{width:100%;border-collapse:collapse;font-size:var(--t13);min-width:420px}
.og-tw th{text-align:left;font-weight:600;color:var(--stone2);padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.og-tw td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.og-tw small{color:var(--stone2)}

/* 운전자 */
.og-kind{margin:4px 0 6px;font-size:var(--t13);color:var(--stone)}
.og-kind b{color:var(--ink)}
.og-ok{text-align:center;padding:22px 18px}
.og-big{margin:0;font:800 var(--t24)/1.2 var(--kr);letter-spacing:-.02em}
.og-foot{text-align:center;font-size:var(--t13);color:var(--stone2);margin-top:18px}
.og-foot a{color:var(--stone)}

/* ---------- 운영 방식 예시 시트 ---------- */
.og-mode-f{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px}
.og-mode-f em{margin-top:0}
.og-peek{font:700 var(--t13)/1 var(--kr);color:var(--mint-tx);margin-top:6px}
.og-mode-f .og-peek{margin-top:0}
body.og-lock{overflow:hidden}
.og-sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.og-sheet[hidden]{display:none}
.og-sheet-bg{position:absolute;inset:0;background:rgba(5,20,18,.48);animation:ogFade .2s ease}
.og-sheet-p{position:relative;width:100%;max-width:520px;max-height:94dvh;overflow-y:auto;background:var(--page);border-radius:24px 24px 0 0;
  padding:18px 16px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;animation:ogSheet .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ogSheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes ogFade{from{opacity:0}}
.og-sheet-h{display:flex;align-items:center;gap:12px}
.og-sheet-h b{display:block;font:800 var(--t20)/1.2 var(--kr);letter-spacing:-.02em}
.og-sheet-h small{display:block;font-size:var(--t13);color:var(--stone);margin-top:3px}
.og-x{margin-left:auto;width:44px;height:44px;border:0;border-radius:12px;background:var(--surf);font-size:16px;color:var(--stone);cursor:pointer;flex:none}
.og-sheet-hint{margin:10px 0 0;font-size:var(--t12);color:var(--stone2)}
.mk-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px -16px 0;padding:6px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mk-row::-webkit-scrollbar{display:none}
.mk-it{flex:none;width:212px;margin:0;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center}
.mk-who{font:700 var(--t12)/1 var(--kr);color:var(--stone);background:var(--white);padding:6px 10px;border-radius:999px;margin-bottom:8px}
.mk-it figcaption{margin-top:10px;text-align:center;font-size:var(--t13);line-height:1.45;color:var(--stone)}
.mk-it figcaption>b:first-child{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:11px;margin-right:6px;vertical-align:1px}
.mk-it figcaption b{color:var(--ink)}
.mk-dots{display:flex;justify-content:center;gap:6px;margin:12px 0 14px}
.mk-dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .2s}
.mk-dots i.on{width:18px;background:var(--gold)}

/* 미니 폰 */
.mk-phone{width:200px;height:372px;box-sizing:border-box;border:6px solid #16201F;border-radius:28px;background:var(--page);overflow:hidden;
  box-shadow:0 10px 26px rgba(5,40,35,.16);display:flex;flex-direction:column;font-family:var(--kr);color:var(--ink)}
.mk-top{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 6px;font-size:10px;color:var(--stone)}
.mk-top b{font-size:12px;color:var(--ink);font-weight:800}
.mk-body{flex:1;padding:4px 10px 10px;display:flex;flex-direction:column;gap:7px;font-size:10.5px;line-height:1.4}
.mk-npc{display:flex;flex-direction:column;align-items:center}
.mk-av{width:46px;height:54px;object-fit:contain}
.mk-npc p{margin:2px 0 0;background:var(--white);border-radius:12px;padding:8px 9px;text-align:center;width:100%;box-sizing:border-box}
.mk-card{background:var(--white);border-radius:12px;padding:10px}
.mk-card.c{text-align:center}
.mk-card b{display:block;font-size:12px}
.mk-card small,.mk-car small{display:block;color:var(--stone2);font-size:9.5px;margin-top:2px}
.mk-big{font-size:15px!important;letter-spacing:-.02em}
.mk-btn{margin-top:auto;background:var(--mint);color:var(--on-mint);border-radius:10px;text-align:center;font-weight:700;padding:10px 4px;font-size:11px}
.mk-btn.ghost{background:var(--white);color:var(--ink)}
.mk-l{margin:2px 0 0;font-size:9.5px;color:var(--stone);font-weight:600}
.mk-chips{display:flex;flex-wrap:wrap;gap:4px}
.mk-chips i,.mk-two i{font-style:normal;background:var(--white);border-radius:999px;padding:5px 8px;font-size:10px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.mk-chips i.on{background:var(--mint);color:var(--on-mint);box-shadow:none}
.mk-in{background:var(--white);border-radius:8px;padding:7px 8px;font-size:10.5px}
.mk-two{display:flex;gap:5px}.mk-two i{flex:1;text-align:center;border-radius:8px;padding:7px 0}
.mk-sms{background:var(--white);border-radius:12px 12px 12px 4px;padding:9px 10px;box-shadow:0 1px 0 var(--line)}
.mk-sms-h{display:block;font-size:9px;color:var(--stone2);margin-bottom:3px}
.mk-sms p{margin:0;font-size:10.5px}
.mk-sms u{color:var(--mint-tx)}
.mk-call{background:var(--dk2);color:#fff;border-radius:12px;padding:12px 10px;text-align:center;font-weight:700;font-size:12px;margin-top:4px}
.mk-call small{display:block;font-weight:500;font-size:9.5px;color:rgba(255,255,255,.7);margin-top:3px}
.mk-car{background:var(--white);border-radius:12px;padding:10px}
.mk-car b{display:block;font-size:13px;font-weight:800}
.mk-st{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:10.5px;color:var(--stone2);margin-top:3px}
.mk-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
.mk-st.on{color:var(--mint-tx)}.mk-st.on::before{background:var(--mint)}
.mk-log{background:var(--white);border-radius:12px;padding:4px 8px}
.mk-log p{display:grid;grid-template-columns:auto 1fr;gap:1px 6px;margin:0;padding:6px 0;font-size:9.5px}
.mk-log p+p{border-top:1px solid var(--line)}
.mk-log span:first-child{font-weight:700}
.mk-log em{grid-column:1/-1;font-style:normal;color:var(--stone2);font-size:9px}
.mk-log em.on{color:var(--mint-tx);font-weight:700}
.mk-opt{display:flex;align-items:center;justify-content:space-between;background:var(--white);border-radius:12px;padding:9px 10px;font-size:10px;font-weight:600}
.mk-tg{width:26px;height:15px;border-radius:8px;background:var(--mint);position:relative;flex:none}
.mk-tg::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}

/* ---------- 체험 모드 · 운영실 [기관] ---------- */
.og-demo{background:#EAF2FF;color:#1F3B73}
.og-tag{display:inline-block;font:700 11px/1 var(--kr);background:var(--gold-soft);color:var(--gold-tx);padding:4px 7px;border-radius:999px;vertical-align:2px}
.og-adm-hero{border:2px solid var(--mint)}
.og-adm-make{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.og-adm-make input{flex:1 1 160px;min-width:0;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.og-adm-make .btn{min-height:46px}
.og-seg{display:inline-flex;background:var(--surf);border-radius:12px;padding:3px}
.og-seg button{border:0;background:none;padding:10px 12px;border-radius:9px;font:600 var(--t13)/1 var(--kr);color:var(--stone);cursor:pointer;min-height:40px}
.og-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.og-err{color:var(--alert);font-size:var(--t13);margin:8px 0 0}
.og-guide{margin:12px 0 0;padding-left:20px;font-size:var(--t14);line-height:1.8;color:var(--stone)}
.og-guide b{color:var(--ink)}
.og-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.og-steps a{font:600 var(--t13)/1 var(--kr);padding:10px 12px;border-radius:999px;background:var(--surf);color:var(--ink);text-decoration:none}
.og-n{display:block;font:800 28px/1.1 var(--kr);margin-top:4px}
.og-acts{white-space:nowrap}

/* ---------- 예시: QR 찍는 카메라 장면 (랜딩 써보기 첫 장면과 같은 말투) ---------- */
.mk-camp{padding:0;background:#0B1210}
.mk-cam{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center}
/* 바깥 = 앞유리 */
.mk-cam.out{background:radial-gradient(120% 70% at 30% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(160deg,#2E4743 0%,#1B2B29 45%,#0E1716 100%)}
.mk-cam.out::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 38%,transparent 46%);pointer-events:none}
.mk-wiper{position:absolute;left:-10%;right:-10%;bottom:12%;height:3px;border-radius:2px;background:rgba(0,0,0,.55);transform:rotate(-8deg)}
/* 안쪽 = 운전석 (천장·선바이저) */
/* 안쪽 장면은 파일 끝 '운전석 시점' 블록이 그린다 */
/* 운전대 — 차 안이라는 걸 한눈에 */
.mk-stk{position:absolute;left:50%;top:40%;width:96px;padding:7px 6px 6px;box-sizing:border-box;border-radius:8px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 8px 16px rgba(0,0,0,.45);animation:mkZoom 2.4s ease-out both}
.mk-stk.in{background:#fff;transform:translate(-56%,-50%) rotate(-3deg)}
.mk-stk.out{background:#E6F4EF;transform:translate(-50%,-50%) rotate(3deg)}
.mk-stk span{font:800 6.5px/1 var(--kr);color:#00806E;letter-spacing:.04em}
.mk-stk b{font:800 9px/1.2 var(--kr);color:#0E1A1B}
.mk-stk em{font:800 8px/1 var(--kr);font-style:normal;color:#0E1A1B;margin-top:1px}
.mk-qr{width:56px;height:56px;margin:3px 0 1px;border-radius:3px}
.mk-frame{position:absolute;left:50%;top:40%;width:116px;height:116px;transform:translate(-50%,-48%);border-radius:14px;
  background:linear-gradient(#FFD43B,#FFD43B) top left/18px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) top left/3px 18px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) top right/18px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) top right/3px 18px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) bottom left/18px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) bottom left/3px 18px no-repeat,
  linear-gradient(#FFD43B,#FFD43B) bottom right/18px 3px no-repeat,linear-gradient(#FFD43B,#FFD43B) bottom right/3px 18px no-repeat;
  animation:mkLock .9s .8s cubic-bezier(.2,.8,.2,1) both}
.mk-laser{position:absolute;left:50%;top:40%;width:100px;height:2px;margin-left:-50px;background:rgba(255,212,59,.85);box-shadow:0 0 8px #FFD43B;animation:mkScan 1.1s ease-in-out 2 alternate}
.mk-cam-t{position:relative;margin:14px 0 0;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.5);font:600 9.5px/1 var(--kr);color:#fff;z-index:1}
.mk-link{position:absolute;z-index:2;left:50%;bottom:62px;transform:translateX(-50%);padding:7px 12px;border-radius:999px;background:#fff;color:#0F1B19;font:700 10px/1 var(--kr);white-space:nowrap;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);animation:mkPop .4s 1.6s cubic-bezier(.2,1.4,.4,1) both}
.mk-shut{position:absolute;z-index:2;left:50%;bottom:14px;width:38px;height:38px;margin-left:-19px;border-radius:50%;border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.mk-shut i{width:28px;height:28px;border-radius:50%;background:#fff}
@keyframes mkZoom{from{opacity:.6;scale:.82}to{opacity:1;scale:1}}
@keyframes mkLock{from{transform:translate(-50%,-48%) scale(1.5);opacity:0}to{transform:translate(-50%,-48%) scale(1);opacity:1}}
@keyframes mkScan{from{transform:translateY(-52px)}to{transform:translateY(40px)}}
@keyframes mkPop{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mk-stk,.mk-frame,.mk-laser,.mk-link{animation:none}}

/* ---------- 예시 넘기기: PC 화살표·점 ---------- */
.mk-wrap{position:relative}
.mk-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-34px;border:0;border-radius:50%;background:#fff;color:var(--ink);
  font:400 28px/1 var(--kr);display:flex;align-items:center;justify-content:center;padding-bottom:3px;cursor:pointer;box-shadow:0 4px 14px rgba(5,40,35,.22);transition:opacity .15s}
.mk-nav.prev{left:-6px}.mk-nav.next{right:-6px}
.mk-nav:disabled{opacity:0;pointer-events:none}
.mk-nav:hover{background:var(--mint);color:var(--on-mint)}
@media (hover:none){.mk-nav{display:none}}   /* 폰은 손가락으로 넘긴다 */
.mk-row.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
@media (hover:hover){.mk-row{cursor:grab}}
.mk-dots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;background:var(--line);transition:width .2s;cursor:pointer;position:relative}
.mk-dots button::after{content:"";position:absolute;inset:-10px -5px}   /* 누르기 쉬운 크기 */
.mk-dots button.on{width:18px;background:var(--gold)}
.og-sheet-p{max-width:560px}
.mk-row img,.mk-row svg{pointer-events:none;-webkit-user-drag:none}
.mk-it:first-child{scroll-snap-align:start}.mk-it:last-child{scroll-snap-align:end}   /* 끝 장은 가운데로 못 오니 끝에 붙인다 — 안 그러면 스냅이 마지막 장을 못 보여 준다 */
.mk-row{scroll-padding:0 16px}

/* ---------- 두 방식의 핵심 차이 한 줄 ---------- */
.og-key{display:block;margin-top:6px;padding:9px 11px;border-radius:10px;background:var(--gold-soft);color:var(--gold-tx);font:500 var(--t14)/1.5 var(--kr)}
.og-key b{color:var(--ink);font-weight:800}
.og-mode-b .og-key{font-size:var(--t14)}
.og-key.big{margin:12px 0 0;font-size:var(--t15);padding:12px 14px}
.og-date{margin-top:10px;background:var(--white);border-radius:var(--r);padding:14px;font:700 var(--t17)/1.2 var(--kr)}
.og-date small{display:block;margin-top:4px;font:500 var(--t12)/1.3 var(--kr);color:var(--stone2)}
.og .lbl small{font-weight:500;color:var(--stone2);margin-left:4px}
.mk-date{font-weight:700}
.og-mode-b .og-key b,.og-key.big b{display:inline;font-weight:800;font-size:inherit;line-height:inherit;letter-spacing:0}

/* 운전자 자리 (차마다 구간: 전담 3명 / 공용 10명 / 공유 무제한) */
.og-car{flex-wrap:wrap}
.og-req{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:var(--gold-soft);color:var(--gold-tx);border-radius:var(--r);padding:12px 14px}
.og-req p{margin:0;font-size:var(--t14);min-width:0}
.og-seats{flex-basis:100%;border-top:1px solid var(--line);padding-top:10px}
.og-seats summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:var(--t14)}
.og-seats summary::-webkit-details-marker{display:none}
.og-seats summary::after{content:"›";font-size:20px;color:var(--stone2);transition:transform .15s}
.og-seats[open] summary::after{transform:rotate(90deg)}
.og-seats summary .og-sub{margin-left:auto}
.og-drvs{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.og-drvs li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t14)}
.og-drvs small{color:var(--stone2)}
.og-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.og-plan{min-height:44px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);font:500 var(--t12)/1.3 var(--kr);color:var(--stone);cursor:pointer}
.og-plan b{font-size:var(--t14);color:var(--ink)}
.og-plan em{font-style:normal;font-weight:700;color:var(--ink)}
.og-plan.on{border-color:var(--mint);background:var(--surf)}
.og-price .og-line{display:flex;justify-content:space-between;gap:8px}
.og-seats .og-h{margin:12px 0 4px;font-size:var(--t14)}

/* ---------- 가입 첫 화면 4장 소개 (style.css .ci 를 그대로 쓰고 색·장면만 기관용으로) ---------- */
.og-ci[hidden]{display:none}
.ci.og-ci[data-i="1"]{background:#1A1712;color:#fff}
.ci.og-ci[data-i="1"] .ci-bars i{background:rgba(255,255,255,.28)}
.ci.og-ci[data-i="2"]{background:#E3F8F3;color:var(--ink)}
.ci.og-ci[data-i="3"]{background:#fff;color:var(--ink)}
.ci.og-ci[data-i="2"] .ci-bars i,.ci.og-ci[data-i="3"] .ci-bars i{background:rgba(4,48,42,.12)}
.og-ci-miss{margin:0;padding:9px 14px;border-radius:999px;background:rgba(240,90,70,.16);color:#FF8A78;font:700 14px/1 var(--kr)}
.og-ci-miss b{color:#fff}
/* ② 빈칸투성이 운행일지 */
.og-ci-book{width:min(80vw,300px);background:#FBF6EA;color:#2A2A2A;border-radius:6px;padding:14px 14px 10px;transform:rotate(-2deg);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.og-ci-bt{margin:0 0 8px;font:800 14px/1.2 var(--kr);color:#5C4A24}
.og-ci-book table{width:100%;border-collapse:collapse;font:500 14px/1 var(--kr)}
.og-ci-book th{text-align:left;font-size:11px;color:#8A7A55;padding:0 4px 6px;border-bottom:1.5px solid #D9CCA8}
.og-ci-book td{padding:9px 4px;border-bottom:1px dashed #D9CCA8}
.og-ci-book td.q{color:#D24A35;font-weight:800;font-size:17px}
/* ③ QR 두 장 */
.og-ci .ci-qr svg{width:52px;height:52px}
.og-ci .ci-qr span{font-weight:600}
.og-ci .ci-qr b{font-weight:800}
.og-ci-sm{display:block;margin-top:5px;font:600 12px/1 var(--kr);color:var(--mint-tx)}
.og-ci .ci-call p{font-size:13px}
.og-ci-login{display:flex!important;align-items:center;justify-content:center;text-decoration:none}
@media (max-height:680px){.og-ci-book{padding:10px 12px 6px}.og-ci-book td{padding:6px 4px}.og-ci .ci-qr svg{width:40px;height:40px}}

/* ①② 대시보드 위 명함 (탈 때마다 바꿔 넣는 번호) */
.og-ci-dash{position:relative;width:min(80vw,310px);height:200px;border-radius:24px 24px 14px 14px;overflow:hidden;
  background:linear-gradient(180deg,#2B3B40 0%,#1A2629 52%,#3A3430 52%,#2A2522 100%);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.og-ci-wind{position:absolute;inset:0 0 48%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 40%,transparent 50%)}
.og-ci-card{position:absolute;left:50%;bottom:22px;width:150px;padding:10px 12px;border-radius:6px;background:#FFFDF6;color:#2A2A2A;
  transform:translateX(-50%) rotate(-5deg);box-shadow:0 8px 18px rgba(0,0,0,.45);animation:ogCard 2.4s ease-in-out infinite}
.og-ci-card small{display:block;font:600 10px/1 var(--kr);color:#8A7A55}
.og-ci-card b{display:block;margin-top:4px;font:800 15px/1.1 var(--kr)}
.og-ci-card em{display:block;margin-top:4px;font:700 13px/1 var(--lat,inherit);font-style:normal;letter-spacing:.01em}
.og-ci-card.old{left:auto;right:-18px;transform:rotate(9deg);opacity:.75;filter:grayscale(.4);animation:none}
@keyframes ogCard{0%,100%{transform:translateX(-50%) rotate(-5deg) translateY(0)}50%{transform:translateX(-50%) rotate(-5deg) translateY(-6px)}}
.og-ci-none{position:absolute;left:24px;bottom:34px;padding:9px 12px;border-radius:10px;border:2px dashed rgba(255,255,255,.45);color:#fff;font:800 14px/1 var(--kr);background:rgba(0,0,0,.25)}
.og-ci-ritual{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;counter-reset:r}
.og-ci-ritual li{padding:8px 11px;border-radius:999px;background:rgba(255,216,77,.14);color:#FFD84D;font:700 13px/1 var(--kr)}
.og-ci-ritual li+li::before{content:"→ ";opacity:.6}
.og-ci-oops{display:flex;flex-direction:column;gap:6px;align-items:center}
.og-ci-oops span{padding:8px 13px;border-radius:999px;background:rgba(240,90,70,.16);color:#FF8A78;font:700 13.5px/1 var(--kr)}
@media (max-height:680px){.og-ci-dash{height:160px}}

/* ③ 차 안에서 안쪽 QR 찍기 — 예시 시트의 카메라 장면을 키워서 */
.og-ci-scan{height:330px;display:flex;justify-content:center}
.og-ci-scan .mk-phone{transform:scale(.88);transform-origin:top center;box-shadow:0 18px 40px rgba(5,40,35,.28)}
.og-ci-res{display:flex;align-items:center;gap:10px;margin-top:-6px;padding:10px 16px;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(4,48,42,.1);animation:ciUp .45s 1.8s cubic-bezier(.2,.8,.2,1) both}
.og-ci-res span{font-size:22px}
.og-ci-res p{margin:0;font:500 13px/1.4 var(--kr);color:var(--stone)}
.og-ci-res b{display:block;font:800 15px/1.3 var(--kr);color:var(--ink)}
@media (max-height:740px){.og-ci-scan{height:270px}.og-ci-scan .mk-phone{transform:scale(.72)}}

/* 구간 고르기 (가입 차량 단계·차량 추가) + 이용 기간·결제 */
.og-seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.og-seg3 button{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);font:500 var(--t12)/1.3 var(--kr);color:var(--stone);cursor:pointer}
.og-seg3 button b{font-size:var(--t14);color:var(--ink)}
.og-seg3 button.on{border-color:var(--mint);background:var(--surf)}
.og-list-plan li{display:block!important}
.og-pl-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.og-total{margin:12px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--surf);font-size:var(--t15)}
.og-total small{color:var(--stone2);margin-left:4px}
.og-paybtns{display:grid;gap:8px;margin-top:12px}
.og-paybtns .btn-primary small{display:block;font-size:var(--t12);font-weight:500;opacity:.8}
.og-carpay{flex-basis:100%;min-height:44px}
.og-alert.og-warn{background:var(--alert-soft);color:var(--alert-dk)}
.og-alert.og-ok-msg{background:var(--surf);color:var(--dk)}
.og-list-plan{flex-direction:column;flex-wrap:nowrap}
.og-list-plan li{padding:10px 8px 12px 12px}
.og-list .og-seg3 button,.og-seg3 button{width:auto;height:auto;min-height:56px;font-size:var(--t12);color:var(--stone)}
.og-seg3 button em{font-style:normal;font-weight:700;color:var(--ink)}
.og-paybtns .btn-primary{flex-direction:column;gap:2px}

/* 기관용 소개 /biz 는 랜딩 틀로 바뀌어 public/biz.css 로 옮겼다 (2026-10-06) */

/* ---------- 예시: 운전석 시점 — 대시보드 송풍구 옆 안쪽 QR (회장님: "에어컨 송풍구나 그쯤") ---------- */
.mk-cam.in{background:#141619}
.mk-ws{position:absolute;left:0;right:0;top:0;height:40%;overflow:hidden;background:linear-gradient(180deg,#7A8D92 0%,#56686D 60%,#3C4A4E 100%)}   /* 앞유리 너머 */
.mk-hood{position:absolute;left:-30%;right:-30%;bottom:-62%;height:100%;border-radius:50%;background:linear-gradient(180deg,#E9ECEE,#BFC5C9 40%,#9AA2A7);box-shadow:inset 0 6px 10px rgba(255,255,255,.6)}   /* 보닛 */
.mk-mirror{position:absolute;left:50%;top:5%;width:58px;height:18px;margin-left:-29px;border-radius:8px;background:linear-gradient(180deg,#2B3034,#15181A);box-shadow:0 3px 6px rgba(0,0,0,.5),inset 0 0 0 2px #0B0D0E;z-index:1}
.mk-mirror::before{content:"";position:absolute;left:50%;top:-12px;width:4px;height:12px;margin-left:-2px;background:#15181A}
.mk-dash{position:absolute;left:-12%;right:-12%;top:34%;bottom:0;border-radius:50% 50% 0 0/30px 30px 0 0;
  background:linear-gradient(180deg,#30353A 0%,#22262A 18%,#1A1D20 60%,#121416);box-shadow:0 -2px 0 rgba(255,255,255,.07)}
.mk-vent{position:absolute;top:44%;width:56px;height:24px;border-radius:7px;background:repeating-linear-gradient(180deg,#0B0C0D 0 3px,#2E3337 3px 6px);box-shadow:inset 0 0 0 2px #3A3F43;z-index:1}
.mk-vent.l{left:50%;margin-left:-70px}.mk-vent.r{left:50%;margin-left:14px}
.mk-haz{position:absolute;left:50%;top:46%;width:16px;height:16px;margin-left:-8px;border-radius:4px;background:#1E2225;box-shadow:inset 0 0 0 2px #3A3F43;z-index:1}
.mk-haz::after{content:"";position:absolute;left:3px;top:3px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid #E0533D}
.mk-wheel{position:absolute;left:-150px;top:40%;width:210px;height:210px;border-radius:50%;box-sizing:border-box;border:18px solid #0D0F10;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 0 0 2px rgba(255,255,255,.04),6px 6px 14px rgba(0,0,0,.5);z-index:1}   /* 왼쪽에 걸친 운전대 */
.mk-wheel::before{content:"";position:absolute;right:-2px;top:86px;width:70px;height:14px;border-radius:6px;background:#0D0F10}
.mk-wheel i{display:none}
.mk-cam.in .mk-stk{z-index:2;top:63%;width:84px;padding:5px 5px 5px}
.mk-cam.in .mk-stk .mk-qr{width:46px;height:46px}
.mk-cam.in .mk-frame{top:63%;width:104px;height:104px;z-index:3}
.mk-cam.in .mk-laser{top:63%;width:88px;margin-left:-44px;z-index:3}
.mk-cam.in .mk-cam-t{z-index:4}
.mk-cam.in .mk-link{bottom:auto;top:15%;z-index:4}
.mk-cam.in .mk-mirror{display:none}   /* 맨 위 안내 글자와 겹쳐서 뺐다 */
.mk-cam.in .mk-link{top:19%}
.mk-cam.in .mk-stk,.mk-cam.in .mk-frame,.mk-cam.in .mk-laser{top:67%}

/* ---------- 계기판 주행거리 (내릴 때 · 탈 때 빈칸 · 운행일지) ---------- */
.og-km{position:relative;margin-top:10px}
.og-km .big-input{margin-top:0;padding-right:56px;font:800 28px/1 var(--lat,var(--kr));letter-spacing:.01em;text-align:right}
.og-km span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:700 var(--t17)/1 var(--kr);color:var(--stone2)}
.og-gap{margin-top:12px;border:2px solid var(--gold);background:var(--gold-soft)}
.og-gap .og-h{margin:0}
.og-gap .og-km .big-input{background:var(--white)}
.og-skiplink{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font-size:var(--t14);color:var(--stone);text-decoration:underline;text-underline-offset:3px}
.og-kmc{white-space:nowrap}
.og-kmc b{font-weight:800;color:var(--ink)}
.og-kmedit{border:0;background:none;cursor:pointer;font-size:14px;padding:4px;min-width:32px;min-height:32px}

/* 운행일지 칸(행선지·동승자·주유·특이사항) — 기관 종이 양식 그대로 받기 */
.og-info{margin-top:12px}
.og-info .og-h{margin:0}
.og-more2{margin-top:14px;background:var(--white);border-radius:var(--r-lg);padding:4px 16px 14px}
.og-more2 summary{list-style:none;min-height:48px;display:flex;align-items:center;font:700 var(--t15)/1.3 var(--kr);cursor:pointer}
.og-more2 summary::-webkit-details-marker{display:none}
.og-more2 summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--stone2)}
.og-more2[open] summary::after{content:"−"}
.og-more2 summary small{font-weight:500;color:var(--stone2);margin-left:6px}
.og-more2 .og-km .big-input{font-size:20px;text-align:left;height:56px}
.og-logx{min-width:120px;white-space:normal}
#h-edit .og-row2 .big-input{margin-top:6px}
#h-edit .og-row2>div{flex:1;min-width:0}

/* ---------- 기관 직원 체험 /biz/try ---------- */
.og-try .og-gauge{margin-top:12px}
.og-ty-scene{display:flex;justify-content:center;height:330px;margin-top:6px}
.og-ty-scene .mk-phone{transform:scale(.88);transform-origin:top center}
.og-ty-scene[hidden]{display:none}
.og-ty-sms{margin-top:12px}
.og-ty-bub{margin:8px 0;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--surf);font-size:var(--t15);line-height:1.5}
.og-ty-kpi{margin-top:4px}
.og-ty-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.og-ty-trip{position:relative;background:var(--white);border-radius:var(--r-lg);padding:16px 44px 14px 16px}
.og-ty-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.og-ty-top b{font:800 var(--t17)/1.3 var(--kr)}
.og-ty-top span{flex:none;font-size:var(--t13);color:var(--stone2)}
.og-ty-km{margin:6px 0 0;font-size:var(--t15)}
.og-ty-km b{font-weight:800;color:var(--mint-tx)}
.og-ty-km small{color:var(--stone2);margin-left:4px}
.og-ty-del{position:absolute;right:6px;top:8px;width:36px;height:36px;border:0;background:none;color:var(--stone2);cursor:pointer;font-size:14px}
/* PDF 로 굽는 양식 (화면 밖에서 그린다) */
#ty-pdfwrap{position:fixed;left:0;top:0;width:1070px;background:#fff;z-index:-1;pointer-events:none;opacity:0}
#ty-pdfwrap.on{opacity:1;z-index:-1}
#ty-pdfwrap:not(.on){display:none}
#ty-pdfbox{width:1070px;background:#fff}

.ty-form .pg{width:1070px;height:735px;box-sizing:border-box;padding:18px 0 0;font-family:'Nanum Myeongjo','Batang',serif;color:#111;background:#fff}

.ty-form .hd,
.ty-form .lg{width:100%;border-collapse:collapse}

.ty-form .hd{border:1.5px solid #000;border-bottom:2px solid #1F2B6E;margin-bottom:22px}

.ty-form .hd .tt{font-size:27px;font-weight:700;text-align:center;letter-spacing:.12em;padding:14px 0}

.ty-form .hd .meta{width:22%;border-left:1.5px solid #1F2B6E;padding:6px 14px;font-size:14px;line-height:1.9}

.ty-form .hd .meta p{margin:0}
.ty-form .hd .meta span{display:inline-block;width:5.4em;color:#333}

.ty-form .lg{border:1.5px solid #000;table-layout:fixed}

.ty-form .lg th,
.ty-form .lg td{border:.7px solid #555;text-align:center;vertical-align:middle;font-size:13px;height:31px;padding:0 3px;overflow:hidden;white-space:nowrap}

.ty-form .lg thead th{font-weight:400;height:29px;font-size:14px}

.ty-form .lg thead tr:last-child th{border-bottom:3px double #000}

.ty-form .lg td.l{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;font-size:11.5px;line-height:1.15}

.ty-form .lg td.sig{font-size:12px}
.ty-form .lg td.sig small{font-size:9px;color:#666}

/* 손가락 서명 패드 */
.og-sig{position:relative;margin-top:10px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.og-sig canvas{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.og-sig-ph{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:var(--stone2);font:500 var(--t15)/1 var(--kr);pointer-events:none}
.og-sig::after{content:"";position:absolute;left:16px;right:16px;bottom:34px;border-bottom:1.5px dashed var(--line);pointer-events:none}
.og-sig.on .og-sig-ph{display:none}
.og-sig-clr{position:absolute;right:8px;top:8px;border:0;background:var(--surf);border-radius:999px;padding:8px 12px;font:600 var(--t13)/1 var(--kr);color:var(--stone);cursor:pointer;min-height:36px}
.ty-form .lg td.sig{padding:0}.ty-form .lg td.sig img{height:27px;max-width:100%;object-fit:contain;vertical-align:middle}

/* 탭 먼저(딸깍) 질문 */
.og-qcard{margin-top:12px;display:grid;gap:18px}
.og-q-t{margin:0 0 10px;font:700 var(--t16)/1.35 var(--kr);color:var(--ink)}
.og-q-t small{font-weight:500;color:var(--stone2);margin-left:4px}
.og-q-s{margin:14px 0 0;font:600 var(--t13)/1 var(--kr);color:var(--stone)}
.og-q-s small{font-weight:500;color:var(--stone2)}
.og-seg2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.og-seg2[hidden]{display:none}
.og-seg2 button{min-height:52px;border:0;border-radius:var(--r);background:var(--surf);font:700 var(--t16)/1 var(--kr);color:var(--ink);cursor:pointer}
.og-seg2 button.on{background:var(--ink);color:#fff}
.og-reveal{margin-top:6px}
.og-reveal[hidden]{display:none}
.og-qchips{margin-top:8px}
.og-qchips .og-chip.on{background:var(--mint);color:var(--on-mint);box-shadow:none}
.og-q .og-km{margin-top:8px}
.og-q .og-km .big-input{font-size:20px;height:52px}
.og-q > .og-in{margin-top:8px}
.og-qmemo .og-skiplink{justify-content:flex-start;margin:0;text-decoration:none;font-weight:700;color:var(--mint-tx)}
.og-qmemo .og-skiplink{border:0;background:none;padding:0;cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--t15)}

/* 반납할 때 서명 */
.og-sigcard{margin-top:12px}
.og-sigcard .og-h{margin:0 0 8px}
.og-sigprev{position:relative;display:flex;align-items:center;justify-content:center;height:120px;border-radius:var(--r);background:var(--surf)}
.og-sigprev[hidden]{display:none}
.og-sigprev img{max-height:90px;max-width:70%;object-fit:contain}

.og-seg2.og-seg3{grid-template-columns:1fr 1fr 1fr}

/* 하이패스 잔액 · 충전 */
.og-hp{flex-basis:100%;width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:12px 14px;border-radius:var(--r);background:var(--surf)}
.og-hp>span{display:flex;flex-direction:column;gap:2px;font-size:15px}
.og-hp>span b{font-size:18px}
.og-hp small{font-size:12px;color:var(--sub,#6B7684);font-weight:400}
.og-hp.low{background:#FFF1EE}.og-hp.low>span b{color:#E5483B}
.og-hp .og-btn{min-height:44px}
.og-ty-hp{margin:12px 0}
.og-ty-hpq{flex-basis:100%}
.og-ty-hpq .og-btn{width:100%;margin-top:8px}
.og-hpnow{text-align:center;margin:8px 0 12px}
.og-hpbal{margin:0 0 8px;font-size:14px}
.og-hplist{list-style:none;margin:14px 0 0;padding:0}
.og-hplist li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line,#E5E8EB);font-size:14px}
.og-hplist li span{flex:1;color:var(--sub,#6B7684)}
.og-hplist li .og-btn{min-height:36px;padding:0 10px}
.ty-form .lg td.nt{white-space:nowrap;font-size:10px;line-height:1.2;letter-spacing:-.02em}
.ty-form .lg td.nt3{font-size:9px;line-height:1.1}

/* 차종 · 예상 통행료 */
.og-ct .og-chip,.og-ctp .og-chip{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-height:44px}
.og-ct .og-chip small,.og-ctp .og-chip small{font-size:11px;font-weight:400;opacity:.75}
.og-ctag{font-size:12px;font-weight:600;color:var(--sub,#6B7684);margin-left:4px}
.og-ctsel{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px}
.og-ctsel select{font:inherit;padding:6px;border-radius:8px}
.og-tollest{background:#EEF6FF;border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.og-tollest[hidden]{display:none}
.og-est-t{margin:0;font-size:15px}.og-est-t b{font-size:17px}
.og-est-t small{display:block;font-size:12px;color:var(--sub,#6B7684);margin-top:2px}
.og-est-w{margin:6px 0 0;font-size:13px;line-height:1.45;color:#B54708}
.og-ct,.og-ctp{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.og-ct .og-chip,.og-ctp .og-chip{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;text-align:left;white-space:normal;word-break:keep-all;font-size:15px;font-weight:700}
.og-list .og-ctp .og-chip{height:auto}
.og-ct .og-chip,.og-ctp .og-chip{line-height:1.3}
.og-ct .og-chip.on,.og-ctp .og-chip.on{background:var(--mint);color:var(--on-mint);box-shadow:none}
.og-est-in{box-shadow:inset 0 0 0 2px #F79009!important}
.og-km:has(.og-est-in)::before{content:'예상';position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:1;padding:3px 8px;border-radius:6px;background:#FEF0C7;color:#B54708;font-size:13px;font-weight:700}

/* 하이패스 잔액 블록 */
.og-hpq .og-seg2 button[data-hpv]{min-height:48px}
.og-hpq .og-seg2 button.on{background:var(--ink);color:#fff}
.og-hp-res{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#ECFDF3;font-size:14px;line-height:1.45}
.og-hp-res[hidden],.og-hp-ch[hidden]{display:none}
.og-hp-ch{margin-top:10px}
.og-hpq .og-skiplink{display:block;margin-top:10px;padding:8px 0;background:none;border:0;font:inherit;font-size:14px;color:var(--sub,#6B7684);text-decoration:underline;cursor:pointer}

/* 행선지 자동추천 */
.og-ac{list-style:none;margin:6px 0 0;padding:4px;border-radius:12px;background:var(--white,#fff);box-shadow:0 6px 20px rgba(0,0,0,.12),inset 0 0 0 1px var(--line,#E5E8EB)}
.og-ac[hidden]{display:none}
.og-ac li+li{border-top:1px solid var(--line,#E5E8EB)}
.og-ac button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:10px 12px;border:0;background:none;text-align:left;font:inherit;cursor:pointer;border-radius:8px}
.og-ac button:active{background:var(--surf,#F2F4F6)}
.og-ac b{font-size:16px;color:var(--ink,#191F28)}
.og-ac small{font-size:13px;color:var(--sub,#6B7684)}
.og-hpq .og-tollest{margin:0 0 10px}

/* 빠진 필수 칸 표시 */
.og-need{animation:ogNeed .5s ease 2;box-shadow:0 0 0 3px #F04438!important;border-radius:12px}
@keyframes ogNeed{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.og-need-msg{margin:8px 0 0;color:#D92D20;font-size:14px;font-weight:700}
.og-hpq .og-hp-km{margin-top:10px}
.og-hpq .og-hp-sub{margin:6px 0 0;font-size:13px}
.og-hpq .og-tollest{margin:10px 0 0}
.og-pilot{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#EEF6FF;color:#1D4ED8;font-size:13px;line-height:1.5}