/* AIMarker 4.0 · AI Content Trust Infrastructure (2026.10.16)
   am.css 위에 얹는 새 디자인 체계: 남색 무대 + 민트 '형광펜' + 상태 표시(운영 중 · 개발 중 · 계획) */
:root {
  --n0: #06102A; --n1: #0A1F52; --n2: #0E2A6B; --n3: #16399A;
  --mk: #3BD6BD; --mk-a: rgba(59, 214, 189, .5); --mk-d: #0B7A68;
  --paper: #F6F8FC; --hair: #E3E8F2;
  --tx-d: #C3CFEE; --tx-d2: #8FA2D1;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 머리글 4.0 ---------- */
.hd .wrap { gap: 22px; }
.nav { gap: 2px; }
.nav .dd.dd-mega .menu { width: 560px; display: none; grid-template-columns: 1fr 1fr; column-gap: 6px; padding: 12px; }
.nav .dd.dd-mega:hover .menu, .nav .dd.dd-mega.open .menu { display: grid; }
.nav .dd .menu .mg { grid-column: span 1; font-size: 12px; font-weight: 800; color: var(--faint); padding: 8px 12px 4px; letter-spacing: .01em; }
.nav .dd.dd-mega .menu .mg:first-child { grid-column: 1; grid-row: 1; }
.nav .dd.dd-mega .menu { grid-auto-flow: column; grid-template-rows: auto repeat(4, auto); }
.mnav .grp2 { display: block; padding: 12px 4px 2px; font-size: 12px; font-weight: 750; color: var(--faint); }
.annc { background: var(--n0); }
.annc-in > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .nav a, .nav .dd > button { padding: 8px 9px; } .hd-cta .btn-g { display: none; } }

/* ---------- 바닥글 4.0 ---------- */
.ft .cols { gap: 40px; }
.ft .cols .ct { color: #fff; font-size: 13.5px; margin-bottom: 10px; display: block; }
.ft .cols a b { color: #DDE5F2; display: inline; margin: 0; font-size: inherit; }
.ft .ft-a { max-width: 340px; }

/* ---------- 공통 조각 ---------- */
.s4 { padding: 112px 0; position: relative; }
.s4 + .s4 { border-top: 0; }
.hd4 { max-width: 760px; }
.hd4.c { margin: 0 auto; text-align: center; }
.hd4 h2 { font-size: clamp(28px, 3.3vw, 44px); font-weight: 860; letter-spacing: -.042em; line-height: 1.2; color: var(--ink); }
.hd4 p { font-size: 17.5px; line-height: 1.7; color: var(--mute); margin-top: 16px; max-width: 640px; }
.hd4.c p { margin-left: auto; margin-right: auto; }
.mk { background-image: linear-gradient(var(--mk-a), var(--mk-a)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 34%; padding: 0 .06em; transition: background-size 1.1s var(--ease) .35s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk.on, .no-js .mk { background-size: 100% 34%; }
.stt { font-style: normal; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; letter-spacing: -.01em; }
.stt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stt.is-live { background: #E3F6F1; color: var(--mk-d); }
.stt.is-dev { background: #E8EEFF; color: #1F49D6; }
.stt.is-plan { background: #EEF1F6; color: #5B687D; }
.stt.is-plan::before { background: transparent; border: 1.5px solid currentColor; width: 5px; height: 5px; }
.tag-ex { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid #C77A06; color: #B06A00; background: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.btn-n { background: var(--n2); color: #fff; }
.btn-n:hover { background: var(--n1); }
.tnum, .hdw-kpi b, .pb-cost dd, .co-big b, .pt em, .calc output { font-variant-numeric: tabular-nums; }
.br-m { display: none; }

/* ---------- 01 첫 화면 ---------- */
.h4 { position: relative; overflow: hidden; color: #fff; padding: 84px 0 104px;
  background: radial-gradient(900px 520px at 78% 18%, rgba(31, 85, 245, .42), rgba(31, 85, 245, 0) 62%), radial-gradient(640px 420px at 6% 96%, rgba(59, 214, 189, .14), rgba(59, 214, 189, 0) 60%), linear-gradient(180deg, var(--n0) 0%, #0A1739 100%); }
.h4::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000 20%, transparent 72%); }
.h4 .wrap { position: relative; }
.h4-in { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; margin-top: 34px; }
.h4-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #A9BBEA; letter-spacing: .01em; }
.h4-kicker .live { width: 8px; height: 8px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 0 0 rgba(59, 214, 189, .6); animation: livep 2.4s infinite; }
@keyframes livep { 0% { box-shadow: 0 0 0 0 rgba(59, 214, 189, .55); } 70% { box-shadow: 0 0 0 10px rgba(59, 214, 189, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 214, 189, 0); } }
.h4 h1 { color: #fff; font-size: clamp(36px, 5.1vw, 70px); font-weight: 900; letter-spacing: -.05em; line-height: 1.13; margin-top: 22px; }
.h4 h1 .mk { color: #fff; }
.h4-sub { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.75; color: var(--tx-d); max-width: 34em; padding-top: 6px; }
.h4-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.h4-facts { margin: 36px 0 0; display: grid; gap: 10px; max-width: 36em; }
.h4-facts div { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.h4-facts dt { flex: 0 0 auto; min-width: 54px; color: var(--mk); font-weight: 800; }
.h4-facts dd { margin: 0; color: var(--tx-d2); }

.h4-dash { position: relative; border-radius: 18px; background: #F3F6FB; color: var(--ink); box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14); overflow: visible; }
.hdw-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--hair); border-radius: 18px 18px 0 0; }
.hdw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D7DEEA; }
.hdw-bar span { margin-left: 8px; font-size: 12.5px; font-weight: 750; color: var(--mute); }
.hdw-bar em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800; color: #B06A00; border: 1px solid #C77A06; border-radius: 999px; padding: 1px 8px; background: #fff; }
.hdw { display: grid; grid-template-columns: 52px minmax(0, 1fr); border-radius: 0 0 18px 18px; overflow: hidden; }
.hdw-side { background: linear-gradient(180deg, #081128, #0B1838); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.hdw-side span { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #7F8FBA; }
.hdw-side span .ico { width: 17px; height: 17px; }
.hdw-side span.on { background: rgba(127, 166, 255, .18); color: #fff; }
.hdw-main { padding: 16px 16px 14px; min-width: 0; }
.hdw-h { display: flex; align-items: center; justify-content: space-between; }
.hdw-h b { font-size: 15px; font-weight: 850; letter-spacing: -.02em; }
.hdw-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--mk-d); background: #E3F6F1; border-radius: 999px; padding: 2px 9px; }
.hdw-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-d); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hdw-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hdw-kpi div { background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 11px; min-width: 0; }
.hdw-kpi small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 650; white-space: nowrap; }
.hdw-kpi b { font-size: 21px; font-weight: 900; letter-spacing: -.03em; }
.hdw-kpi span { font-size: 12px; color: var(--faint); font-weight: 700; margin-left: 2px; }
.hdw-pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 11px 8px; }
.hdw-pipe div i { display: block; height: 30px; border-radius: 6px; background: #E9EEF8; position: relative; overflow: hidden; }
.hdw-pipe div i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--w); background: linear-gradient(180deg, #5A82FF, #1F55F5); border-radius: 6px; transition: height .8s var(--ease); }
.hdw-pipe div:nth-child(4) i::after { background: linear-gradient(180deg, #F2B54A, #D98C0B); }
.hdw-pipe div:nth-child(6) i::after { background: linear-gradient(180deg, #5FE3CC, #12A594); }
.hdw-pipe span { display: block; text-align: center; font-size: 11px; font-weight: 700; color: var(--mute); margin-top: 5px; }
.hdw-feed-h { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.hdw-feed-h b { font-size: 13px; font-weight: 850; }
.hdw-feed-h small { font-size: 11.5px; color: var(--faint); }
.hdw-feed { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hdw-feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 8px 10px; transition: transform .45s var(--ease), opacity .45s; }
.hdw-feed li.in { animation: feedin .55s var(--ease); }
@keyframes feedin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.hdw-feed .th { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #FFD9C2, #F4A3B5); }
.hdw-feed .th.t2 { background: linear-gradient(135deg, #FFE9A8, #F5B83D); }
.hdw-feed .th.t3 { background: linear-gradient(135deg, #CFF5E5, #4FC9A0); }
.hdw-feed .th.t4 { background: linear-gradient(135deg, #D7E0F5, #7C93C9); }
.hdw-feed .th.t5 { background: linear-gradient(135deg, #E3D7FF, #9C7CF0); }
.hdw-feed .th.t6 { background: linear-gradient(135deg, #CDEBFF, #4BA3E8); }
.hdw-feed .nm { min-width: 0; }
.hdw-feed .nm b { display: block; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdw-feed .nm small { display: block; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdw-feed .st, .a4 .st { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.st.s-run { background: #EEF3FF; color: #1F49D6; }
.st.s-ok { background: #E3F6F1; color: var(--mk-d); }
.st.s-wait { background: #FFF3DC; color: #9A5B00; }
.st.s-hi { background: #FFE6E7; color: #B42328; }
.st.s-done { background: #0E2A6B; color: #fff; }
.st.s-run::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent; vertical-align: -1px; animation: spin4 .8s linear infinite; }
@keyframes spin4 { to { transform: rotate(360deg); } }
.hdw-toast { position: absolute; left: -26px; bottom: 54px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--n1); color: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.hdw-toast.on { opacity: 1; transform: none; }
.hdw-toast .ico { width: 18px; height: 18px; color: var(--mk); }
.hdw-toast b { display: block; font-size: 12.5px; }
.hdw-toast small { display: block; font-size: 11.5px; color: var(--tx-d2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- 02 문제 ---------- */
.s-prob { background: #fff; }
.pb { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; margin-top: 56px; align-items: start; }
.pb-cost { position: sticky; top: 100px; border-radius: 18px; background: var(--paper); border: 1px solid var(--hair); padding: 26px 26px 22px; }
.pb-cost-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-cost-h b { font-size: 16px; font-weight: 850; }
.pb-cost dl { margin: 18px 0 0; }
.pb-cost dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #CDD6E5; font-size: 15px; }
.pb-cost dt { color: var(--mute); }
.pb-cost dd { margin: 0; font-weight: 750; color: var(--ink-2); }
.pb-cost .sub dd, .pb-cost .sub dt { color: var(--ink); font-weight: 850; }
.pb-cost .sum { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 14px; }
.pb-cost .sum dt { color: var(--ink); font-weight: 850; align-self: center; }
.pb-cost .sum dd { font-size: 25px; font-weight: 900; letter-spacing: -.03em; color: var(--n2); }
.pb-cost p { font-size: 13.5px; color: var(--mute); margin-top: 10px; }
.pb-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 800; font-size: 15px; }
.pb-link .ico { width: 16px; height: 16px; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.pb-list li { display: flex; gap: 16px; padding: 26px 0; border-top: 1px solid var(--hair); }
.pb-list li:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.pb-list i { flex: 0 0 42px; height: 42px; border-radius: 12px; background: #EEF3FF; color: var(--n2); display: flex; align-items: center; justify-content: center; }
.pb-list i .ico { width: 20px; height: 20px; }
.pb-list b { display: block; font-size: 17.5px; font-weight: 850; letter-spacing: -.025em; }
.pb-list p { font-size: 15px; color: var(--mute); margin-top: 6px; line-height: 1.65; }

/* ---------- 03 흐름 ---------- */
.s-flow { background: var(--paper); }
.rail { margin-top: 56px; }
.rail-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.rail-steps button { width: 100%; text-align: left; background: none; border: 0; padding: 0 0 14px; cursor: pointer; color: var(--faint); font: inherit; }
.rail-steps em { display: block; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; }
.rail-steps b { display: block; font-size: 21px; font-weight: 880; letter-spacing: -.03em; color: #9AA6BA; margin-top: 2px; transition: color .25s; }
.rail-steps small { display: block; font-size: 13px; font-weight: 650; color: #AAB4C5; }
.rail-steps button[aria-selected="true"] b { color: var(--ink); }
.rail-steps button[aria-selected="true"] em { color: var(--blue); }
.rail-steps button[aria-selected="true"] small { color: var(--mute); }
.rail-steps button:hover b { color: var(--ink-2); }
.rail-line { position: relative; height: 4px; border-radius: 4px; background: #DCE3EF; margin: 6px 0 0; }
.rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 8.33%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), #4F7BFF); transition: width .7s var(--ease); }
.rail-tok { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 8px 22px rgba(14, 42, 107, .14); white-space: nowrap; transition: left .7s var(--ease); font-size: 12.5px; }
.rail-tok .ico { width: 15px; height: 15px; color: var(--blue); }
.rail-tok b { font-weight: 800; }
.rail-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 40px; background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 26px 28px; min-height: 132px; }
.rp-t { display: block; font-size: 19px; font-weight: 850; letter-spacing: -.03em; }
.rp-d { color: var(--mute); margin-top: 8px; font-size: 15.5px; }
.rp-side { border-left: 1px solid var(--hair); padding-left: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.rp-eng { align-self: flex-start; font-size: 12.5px; font-weight: 800; color: var(--n2); background: #EEF3FF; border-radius: 8px; padding: 4px 10px; }
.rp-out { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.rail-panel.swap .rp-main, .rail-panel.swap .rp-side { animation: swap .45s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.flow-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.flow-why div { border-top: 2px solid var(--ink); padding-top: 16px; }
.flow-why b { display: block; font-size: 17px; font-weight: 850; }
.flow-why span { display: block; color: var(--mute); font-size: 15px; margin-top: 6px; }

/* ---------- 04 제품 데모 ---------- */
.s-demo { background: #fff; }
.app4 { margin-top: 48px; }

/* ---------- 05 기술 구조도 ---------- */
.s-tech { background: radial-gradient(800px 420px at 50% 0%, rgba(31, 85, 245, .28), rgba(31, 85, 245, 0) 60%), linear-gradient(180deg, var(--n0), #0A1739); color: #fff; overflow: hidden; }
.s-tech::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.s-tech .wrap { position: relative; }
.s-tech .hd4 h2 { color: #fff; }
.s-tech .hd4 p { color: var(--tx-d); }
.arch { display: flex; flex-direction: column; align-items: stretch; margin-top: 52px; }
.arch-io { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.arch-io b { font-size: 13px; font-weight: 800; color: var(--mk); white-space: nowrap; }
.arch-io ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.arch-io li { font-size: 13.5px; color: var(--tx-d); padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.arch-v { height: 34px; position: relative; }
.arch-v::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 8px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(127, 166, 255, .25), rgba(127, 166, 255, .85)); }
.arch-v::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: 2px; border: 5px solid transparent; border-top: 6px solid rgba(127, 166, 255, .95); border-bottom: 0; }
.arch-wf { border: 1.5px dashed rgba(127, 166, 255, .45); border-radius: 24px; padding: 16px 18px 20px; background: rgba(31, 85, 245, .07); }
.arch-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, .9fr); align-items: stretch; margin-top: 16px; }
.arch-arw { position: relative; }
.arch-arw::before { content: ""; position: absolute; left: 3px; right: 6px; top: 50%; height: 2px; background: rgba(127, 166, 255, .6); }
.arch-arw::after { content: ""; position: absolute; right: 2px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 6px solid rgba(127, 166, 255, .95); border-right: 0; }
.eng { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font: inherit; transition: border-color .2s, background .2s, box-shadow .2s; min-width: 0; }
.eng:hover { border-color: rgba(127, 166, 255, .7); background: rgba(255, 255, 255, .09); }
.eng i { flex: 0 0 38px; height: 38px; border-radius: 11px; background: rgba(127, 166, 255, .16); color: #BFD0FF; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.eng i .ico { width: 19px; height: 19px; }
.eng b { display: block; font-size: 15px; font-weight: 850; letter-spacing: -.02em; }
.eng small { display: block; font-size: 12.5px; color: var(--tx-d2); margin-top: 1px; }
.eng span { min-width: 0; }
.eng[aria-pressed="true"] { border-color: var(--mk); background: rgba(59, 214, 189, .1); box-shadow: 0 0 0 4px rgba(59, 214, 189, .14), 0 14px 34px rgba(0, 0, 0, .3); }
.eng[aria-pressed="true"] i { background: var(--mk); color: #04221C; }
.eng-wf { display: inline-flex; padding: 9px 14px 9px 9px; background: rgba(10, 23, 57, .92); border-radius: 14px; }
.eng-wf i { flex-basis: 32px; height: 32px; }
.arch-human { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .3); color: #fff; min-width: 0; }
.arch-human i { flex: 0 0 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: flex; align-items: center; justify-content: center; }
.arch-human i .ico { width: 19px; height: 19px; }
.arch-human b { display: block; font-size: 15px; font-weight: 850; }
.arch-human small { display: block; font-size: 12.5px; color: var(--tx-d2); }
.eng-ledger { justify-content: center; padding: 16px 18px; }
.eng-ledger span { flex: 0 1 auto; }
.eng-panel { margin-top: 36px; border-radius: 20px; background: #fff; color: var(--ink); padding: 28px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.ep-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ep-h i { flex: 0 0 44px; height: 44px; border-radius: 12px; background: #EEF3FF; color: var(--n2); display: flex; align-items: center; justify-content: center; }
.ep-h i .ico { width: 22px; height: 22px; }
.ep-h h3 { font-size: 22px; font-weight: 880; letter-spacing: -.03em; }
.ep-h h3 small { font-size: 15px; font-weight: 700; color: var(--mute); margin-left: 8px; letter-spacing: -.01em; }
.ep-h p { flex: 1 1 100%; color: var(--mute); font-size: 15.5px; margin-top: 2px; }
.ep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 22px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.ep-grid > div { padding: 16px 18px; border-left: 1px solid var(--hair); }
.ep-grid > div:first-child { border-left: 0; }
.ep-grid b { display: block; font-size: 12.5px; font-weight: 800; color: var(--blue); margin-bottom: 8px; }
.ep-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ep-grid li { font-size: 14px; color: var(--ink-2); line-height: 1.55; padding-left: 12px; position: relative; }
.ep-grid li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #B7C3D9; }
.ep-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ep-st > div { border-radius: 12px; padding: 14px 16px; background: var(--paper); }
.ep-st ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.ep-st li { font-size: 13.5px; color: var(--ink-2); }
.ep-honest { display: flex; gap: 10px; margin-top: 16px; padding: 13px 16px; border-radius: 12px; background: #FFF8EA; border: 1px solid #F3DDAE; font-size: 14px; color: #6B4A10; }
.ep-honest .ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: #B06A00; }
.tech-more { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; color: var(--tx-d2); font-size: 14.5px; }
.tech-more a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 800; }
.tech-more a .ico { width: 16px; height: 16px; }

/* ---------- 06 솔루션 ---------- */
.s-sol { background: #fff; }
.sol { margin-top: 44px; }
.sol-tabs { border-bottom: 1px solid var(--hair); padding-bottom: 0; gap: 4px; }
.sol-tabs button { height: auto; display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px 12px 0 0; font-size: 16px; font-weight: 800; color: var(--mute); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; }
.sol-tabs button .ico { width: 18px; height: 18px; }
.sol-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); background: none; }
.sol .tabpane { padding-top: 34px; }
.sol-p { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; }
.sol-a h3 { font-size: 25px; font-weight: 880; letter-spacing: -.035em; line-height: 1.3; }
.sol-pain { color: var(--mute); font-size: 16px; margin-top: 12px; line-height: 1.75; }
.feat { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.feat li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 15.5px; color: var(--ink-2); }
.feat li .stt { flex: 0 0 66px; justify-content: center; }
.sol-note { display: flex; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--mute); background: var(--paper); border-radius: 12px; padding: 12px 14px; }
.sol-note .ico { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--n2); }
.sol-b { display: flex; flex-direction: column; gap: 16px; }
.sol-eff { border-radius: 18px; background: var(--paper); padding: 22px 22px 8px; }
.sol-eff > b { display: block; font-size: 14px; font-weight: 800; color: var(--blue); margin-bottom: 4px; }
.sol-eff div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair); }
.sol-eff div:first-of-type { border-top: 0; }
.sol-eff em { font-style: normal; font-weight: 850; font-size: 15px; color: var(--ink); }
.sol-eff span { font-size: 14.5px; color: var(--mute); line-height: 1.6; }
.sol-plan { border-radius: 16px; border: 1.5px solid var(--n2); padding: 16px 18px; }
.sol-plan small { display: block; font-size: 12.5px; color: var(--mute); font-weight: 700; }
.sol-plan b { display: block; font-size: 18px; font-weight: 880; letter-spacing: -.02em; margin-top: 2px; }
.sol-plan span { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
.sol-b .btn { align-self: flex-start; }

/* ---------- 07 계산기 ---------- */
.s-value { background: var(--paper); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 48px; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(14, 42, 107, .12); border: 1px solid var(--hair); }
.calc-in { background: #fff; padding: 34px 34px 26px; display: grid; gap: 24px; }
.cf label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 750; font-size: 15px; color: var(--ink-2); }
.cf output { font-size: 19px; font-weight: 880; color: var(--n2); letter-spacing: -.02em; }
.cf small { display: block; font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.cf input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--blue); height: 22px; }
.calc-out { background: linear-gradient(160deg, var(--n1), var(--n0)); color: #fff; padding: 34px 34px 30px; display: flex; flex-direction: column; }
.co-big small { display: block; color: var(--tx-d2); font-size: 14px; font-weight: 700; }
.co-big b { display: block; font-size: clamp(36px, 4.4vw, 54px); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; margin-top: 6px; color: #fff; }
.co-big span { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 800; color: #04221C; background: var(--mk); border-radius: 999px; padding: 3px 12px; }
.co-bars { margin-top: 28px; display: grid; gap: 14px; }
.cb { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.cb span { color: var(--tx-d2); font-weight: 700; }
.cb i { display: flex; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cb i s { display: block; height: 100%; text-decoration: none; background: #7F98D9; transition: width .5s var(--ease); }
.cb.a i s { background: var(--mk); }
.cb.a i s.fee { background: #F2B54A; }
.cb b { font-size: 15px; font-weight: 850; min-width: 112px; text-align: right; font-variant-numeric: tabular-nums; }
.co-rows { margin: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.co-rows div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; }
.co-rows dt { color: var(--tx-d2); }
.co-rows dd { margin: 0; font-weight: 850; font-variant-numeric: tabular-nums; }
.co-note { font-size: 12.5px; color: var(--tx-d2); margin-top: 14px; line-height: 1.6; }
.calc-out .btn { align-self: flex-start; margin-top: 18px; }

/* ---------- 08 요금 ---------- */
.s-price { background: #fff; }
.pt-wrap { margin-top: 48px; overflow-x: auto; border-radius: 20px; border: 1px solid var(--hair); }
.pt { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
.pt th, .pt td { padding: 15px 20px; text-align: left; border-top: 1px solid var(--hair); font-size: 15px; vertical-align: middle; }
.pt thead th { border-top: 0; vertical-align: bottom; padding-top: 26px; padding-bottom: 20px; background: #fff; }
.pt thead th b { display: block; font-size: 20px; font-weight: 880; letter-spacing: -.02em; }
.pt thead th small { display: block; font-size: 13px; color: var(--mute); font-weight: 650; margin-top: 2px; }
.pt thead th em { display: block; font-style: normal; font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--n2); margin-top: 12px; }
.pt thead th em i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--mute); margin-left: 3px; }
.pt tbody th { font-weight: 750; color: var(--mute); width: 19%; font-size: 14px; }
.pt td { color: var(--ink-2); font-weight: 600; }
.pt .best { background: #F3F6FF; }
.pt thead th.best { background: #F3F6FF; position: relative; }
.pt-flag { position: absolute; top: 10px; left: 20px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 999px; padding: 2px 9px; }
.pt tfoot td { padding: 18px 20px 22px; }
.pt tfoot .btn { width: 100%; }
.pt-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 20px; border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.pt-more > div { padding: 18px 20px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.pt-more > div:first-child { border-left: 0; }
.pt-more b { font-size: 15.5px; font-weight: 850; }
.pt-more span { font-size: 13.5px; color: var(--mute); line-height: 1.6; flex: 1; }
.pt-more a { font-weight: 800; font-size: 14px; }

/* ---------- 09 로드맵 ---------- */
.s-road { background: var(--paper); }
.rm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.rm-col { background: #fff; border-radius: 20px; border: 1px solid var(--hair); padding: 22px 22px 8px; position: relative; overflow: hidden; }
.rm-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mk); }
.rm-col.rm-dev::before { background: var(--blue); }
.rm-col.rm-plan::before { background: repeating-linear-gradient(90deg, #B7C3D9 0 10px, transparent 10px 16px); }
.rm-h b { display: block; font-size: 19px; font-weight: 880; letter-spacing: -.025em; margin-top: 12px; }
.rm-h small { display: block; font-size: 13px; color: var(--mute); font-weight: 650; }
.rm ul { list-style: none; margin: 14px 0 0; padding: 0; }
.rm li { padding: 13px 0; border-top: 1px solid var(--hair); position: relative; padding-right: 76px; }
.rm li b { display: block; font-size: 15px; font-weight: 800; }
.rm li span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 2px; line-height: 1.55; }
.rm li em { position: absolute; right: 0; top: 14px; font-style: normal; font-size: 11.5px; font-weight: 750; color: var(--n2); background: #EEF3FF; border-radius: 6px; padding: 2px 7px; }

/* ---------- 10 마지막 ---------- */
.s-end { background: linear-gradient(180deg, #0A1739, var(--n0)); color: #fff; padding: 120px 0; overflow: hidden; }
.s-end::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 85% 10%, rgba(59, 214, 189, .16), transparent 60%), radial-gradient(800px 420px at 10% 100%, rgba(31, 85, 245, .3), transparent 60%); pointer-events: none; }
.end4 { position: relative; }
.end4 h2 { color: #fff; font-size: clamp(30px, 4vw, 54px); font-weight: 900; letter-spacing: -.048em; line-height: 1.2; }
.end4 p { color: var(--tx-d); font-size: 17.5px; max-width: 640px; margin-top: 20px; line-height: 1.7; }
.end4-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.end4-free { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14.5px; }
.end4-free b { color: var(--mk); font-weight: 800; }
.end4-free a { color: var(--tx-d); }
.end4-free a:hover { color: #fff; }

/* ---------- 하위 쪽 공통(4.0) ---------- */
.p4h { position: relative; overflow: hidden; color: #fff; padding: 76px 0 84px; background: radial-gradient(800px 420px at 85% 0%, rgba(31, 85, 245, .4), rgba(31, 85, 245, 0) 60%), linear-gradient(180deg, var(--n0), #0A1739); }
.p4h::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 20%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse 60% 80% at 80% 20%, #000 15%, transparent 70%); }
.p4h .wrap { position: relative; }
.p4h .crumb { font-size: 14px; font-weight: 750; color: var(--mk); }
.p4h h1 { color: #fff; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -.046em; line-height: 1.18; margin-top: 14px; max-width: 900px; }
.p4h p.lead4 { color: var(--tx-d); font-size: 18px; line-height: 1.72; margin-top: 20px; max-width: 700px; }
.p4h .row { margin-top: 30px; }
.toc4 { position: sticky; top: 68px; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.toc4 .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.toc4 .wrap::-webkit-scrollbar { display: none; }
.toc4 a { flex: 0 0 auto; padding: 14px 12px; font-size: 14.5px; font-weight: 750; color: var(--mute); border-bottom: 2px solid transparent; }
.toc4 a:hover { color: var(--ink); text-decoration: none; }
.toc4 a.on { color: var(--ink); border-bottom-color: var(--ink); }
.blk { padding: 84px 0; border-top: 1px solid var(--hair); }
.blk:first-of-type { border-top: 0; }
.blk.soft { background: var(--paper); border-top: 0; }
.blk-h { max-width: 760px; }
.blk-h h2 { font-size: clamp(26px, 2.9vw, 38px); font-weight: 870; letter-spacing: -.04em; line-height: 1.24; }
.blk-h p { color: var(--mute); font-size: 16.5px; line-height: 1.75; margin-top: 14px; }
.blk-h .k { display: block; font-size: 14px; font-weight: 800; color: var(--blue); margin-bottom: 10px; }
.kvt { width: 100%; border-collapse: collapse; margin-top: 28px; }
.kvt th, .kvt td { text-align: left; padding: 14px 16px; border-top: 1px solid var(--hair); font-size: 15px; vertical-align: top; line-height: 1.6; }
.kvt thead th { font-size: 13px; color: var(--mute); font-weight: 800; border-top: 0; background: var(--paper); }
.kvt tbody th { font-weight: 800; color: var(--ink); width: 22%; }
.kvt td { color: var(--ink-2); }
.kvt-wrap { position: relative; overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; margin-top: 28px; }
.kvt-wrap .kvt { margin-top: 0; min-width: 680px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.col-it { border-top: 2px solid var(--ink); padding-top: 16px; }
.col-it b { display: block; font-size: 17.5px; font-weight: 850; letter-spacing: -.02em; }
.col-it p { color: var(--mute); font-size: 15px; margin-top: 8px; line-height: 1.7; }
.col-it .stt { margin-top: 10px; }
.cta4 { border-radius: 24px; padding: 44px; background: linear-gradient(135deg, var(--n1), var(--n2) 60%, var(--n3)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta4 h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); font-weight: 880; letter-spacing: -.04em; line-height: 1.3; }
.cta4 p { color: var(--tx-d); margin-top: 8px; font-size: 16px; }
.cta4 .row { gap: 10px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .h4-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .h4-dash { max-width: 720px; }
  .arch-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); row-gap: 12px; }
  .arch-row .arch-arw:nth-of-type(2) { display: none; }
  .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-grid > div:nth-child(3) { border-left: 0; }
  .ep-grid > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 960px) {
  .s4 { padding: 84px 0; }
  .pb { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pb-cost { position: static; }
  .rail-steps b { font-size: 17px; }
  .rail-panel { grid-template-columns: minmax(0, 1fr); }
  .rp-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 16px; }
  .flow-why { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sol-p { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .rm { grid-template-columns: minmax(0, 1fr); }
  .pt-more { grid-template-columns: minmax(0, 1fr); }
  .pt-more > div { border-left: 0; border-top: 1px solid var(--hair); }
  .pt-more > div:first-child { border-top: 0; }
  .arch-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .arch-row .arch-arw, .arch-row .arch-arw:nth-of-type(2) { display: block; height: 16px; }
  .arch-arw::before { left: 50%; right: auto; top: 0; bottom: 4px; width: 2px; height: auto; margin-left: -1px; }
  .arch-arw::after { right: auto; left: calc(50% - 5px); top: auto; bottom: 0; border: 5px solid transparent; border-top: 6px solid rgba(127, 166, 255, .9); border-bottom: 0; }
  .cols3, .cols2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .s4 { padding: 68px 0; }
  .h4 { padding: 52px 0 64px; }
  .h4 h1 { font-size: 34px; }
  .br-m { display: inline; }
  .h4-facts div { flex-direction: column; gap: 2px; }
  .hdw { grid-template-columns: minmax(0, 1fr); }
  .hdw-side { display: none; }
  .hdw-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdw-pipe { display: none; }
  .hdw-toast { left: 10px; bottom: -22px; }
  .pb-list { grid-template-columns: minmax(0, 1fr); }
  .pb-list li:nth-child(2) { border-top: 1px solid var(--hair); padding-top: 26px; }
  .rail-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .rail-line { display: none; }
  .rail-steps button { padding-bottom: 8px; border-bottom: 3px solid #DCE3EF; }
  .rail-steps button[aria-selected="true"] { border-bottom-color: var(--blue); }
  .arch-io { justify-content: flex-start; }
  .arch-io ul { justify-content: flex-start; }
  .ep-grid { grid-template-columns: minmax(0, 1fr); }
  .ep-grid > div { border-left: 0; border-top: 1px solid var(--hair); }
  .ep-grid > div:first-child { border-top: 0; }
  .ep-st { grid-template-columns: minmax(0, 1fr); }
  .eng-panel { padding: 22px 18px; }
  .sol-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sol-tabs button { flex: 0 0 auto; font-size: 15px; padding: 12px 12px; }
  .feat li .stt { flex-basis: 62px; }
  .calc-in, .calc-out { padding: 24px 20px; }
  .cb { grid-template-columns: 46px minmax(0, 1fr); }
  .cb b { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .cta4 { padding: 30px 22px; }
  .p4h { padding: 56px 0 60px; }
  .blk { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk { transition: none; background-size: 100% 34%; }
  .h4-kicker .live, .hdw-pill::before, .st.s-run::before { animation: none; }
  .rail-fill, .rail-tok, .hdw-feed li { transition: none; }
}

/* ---------- 제품 데모(.a4) ---------- */
.a4 { position: relative; border-radius: 20px; border: 1px solid #D6DEEB; background: #F3F6FB; box-shadow: 0 40px 90px rgba(14, 42, 107, .16), 0 6px 18px rgba(14, 42, 107, .06); overflow: hidden; color: var(--ink); text-align: left; }
.a4-top { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--hair); }
.a4-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; font-size: 15px; letter-spacing: .01em; }
.a4-logo svg { width: 26px; height: 26px; }
.a4-ws { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); background: #fff; border-radius: 10px; padding: 5px 10px 5px 6px; cursor: pointer; font: inherit; text-align: left; margin-left: 6px; }
.a4-ws .ico { width: 14px; height: 14px; color: var(--faint); }
.a4-av { width: 26px; height: 26px; border-radius: 8px; background: var(--n2); color: #fff; font-size: 12px; font-weight: 850; display: flex; align-items: center; justify-content: center; }
.a4-ws b { display: block; font-size: 13px; line-height: 1.2; }
.a4-ws small { display: block; font-size: 11px; color: var(--faint); line-height: 1.2; }
.a4-search { flex: 1; max-width: 340px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: #F3F6FB; border: 1px solid transparent; color: var(--faint); margin-left: auto; }
.a4-search .ico { width: 16px; height: 16px; }
.a4-search input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 13.5px; color: var(--ink); }
.a4-search:focus-within { border-color: var(--blue); background: #fff; }
.a4-demo { font-size: 11.5px; font-weight: 800; color: #B06A00; border: 1px solid #C77A06; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.a4-me { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #8FB0FF, #1F55F5); color: #fff; font-size: 11.5px; font-weight: 850; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.a4-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 680px; }
.a4-nav { background: linear-gradient(180deg, #081128 0%, #0B1838 100%); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.a4-nav button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; color: #AEBCDF; font: inherit; text-align: left; cursor: pointer; position: relative; }
.a4-nav button .ico { width: 18px; height: 18px; flex: 0 0 auto; }
.a4-nav button b { display: block; font-size: 14px; font-weight: 750; color: inherit; }
.a4-nav button small { display: block; font-size: 11px; color: #6F80AE; font-weight: 600; }
.a4-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.a4-nav button[aria-selected="true"] { background: rgba(127, 166, 255, .16); color: #fff; }
.a4-nav button[aria-selected="true"]::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mk); }
.a4-nav em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 850; background: #E5484D; color: #fff; border-radius: 999px; padding: 1px 7px; }
.a4-nav em:empty { display: none; }
.a4-nav-foot { margin-top: auto; border-radius: 12px; padding: 12px; background: rgba(59, 214, 189, .1); border: 1px solid rgba(59, 214, 189, .22); }
.a4-nav-foot b { display: block; font-size: 12.5px; color: #7FF0DA; }
.a4-nav-foot span { display: block; font-size: 11.5px; color: #9FB0D6; margin-top: 2px; line-height: 1.5; }
.a4-main { padding: 20px 22px 26px; overflow-y: auto; min-width: 0; outline: 0; }
.a4-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.a4-h h3 { font-size: 21px; font-weight: 880; letter-spacing: -.03em; }
.a4-h p { font-size: 13px; color: var(--mute); margin-top: 2px; }
.a4-h-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a4-seg { display: inline-flex; background: #E7ECF5; border-radius: 10px; padding: 3px; gap: 2px; }
.a4-seg button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 750; color: var(--mute); padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.a4-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14, 42, 107, .12); }
.a4-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid #D3DBE7; background: #fff; font: inherit; font-size: 13px; font-weight: 750; color: var(--ink-2); cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.a4-btn .ico { width: 15px; height: 15px; }
.a4-btn:hover { border-color: var(--ink-2); }
.a4-btn.pri { background: var(--blue); color: #fff; border-color: var(--blue); }
.a4-btn.pri:hover { background: var(--blue-d); }
.a4-btn.ok { background: var(--n2); color: #fff; border-color: var(--n2); }
.a4-btn.on { border-color: var(--blue); color: var(--blue); background: #EEF3FF; }
.a4-btn[disabled] { opacity: .55; cursor: wait; }
.a4-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.a4-kpi.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a4-kpi > div { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.a4-kpi small { display: block; font-size: 12px; color: var(--mute); font-weight: 650; }
.a4-kpi b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.a4-kpi span { display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-kpi span.up { color: var(--mk-d); font-weight: 800; }
.a4-grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.a4-card { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.a4-card + .a4-card { margin-top: 0; }
.a4-pad0 { padding: 0; overflow: hidden; }
.a4-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.a4-card-h b { font-size: 14px; font-weight: 850; }
.a4-card-h small { font-size: 12px; color: var(--faint); }
.a4-lg { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--mute); }
.a4-lg i { width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; }
.a4-chart { width: 100%; height: auto; display: block; }
.a4-chart text { font-size: 11px; fill: #8794A7; font-family: var(--font); }
.a4-act { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a4-act li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; }
.a4-act .d { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #8FB0FF; margin-top: 5px; }
.a4-act .d.ok { background: var(--mk-d); } .a4-act .d.hi { background: #E5484D; } .a4-act .d.pol { background: #F2B54A; }
.a4-act b { font-weight: 800; margin-right: 4px; }
.a4-act small { display: block; color: var(--faint); font-size: 11.5px; }
.a4-tw { overflow-x: auto; }
.a4-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.a4-t th { text-align: left; font-size: 11.5px; font-weight: 800; color: var(--faint); padding: 9px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; background: #FAFBFD; }
.a4-t td { padding: 10px 12px; border-bottom: 1px solid #EEF2F8; color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.a4-t tbody tr:last-child td { border-bottom: 0; }
.a4-t .tx { white-space: normal; min-width: 140px; }
.a4-click tbody tr { cursor: pointer; }
.a4-click tbody tr:hover { background: #F7F9FD; }
.a4-click tbody tr.is-sel { background: #EEF3FF; }
.a4-t.mono code, .a4-hout code, .a4-key code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.a4-mini { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: #E7ECF5; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.a4-mini i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.a4 .st.s-run0 { background: #EEF1F6; color: #5B687D; }
.a4-file { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.a4-file .th { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #FFD9C2, #F4A3B5); }
.a4-file .th.t2 { background: linear-gradient(135deg, #FFE9A8, #F5B83D); } .a4-file .th.t3 { background: linear-gradient(135deg, #CFF5E5, #4FC9A0); }
.a4-file .th.t4 { background: linear-gradient(135deg, #D7E0F5, #7C93C9); } .a4-file .th.t5 { background: linear-gradient(135deg, #E3D7FF, #9C7CF0); } .a4-file .th.t6 { background: linear-gradient(135deg, #CDEBFF, #4BA3E8); }
.a4-file b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.a4-file small { display: block; font-size: 11.5px; color: var(--faint); }
.a4-sig { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.a4-sig i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: #F1F4F9; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.a4-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.a4-split.rv { grid-template-columns: 286px minmax(0, 1fr); }
.a4-split.it { grid-template-columns: minmax(0, 1fr) 320px; }
.a4-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.a4-sh { font-size: 15px; font-weight: 850; }
.a4-kv { display: grid; gap: 8px; border-top: 1px solid var(--hair); padding-top: 10px; }
.a4-kv div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.a4-kv span { color: var(--mute); }
.a4-why { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.a4-lin { border-radius: 12px; background: #F7F9FD; border: 1px solid var(--hair); padding: 10px 12px; }
.a4-lin > b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 850; margin-right: 6px; }
.a4-lin > b .ico { width: 14px; height: 14px; }
.a4-lin ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; display: grid; gap: 8px; position: relative; }
.a4-lin ol::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: #D3DBE7; }
.a4-lin li { position: relative; padding-left: 22px; font-size: 12.5px; color: var(--mute); }
.a4-lin li i { position: absolute; left: 3px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid #8FB0FF; box-sizing: border-box; }
.a4-lin li.me { color: var(--ink); font-weight: 800; }
.a4-lin li.me i { border-color: var(--blue); background: var(--blue); }
.a4-foot { display: flex; gap: 6px; font-size: 12px; color: var(--faint); line-height: 1.55; margin-top: 4px; }
.a4-foot .ico { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.a4-ql { display: grid; gap: 6px; align-content: start; }
.a4-q { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--hair); background: #fff; border-radius: 12px; padding: 9px 10px; cursor: pointer; font: inherit; }
.a4-q:hover { border-color: #B9C7E0; }
.a4-q.is-sel { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 85, 245, .1); }
.a4-q-s .ring b { font-size: 11px; }
.a4-q-m { min-width: 0; flex: 1; }
.a4-q-m b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-q-m small { display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-q-m > span { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.a4-q-m em { font-style: normal; font-size: 11.5px; color: var(--mute); font-weight: 700; }
.a4-d { padding: 16px 18px; }
.a4-d-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.a4-d-h b { display: block; font-size: 16px; font-weight: 880; letter-spacing: -.02em; }
.a4-d-h small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.a4-meta { font-size: 12px; color: var(--faint); margin: 8px 0 10px; display: flex; align-items: center; gap: 8px; }
.a4-sum { display: flex; align-items: center; gap: 14px; }
.a4-sum .dec { display: block; font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.a4-sum .dec.hi { color: #D93A3F; } .a4-sum .dec.mid { color: #B87300; } .a4-sum .dec.ok { color: var(--mk-d); }
.a4-sum small { display: block; font-size: 12px; color: var(--mute); }
.a4-sum .cnt { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.a4 .prev3.a4-prev { font-size: 14px; line-height: 1.85; max-height: 160px; padding: 12px 14px; }
.a4 .fdl { margin-top: 10px; }
.a4 .fd { padding: 11px 12px; }
.a4 .fd p { font-size: 13px; }
.a4-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.a4-done { font-size: 13px; font-weight: 750; color: var(--mk-d); }
.a4-live { display: grid; gap: 10px; }
.a4-live-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.a4-live-h b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 880; }
.a4-live-h b .ico { width: 16px; height: 16px; color: var(--blue); }
.a4-live-h span { font-size: 12px; color: var(--faint); }
.a4-ta { width: 100%; border: 1px solid #D3DBE7; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; background: #fff; }
.a4-ta:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.a4-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.a4-flags label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 10px 4px 8px; background: #fff; cursor: pointer; }
.a4-flags input { accent-color: var(--blue); margin: 0; }
.a4-flags select { height: 30px; border-radius: 8px; border: 1px solid var(--hair); font: inherit; font-size: 12.5px; padding: 0 6px; background: #fff; }
.a4-flags .a4-btn { margin-left: auto; }
.a4-err { font-size: 13px; color: #B42328; background: #FFF1F1; border-radius: 10px; padding: 10px 12px; }
.a4-tg { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.a4-tg li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F8; font-size: 13.5px; }
.a4-sw { width: 38px; height: 22px; border-radius: 11px; border: 0; background: #CBD4E3; position: relative; cursor: pointer; transition: background .2s; padding: 0; }
.a4-sw i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.a4-sw[aria-checked="true"] { background: var(--blue); }
.a4-sw[aria-checked="true"] i { transform: translateX(16px); }
.a4-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid #EEF2F8; }
.a4-chips > b { flex: 0 0 100%; font-size: 12px; color: var(--mute); font-weight: 800; }
.a4-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 750; border-radius: 8px; padding: 3px 4px 3px 9px; }
.a4-chip.x { background: #FFECEC; color: #B42328; } .a4-chip.m { background: #E3F6F1; color: var(--mk-d); }
.a4-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; opacity: .7; }
.a4-add { border: 1px dashed #B9C7E0; border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 12.5px; width: 84px; background: #fff; }
.a4-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: f; }
.a4-flow li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: #F7F9FD; }
.a4-flow b { font-size: 12.5px; font-weight: 850; color: var(--n2); }
.a4-flow span { color: var(--ink-2); }
.a4-cty { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.a4-cty li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #EEF2F8; font-size: 13px; }
.a4-cty b { font-weight: 850; }
.a4-cty span { color: var(--mute); font-size: 12.5px; }
.a4-ver { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.a4-ver b { color: var(--ink); font-size: 12.5px; }
.a4-ver code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; background: #F1F4F9; border-radius: 5px; padding: 1px 6px; margin-right: 6px; color: var(--ink-2); }
.a4-chain { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--hair); background: #FAFBFD; font-size: 12.5px; color: var(--mute); }
.a4-chain > b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.a4-chain > b .ico { width: 14px; height: 14px; }
.a4-chain > span:last-child { flex: 1 1 100%; }
.a4-hout { min-height: 20px; }
.a4-hout code { display: block; word-break: break-all; background: #0B1324; color: #7FF0DA; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.a4-hout small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 6px; }
.a4-ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.a4-int { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid var(--hair); background: #fff; border-radius: 12px; padding: 11px 12px; cursor: pointer; font: inherit; }
.a4-int b { font-size: 13.5px; font-weight: 850; }
.a4-int span:not(.stt) { font-size: 12px; color: var(--mute); line-height: 1.5; }
.a4-int:hover:not([disabled]) { border-color: #B9C7E0; }
.a4-int.is-sel { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 85, 245, .1); }
.a4-int[disabled] { cursor: default; background: #FAFBFD; }
.a4-code { margin: 0; background: #0B1324; color: #DCE6FF; border-radius: 10px; padding: 12px; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.a4-key { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 6px 10px; }
.a4-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.a4-hb li { display: grid; grid-template-columns: 128px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.a4-hb i { display: block; height: 10px; border-radius: 5px; background: #EEF2F8; overflow: hidden; }
.a4-hb s { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #1F55F5, #6E92FF); text-decoration: none; }
.a4-hb b { text-align: right; font-variant-numeric: tabular-nums; }
.a4-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.a4-rank li { border-radius: 12px; background: #F7F9FD; padding: 10px 12px; display: grid; gap: 2px; }
.a4-rank em { font-style: normal; font-size: 11.5px; font-weight: 850; color: var(--blue); }
.a4-rank span { font-size: 12.5px; font-weight: 750; color: var(--ink); line-height: 1.4; }
.a4-rank b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.a4-toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--n0); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 650; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); transition: opacity .3s, transform .3s var(--ease); max-width: 90%; text-align: center; }
.a4-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.a4-toast a { color: #7FF0DA; }
.a4-toast code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #7FF0DA; }
.a4-toast small { color: #9FB0D6; }
@media (max-width: 1100px) {
  .a4-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a4-split, .a4-split.it { grid-template-columns: minmax(0, 1fr); }
  .a4-side { position: static; }
  .a4-rank { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .a4-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .a4-nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; scrollbar-width: none; }
  .a4-nav::-webkit-scrollbar { display: none; }
  .a4-nav button { width: auto; flex: 0 0 auto; padding: 8px 12px; gap: 6px; }
  .a4-nav button small { display: none; }
  .a4-nav button[aria-selected="true"]::before { display: none; }
  .a4-nav-foot { display: none; }
  .a4-main { max-height: none; padding: 16px 14px 20px; }
  .a4-search { display: none; }
  .a4-split.rv { grid-template-columns: minmax(0, 1fr); }
  .a4-ql { grid-auto-flow: column; grid-auto-columns: 236px; overflow-x: auto; padding-bottom: 4px; }
  .a4-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .a4-top { gap: 8px; padding: 0 12px; }
  .a4-ws small, .a4-logo b { display: none; }
  .a4-kpi, .a4-kpi.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a4-ints { grid-template-columns: minmax(0, 1fr); }
  .a4-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a4-hb li { grid-template-columns: 100px minmax(0, 1fr) 36px; }
  .a4-flags .a4-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- 기술 쪽 ---------- */
.dotl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dotl li { position: relative; padding-left: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.dotl li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: #9FB0CF; }
.eng4 { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--hair); }
.eng4:first-of-type { border-top: 0; padding-top: 8px; }
.eng4-h { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.eng4-h > i { flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--n2); color: #fff; display: flex; align-items: center; justify-content: center; }
.eng4-h > i .ico { width: 23px; height: 23px; }
.eng4-h > div { flex: 1 1 420px; min-width: 0; }
.eng4-h h3 { font-size: 24px; font-weight: 880; letter-spacing: -.03em; }
.eng4-h h3 small { font-size: 15px; color: var(--mute); font-weight: 700; margin-left: 6px; letter-spacing: -.01em; }
.eng4-h p { color: var(--mute); font-size: 16px; margin-top: 6px; }
.eng4-h > .btn, .eng4-h > .stt { align-self: center; }
.eng4-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; }
.eng4-b > div > b { display: block; font-size: 13.5px; font-weight: 800; color: var(--blue); margin-bottom: 10px; }
.lv4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lv4 li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.lv4 .st { justify-content: center; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.st.s-done { background: #0E2A6B; color: #fff; } .st.s-hi { background: #FFE6E7; color: #B42328; } .st.s-wait { background: #FFF3DC; color: #9A5B00; } .st.s-run0 { background: #EEF1F6; color: #5B687D; } .st.s-ok { background: #E3F6F1; color: var(--mk-d); }
.eng4-n { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 20px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.eng4-w { display: flex; gap: 8px; margin-top: 12px; font-size: 14px; color: #6B4A10; background: #FFF8EA; border: 1px solid #F3DDAE; border-radius: 12px; padding: 11px 14px; }
.eng4-w .ico { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: #B06A00; }
.fp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.fp-imgs { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; align-items: end; }
.fp-imgs figure { margin: 0; }
.fp-imgs img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hair); background: #fff; }
.fp-imgs figcaption { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 2px 10px; align-items: center; }
.fp-imgs figcaption b { font-size: 13.5px; font-weight: 850; grid-column: 1; }
.fp-imgs figcaption span { font-size: 12px; color: var(--mute); grid-column: 1; }
.fp-grid { grid-column: 2; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 6px; background: #fff; border: 1px solid var(--hair); }
.fp-out { border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); padding: 18px 18px 14px; display: grid; gap: 4px; }
.fp-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.fp-row span { font-weight: 800; font-size: 14px; color: var(--ink); }
.fp-row b { font-size: 14.5px; font-weight: 850; color: var(--n2); font-variant-numeric: tabular-nums; }
.fp-row em { grid-column: 2; font-style: normal; font-size: 13px; font-weight: 750; }
.fp-row em.ok { color: var(--mk-d); } .fp-row em.no { color: var(--mute); }
.fp-row.sha b { font-weight: 650; font-size: 12.5px; color: var(--ink-2); }
.fp-row.sha em { color: var(--mute); font-weight: 600; font-size: 12.5px; }
.fp-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.fp-note { font-size: 12.5px; color: var(--mute); line-height: 1.6; padding-top: 8px; }
.steps7 { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; counter-reset: s7; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.steps7 li { padding: 16px 14px; border-left: 1px solid var(--hair); counter-increment: s7; background: #fff; }
.steps7 li:first-child { border-left: 0; }
.steps7 li::before { content: counter(s7, decimal-leading-zero); display: block; font-size: 12px; font-weight: 850; color: var(--blue); font-variant-numeric: tabular-nums; }
.steps7 b { display: block; font-size: 14.5px; font-weight: 850; margin-top: 4px; }
.steps7 span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 4px; line-height: 1.55; }
.stg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.stg-c { border-radius: 18px; border: 1px solid var(--hair); padding: 22px; position: relative; background: #fff; }
.stg-c::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--n2); }
.stg-c:nth-child(2)::before { background: var(--blue); } .stg-c:nth-child(3)::before { background: #8FB0FF; }
.stg-t { font-size: 12.5px; font-weight: 800; color: var(--mute); }
.stg-c h3 { font-size: 20px; font-weight: 880; letter-spacing: -.03em; margin: 6px 0 14px; }
.stg-g { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #CDD6E5; font-size: 13.5px; color: var(--ink-2); }
.stg-g b { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 850; color: #B06A00; border: 1px solid #C77A06; border-radius: 999px; padding: 0 8px; }
.lim { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; max-width: 860px; }
.lim li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--hair); font-size: 15.5px; color: var(--ink-2); line-height: 1.65; }
.lim li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 2px; background: var(--ink); }
.mt48 { margin-top: 48px; }
@media (max-width: 1100px) {
  .steps7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps7 li:nth-child(5) { border-left: 0; }
  .steps7 li:nth-child(n+5) { border-top: 1px solid var(--hair); }
  .fp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .eng4-b, .stg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .steps7 { grid-template-columns: minmax(0, 1fr); }
  .steps7 li { border-left: 0; border-top: 1px solid var(--hair); }
  .steps7 li:first-child { border-top: 0; }
  .fp-imgs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fp-imgs figure:first-child { grid-column: 1 / -1; }
  .lv4 li { grid-template-columns: 88px minmax(0, 1fr); }
  .eng4-h h3 { font-size: 21px; }
}

/* ---------- 도입 상담 ---------- */
.ct4 { background: linear-gradient(180deg, #F3F6FB 0%, #fff 60%); padding: 64px 0 88px; }
.ct4-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: start; }
.crumb4 { font-size: 14px; font-weight: 800; color: var(--blue); }
.ct4-a h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 900; letter-spacing: -.046em; line-height: 1.18; margin-top: 12px; }
.ct4-lead { color: var(--mute); font-size: 17px; line-height: 1.75; margin-top: 18px; max-width: 560px; }
.ct4-steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: c4; display: grid; gap: 0; max-width: 560px; }
.ct4-steps li { counter-increment: c4; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.ct4-steps li::before { content: counter(c4); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--n2); color: #fff; font-size: 13px; font-weight: 850; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.ct4-steps li:nth-child(n+4)::before { background: #fff; color: var(--n2); border: 1.5px solid var(--n2); }
.ct4-steps b { font-size: 16px; font-weight: 850; }
.ct4-steps span { font-size: 13.5px; color: var(--mute); }
.ct4-box { margin-top: 22px; max-width: 560px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); padding: 18px 20px; }
.ct4-box > b { display: block; font-size: 14.5px; font-weight: 850; margin-bottom: 10px; }
.ct4-mail { margin-top: 20px; font-size: 14.5px; color: var(--mute); }
.ct4-f { position: sticky; top: 92px; }
.ct4-form { background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 28px 28px 24px; box-shadow: 0 30px 70px rgba(14, 42, 107, .12); }
.ct4-form h2 { font-size: 22px; font-weight: 880; letter-spacing: -.03em; }
.ct4-fs { color: var(--mute); font-size: 13.5px; margin: 4px 0 6px; }
.ct4-form label em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #B42328; margin-left: 4px; }
.ct4-form .btn-l { width: 100%; margin-top: 6px; }

/* ---------- 회사 ---------- */
.qs4 { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qs4 li { border-radius: 16px; background: var(--paper); padding: 18px 20px; font-size: 16.5px; font-weight: 750; color: var(--ink); line-height: 1.5; border-left: 4px solid var(--mk); }
.tm4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.tm { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--hair); border-radius: 20px; padding: 24px; }
.tm-av { flex: 0 0 64px; height: 64px; border-radius: 18px; background: var(--n2); color: #fff; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.tm-av.b { background: var(--blue); }
.tm b { display: block; font-size: 20px; font-weight: 880; letter-spacing: -.02em; }
.tm em { display: block; font-style: normal; font-size: 13.5px; font-weight: 750; color: var(--blue); margin-top: 2px; }
.tm p { font-size: 14.5px; color: var(--mute); margin-top: 10px; line-height: 1.7; }
.tl4 { list-style: none; margin: 32px 0 0; padding: 0; position: relative; max-width: 860px; }
.tl4::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: #D3DBE7; }
.tl4 li { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 40px; padding: 12px 0; position: relative; }
.tl4 li::before { content: ""; position: absolute; left: 112px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--n2); border: 3px solid var(--paper); box-sizing: content-box; margin-left: -1px; }
.tl4 li.next::before { background: #fff; border: 2px solid var(--blue); width: 12px; height: 12px; }
.tl4 time { font-size: 14px; font-weight: 850; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; padding-top: 1px; grid-row: 1 / span 2; }
.tl4 li.next time { color: var(--blue); }
.tl4 b { font-size: 16px; font-weight: 850; }
.tl4 span { font-size: 14px; color: var(--mute); }
.co4-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.co4-info h2 { font-size: 24px; font-weight: 880; letter-spacing: -.03em; }
.kv4 { margin: 18px 0 0; }
.kv4 div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 14.5px; }
.kv4 dt { color: var(--mute); font-weight: 650; }
.kv4 dd { margin: 0; color: var(--ink-2); font-weight: 650; }
.cta4.v { flex-direction: column; align-items: flex-start; }

/* ---------- 사이트 진단 ---------- */
.scan4 { border-radius: 22px; border: 1px solid var(--hair); background: #fff; padding: 26px; box-shadow: 0 24px 60px rgba(14, 42, 107, .1); }
.scan4 label { display: block; font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.scan4 .row2 { display: flex; gap: 10px; }
.scan4 .row2 .inp { flex: 1; height: 54px; font-size: 16px; }
.scan4 .row2 .btn { height: 54px; padding: 0 22px; }
.scan4 .hint { font-size: 13px; color: var(--faint); margin-top: 10px; }
@media (max-width: 960px) {
  .ct4-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ct4-f { position: static; }
  .tm4, .qs4, .co4-info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ct4 { padding: 40px 0 64px; }
  .ct4-form { padding: 22px 18px 20px; }
  .tl4::before { left: 6px; }
  .tl4 li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .tl4 li::before { left: 0; }
  .tl4 time { text-align: left; grid-row: auto; }
  .scan4 .row2 { flex-direction: column; }
  .tm { flex-direction: column; }
  .kv4 div { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---------- API · AI 연동 ---------- */
.q3s { border-top: 0; padding: 0 0 64px; }
.q3 { list-style: none; margin: -46px 0 0; padding: 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: q3; border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(14, 42, 107, .12); }
.q3 li { counter-increment: q3; display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 22px; border-left: 1px solid var(--hair); }
.q3 li:first-child { border-left: 0; }
.q3 li::before { content: counter(q3); width: 28px; height: 28px; border-radius: 50%; background: var(--n1); color: #fff; font-weight: 850; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.q3 b { font-size: 18px; font-weight: 860; letter-spacing: -.02em; }
.q3 span { flex: 1; color: var(--mute); font-size: 15px; line-height: 1.65; }
.q3 a { margin-top: 8px; font-weight: 800; font-size: 14.5px; }
.dl3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.dl3 a { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 14px; background: #fff; color: var(--ink); transition: border-color .2s var(--ease); }
.dl3 a:hover { border-color: var(--n2); text-decoration: none; }
.dl3 .ico { grid-row: span 2; width: 20px; height: 20px; color: var(--blue); }
.dl3 b { font-size: 15.5px; font-weight: 850; }
.dl3 span { grid-column: 2; font-size: 13px; color: var(--mute); line-height: 1.5; }
.code .code-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-family: var(--font); }
.code .code-tabs::-webkit-scrollbar { display: none; }
.code .code-tabs button { flex: 0 0 auto; height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0; color: #8FA3C7; font-size: 13.5px; }
.code .code-tabs button:hover { color: #fff; }
.code .code-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .06); color: #fff; border-bottom-color: var(--mk); }
.code .tabpane { padding-top: 0; color: inherit; font-size: inherit; }
.code .code-h a { color: #CFE0FF; }
[data-page="developers"] pre.code-b { margin: 0; font-family: inherit; font-size: inherit; white-space: pre; word-break: normal; overflow-x: auto; }
.code ol.n8n { margin: 0; padding: 4px 0 4px 22px; display: grid; gap: 8px; white-space: normal; word-break: keep-all; font-family: var(--font); font-size: 14.5px; line-height: 1.7; color: #DCE6FF; }
.code ol.n8n b { color: #fff; }
.code ol.n8n code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: rgba(255, 255, 255, .07); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.kvt.mono tbody th { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.dev-note { margin-top: 14px; font-size: 14px; color: var(--mute); line-height: 1.7; }
.dev-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--paper); border: 1px solid var(--hair); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
/* 5.0 개발자: 동작 순서 · 불러 보기 · 부가 기능 줄 */
.dev-flow { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: dvf; border-top: 2px solid var(--n2); }
.dev-flow li { counter-increment: dvf; position: relative; padding: 22px 22px 6px 0; display: flex; flex-direction: column; gap: 8px; }
.dev-flow li + li { padding-left: 22px; border-left: 1px solid var(--hair); }
.dev-flow li::before { content: counter(dvf); font-size: 12.5px; font-weight: 850; color: var(--blue); letter-spacing: .02em; }
.dev-flow b { font-size: 17px; font-weight: 850; color: var(--ink); }
.dev-flow span { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.dev-flow code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--paper); border: 1px solid var(--hair); padding: 1px 6px; border-radius: 6px; }
.dev-try { gap: 18px; padding: 18px 2px 4px; align-items: start; }
.dev-try .form3 { color: var(--ink); background: #fff; border-radius: 14px; padding: 18px; font-family: var(--font); font-size: 15px; white-space: normal; }
.dev-try .form3 .txt, .dev-try .form3 .sel, .dev-try .form3 .inp { font-family: var(--font); }
.dev-try .form3 label[for], .dev-try .form3 .field > label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.dev-try .drop3 { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--hair); border-radius: 14px; background: var(--paper); text-align: center; cursor: pointer; color: var(--ink-2); font-family: var(--font) !important; font-size: 14px !important; }
.dev-try .drop3:hover, .dev-try .drop3.over { border-color: var(--blue); background: #EEF3FF; }
.dev-try .drop3 .ico { width: 24px; height: 24px; color: var(--blue); }
.dev-try .drop3 b { font-size: 15px; color: var(--ink); word-break: break-all; }
.dev-try .drop3 span { font-size: 13px; color: var(--mute); }
.dev-try .form3 label { color: var(--ink); }
.dev-try .dev-note { color: #C9D6F2; }
.dev-try .form3 .dev-note { color: var(--mute); }
.dev-try > .code { margin: 0; }
.kvt tr.sub th, .kvt tr.sub td { color: var(--mute); background: var(--paper); }
.dl3.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .q3 { grid-template-columns: minmax(0, 1fr); }
  .q3 li { border-left: 0; border-top: 1px solid var(--hair); padding: 20px 20px 18px; }
  .q3 li:first-child { border-top: 0; }
  .dl3, .dl3.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-flow { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .dev-flow li, .dev-flow li + li { padding: 16px 0 16px 18px; border-left: 2px solid var(--n2); }
}
@media (max-width: 520px) {
  .dl3 a { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 12px; }
  .dl3 .ico { grid-row: auto; margin-bottom: 6px; }
  .dl3 span { grid-column: 1; }
}
.code[data-tabs] { white-space: normal; }
[data-page="developers"] pre.code-b.prose { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; font-family: var(--font); font-size: 14px; line-height: 1.8; }
.kvt.api td:nth-child(2) { white-space: nowrap; }
@media (max-width: 640px) {
  .kvt-wrap:not(.keep) { overflow: visible; border: 0; border-radius: 0; }
  .kvt-wrap:not(.keep) .kvt { min-width: 0; }
  .kvt-wrap:not(.keep) thead { display: none; }
  .kvt-wrap:not(.keep) tbody, .kvt-wrap:not(.keep) tr { display: block; }
  .kvt-wrap:not(.keep) tr { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px 12px; background: #fff; }
  .kvt-wrap:not(.keep) tr + tr { margin-top: 10px; }
  .kvt-wrap:not(.keep) th, .kvt-wrap:not(.keep) td { display: block; border: 0; padding: 0; width: auto !important; white-space: normal !important; font-size: 14.5px; }
  .kvt-wrap:not(.keep) tbody th { font-size: 15.5px; margin-bottom: 2px; }
  .kvt-wrap:not(.keep) td[data-l] { margin-top: 8px; }
  .kvt-wrap:not(.keep) td[data-l]::before { content: attr(data-l); display: block; font-size: 12.5px; font-weight: 750; color: var(--faint); margin-bottom: 1px; }
  .kvt.mono tbody th { font-size: 13.5px; overflow-wrap: anywhere; }
}

/* ---------- 제품 쪽 ---------- */
.p4h-shot { padding-bottom: 0; }
.shot4 { margin: 52px 0 0; border-radius: 18px 18px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -10px 60px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; height: clamp(260px, 38vw, 500px); position: relative; }
.shot4-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #EEF2F8; border-bottom: 1px solid var(--hair); }
.shot4-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD3E1; }
.shot4-bar span { margin-left: 10px; font-size: 12.5px; color: var(--mute); font-weight: 650; background: #fff; border-radius: 7px; padding: 3px 12px; }
.shot4-bar .tag-ex { margin-left: auto; }
.shot4 img { display: block; width: 100%; height: auto; }
.mods4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 40px; }
.mod4 { border-top: 1px solid var(--hair); padding: 28px 0 30px; }
.mod4 header { display: flex; align-items: center; gap: 14px; }
.mod4-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--n1); color: var(--mk); display: inline-flex; align-items: center; justify-content: center; }
.mod4-ic .ico { width: 22px; height: 22px; }
.mod4 h3 { font-size: 20px; font-weight: 870; letter-spacing: -.03em; line-height: 1.25; }
.mod4 header small { display: block; font-size: 13px; color: var(--faint); font-weight: 650; margin-top: 2px; }
.mod4 > p { color: var(--mute); font-size: 15.5px; line-height: 1.72; margin-top: 14px; }
.mod4 ul { list-style: none; margin: 16px 0 0; padding: 0; }
.mod4 li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--hair); font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.mod4 li .stt { flex: 0 0 auto; }
.lane4 { display: grid; grid-template-columns: 136px repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(5, minmax(76px, auto)); grid-auto-flow: column; margin-top: 40px; background: #fff; border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; }
.ln-col { display: contents; }
.ln-h { padding: 16px 10px 14px; font-weight: 860; font-size: 16px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; background: var(--paper); border-bottom: 1px solid var(--hair); }
.ln-h i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--n1); color: #fff; font-size: 12px; font-weight: 850; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.ln-h small { font-size: 12px; color: var(--faint); font-weight: 700; }
.ln-l { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); border-top: 1px solid var(--hair); }
.ln-l::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B9C3D6; flex: 0 0 auto; }
.ln-l.l2 { background: #ECFBF7; color: var(--mk-d); }
.ln-l.l2::before { background: var(--mk); }
.ln-lab .ln-l:nth-child(2) { border-top: 0; }
.ln-c { padding: 8px 6px; border-top: 1px solid var(--hair); display: flex; align-items: stretch; }
.ln-c.l1 { border-top: 0; }
.ln-c.l2 { background: #F4FDFA; }
.ln-c p { margin: 0; width: 100%; border-radius: 11px; padding: 9px 10px; background: #fff; border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 2px; }
.ln-c p b { font-size: 13.5px; font-weight: 820; line-height: 1.35; letter-spacing: -.01em; }
.ln-c p span { font-size: 12px; color: var(--mute); line-height: 1.45; }
.ln-c.l2 p { border-color: #BFEFE4; }
.ln-c.hum p { background: var(--n1); border-color: var(--n1); }
.ln-c.hum p b { color: #fff; }
.ln-c.hum p span { color: var(--tx-d); }
.org4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; margin-top: 40px; align-items: start; }
.tree4, .tree4 ol { list-style: none; margin: 0; padding: 0; }
.tree4 ol { margin-left: 11px; padding-left: 22px; }
.tree4 li { position: relative; padding-top: 12px; }
.tree4 ol > li::before { content: ""; position: absolute; left: -22px; top: 28px; width: 16px; border-top: 1.5px solid #D5DCE8; }
.tree4 ol > li::after { content: ""; position: absolute; left: -22px; top: -4px; height: 32px; border-left: 1.5px solid #D5DCE8; }
.tree4 li > b { display: inline-block; font-size: 15.5px; font-weight: 860; letter-spacing: -.02em; background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 6px 12px; box-shadow: 0 6px 16px rgba(14, 42, 107, .06); }
.tree4 > li > b { background: var(--n1); color: #fff; border-color: var(--n1); }
.tree4 li.leaf > b { background: #E3F6F1; border-color: #BFEFE4; color: var(--mk-d); }
.tree4 li > span { display: block; font-size: 13px; color: var(--mute); margin: 5px 0 0 2px; line-height: 1.5; }
.org4 > * { min-width: 0; }
.perm4 .kvt-wrap { margin-top: 0; }
.kvt.perm { min-width: 560px; }
.kvt.perm caption { caption-side: top; text-align: left; padding: 14px 16px; font-weight: 850; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--hair); }
.kvt.perm caption .stt { margin-left: 6px; vertical-align: 2px; }
.kvt.perm thead th { text-align: center; }
.kvt.perm thead th:first-child { text-align: left; }
.kvt.perm tbody th { width: 34%; font-size: 14px; }
.kvt.perm td { text-align: center; font-size: 15px; padding: 12px 8px; }
.pm { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.pm.full { background: var(--n2); }
.pm.half { border: 1.5px solid var(--blue); background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); }
.pm.none { width: 10px; height: 2px; border-radius: 1px; background: #C3CCDB; vertical-align: 3px; }
.scr4 { margin-top: 36px; }
.scr4 .tabs { border-bottom: 0; gap: 8px; padding-bottom: 0; }
.scr4 .tabs button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; font-size: 14.5px; color: var(--ink-2); }
.scr4 .tabs button[aria-selected="true"] { background: var(--n1); color: #fff; border-color: var(--n1); }
.scr4 .tabpane { padding-top: 24px; }
.scr4 .tabpane.on { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 36px; align-items: center; }
.scr4 figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 30px 70px rgba(14, 42, 107, .14); background: #fff; }
.scr4 figure img { display: block; width: 100%; height: auto; }
.scr4-t h3 { font-size: 24px; font-weight: 880; letter-spacing: -.03em; margin-top: 12px; }
.scr4-t ul { margin: 14px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.scr4-t .btn { margin-top: 22px; }
.int4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.int4 > a, .int4 > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border: 1px solid var(--hair); border-radius: 16px; background: #fff; color: var(--ink); min-height: 148px; }
.int4 > a:hover { border-color: var(--n2); text-decoration: none; }
.int4 > div { background: var(--paper); }
.int4 b { font-size: 16.5px; font-weight: 860; letter-spacing: -.02em; }
.int4 span { flex: 1; font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.int4 em { align-self: flex-start; }
.sec4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.sec4 > div { background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 26px 26px 18px; }
.sec4 h3 { font-size: 18px; font-weight: 870; letter-spacing: -.02em; }
.chk4 { list-style: none; margin: 10px 0 0; padding: 0; }
.chk4 li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--hair); }
.chk4 li:first-child { border-top: 0; }
.chk4 li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--mk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304221C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.chk4 b { display: block; font-size: 15.5px; font-weight: 820; }
.chk4 span { display: block; font-size: 14px; color: var(--mute); line-height: 1.65; margin-top: 3px; }
.chk4 span .stt { margin-left: 4px; vertical-align: 1px; }
@media (max-width: 1100px) {
  .lane4 { grid-template-columns: 112px repeat(6, minmax(0, 1fr)); }
  .ln-c p b { font-size: 12.5px; }
  .int4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .mods4 { grid-template-columns: minmax(0, 1fr); }
  .org4 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .scr4 .tabpane.on { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sec4 { grid-template-columns: minmax(0, 1fr); }
  .lane4 { display: block; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .ln-col.ln-lab { display: none; }
  .ln-col { display: block; background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 0 0 8px; overflow: hidden; }
  .ln-col + .ln-col { margin-top: 10px; }
  .ln-h { border-bottom: 0; }
  .ln-c { border: 0; padding: 4px 14px; background: transparent !important; flex-direction: column; }
  .ln-c:empty { display: none; }
  .ln-c[data-l]::before { content: attr(data-l); font-size: 12px; font-weight: 750; color: var(--faint); margin: 4px 0 4px; }
}
@media (max-width: 640px) {
  .shot4 { margin-top: 36px; height: 220px; }
  .shot4-bar span { display: none; }
  .scr4 .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .scr4 .tabs::-webkit-scrollbar { display: none; }
  .scr4 .tabs button { flex: 0 0 auto; }
  .int4 { grid-template-columns: minmax(0, 1fr); }
  .int4 > a, .int4 > div { min-height: 0; }
  .mod4 li { align-items: flex-start; }
  .tree4 ol { margin-left: 8px; padding-left: 14px; }
  .tree4 ol > li::before { left: -14px; width: 10px; }
  .tree4 ol > li::after { left: -14px; }
}

/* ---------- 솔루션 쪽 ---------- */
.seg4, .anc { scroll-margin-top: 72px; }
.anc { display: block; height: 0; }
.segnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.segnav a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #fff; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.segnav a:hover { text-decoration: none; border-color: var(--mk); background: rgba(59, 214, 189, .06); }
.segnav small { font-size: 12.5px; font-weight: 800; color: var(--mk); }
.segnav b { font-size: 19px; font-weight: 880; letter-spacing: -.03em; }
.segnav span { flex: 1; font-size: 14.5px; color: var(--tx-d); line-height: 1.6; }
.segnav em { font-style: normal; align-self: flex-start; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #04221C; background: var(--mk); border-radius: 999px; padding: 2px 10px; }
.seg4-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 40px; align-items: start; }
.seg4-in > * { min-width: 0; }
.vs4 { border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; background: #fff; }
.vs4 > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.vs4 > div + div { border-top: 1px solid var(--hair); }
.vs4-h span { padding: 12px 18px; font-size: 13px; font-weight: 800; color: var(--mute); background: var(--paper); }
.vs4-h span + span { color: var(--mk-d); background: #ECFBF7; }
.vs4 p { margin: 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.vs4 p + p { color: var(--ink-2); background: #FAFFFD; border-left: 1px solid var(--hair); }
.vs4 p b { color: var(--ink); font-weight: 820; }
.board4 { border: 1px solid var(--hair); border-radius: 20px; background: #fff; padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(14, 42, 107, .1); }
.board4-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board4-h b { font-size: 16px; font-weight: 860; }
.board4 table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.board4 th, .board4 td { text-align: left; padding: 11px 6px; border-top: 1px solid var(--hair); font-size: 14px; }
.board4 thead th { font-size: 12px; color: var(--faint); font-weight: 750; border-top: 0; padding-top: 4px; }
.board4 tbody th { font-weight: 800; color: var(--ink); }
.board4 tbody th small { display: block; font-size: 12px; color: var(--faint); font-weight: 650; }
.board4 td { color: var(--ink-2); font-weight: 750; }
.board4 td.hi { color: #D93B3B; }
.board4 td.wt { color: #5B48D9; }
.board4 .bar { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: #E8EDF5; margin-right: 8px; vertical-align: 2px; position: relative; overflow: hidden; }
.board4 .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--mk); border-radius: 3px; }
.board4 > p { font-size: 12.5px; color: var(--faint); margin-top: 10px; }
.feat4 { margin-top: 36px; }
.feat4 h3 { font-size: 17px; font-weight: 860; letter-spacing: -.02em; }
.feat4 ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.feat4 li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px dashed var(--hair); font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.feat4 li .stt { flex: 0 0 auto; }
.feat4.tight { margin-top: 0; }
.feat4.tight ul { grid-template-columns: minmax(0, 1fr); }
.seg4-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.seg4-foot.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg4-foot > div { border-radius: 20px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.seg4-foot b { font-size: 16.5px; font-weight: 860; letter-spacing: -.02em; }
.seg4-foot p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.seg4-foot small { font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.earn4 { background: #FFF8EC; border: 1px solid #F3DDB5; }
.goal4 { background: #fff; border: 1px solid var(--hair); }
.goal4 dl { margin: 4px 0 0; display: grid; gap: 0; }
.goal4 dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.goal4 dt { font-size: 14px; color: var(--mute); }
.goal4 dd { margin: 0; font-size: 16px; font-weight: 880; color: var(--n2); letter-spacing: -.02em; }
.plan4 { background: linear-gradient(150deg, var(--n1), var(--n0)); color: #fff; }
.plan4 small { color: var(--mk); font-weight: 800; font-size: 12.5px; }
.plan4 b { color: #fff; font-size: 20px; }
.plan4 span { flex: 1; color: var(--tx-d); font-size: 14px; line-height: 1.65; }
.plan4 .row { gap: 8px; margin-top: 8px; }
.plan4 .btn-g { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.batch4 { margin-top: 40px; border: 1px solid var(--hair); border-radius: 20px; background: #fff; overflow: hidden; }
.batch4-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.batch4-h b { font-size: 16px; font-weight: 860; }
.batch4-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.6fr) minmax(0, 2fr); gap: 20px; align-items: center; padding: 16px 20px; }
.batch4-row + .batch4-row { border-top: 1px solid var(--hair); }
.batch4 .bt small, .batch4 .bd small { display: block; font-size: 12px; color: var(--faint); font-weight: 650; }
.batch4 .bt p { margin-top: 4px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.batch4 mark { background: #FFE3E3; color: #B42318; border-radius: 4px; padding: 0 2px; }
.batch4 .bd { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dec { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 820; }
.dec.fix { background: #FFE9E6; color: #C4320A; }
.dec.exp { background: #EFEAFF; color: #5B48D9; }
.dec.ok { background: #E3F6F1; color: var(--mk-d); }
.batch4 .br { font-size: 13.5px; font-weight: 750; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--hair); line-height: 1.5; }
.pf4 { margin-top: 40px; border-radius: 24px; background: linear-gradient(160deg, var(--n1), var(--n0)); padding: 30px; color: #fff; }
.pf4-lane { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; }
.pf4-n { border-radius: 16px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 4px; }
.pf4-n small { font-size: 12px; font-weight: 800; color: var(--tx-d2); }
.pf4-n b { font-size: 17px; font-weight: 870; letter-spacing: -.02em; color: #fff; }
.pf4-n span { font-size: 13.5px; color: var(--tx-d); }
.pf4-n.p { background: rgba(255, 255, 255, .06); }
.pf4-n.a { background: rgba(59, 214, 189, .12); border-color: rgba(59, 214, 189, .5); }
.pf4-n.a small { color: var(--mk); }
.pf4-a { position: relative; }
.pf4-a::before { content: ""; position: absolute; left: 8px; right: 10px; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .3); }
.pf4-a::after { content: ""; position: absolute; right: 6px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid rgba(255, 255, 255, .5); border-right: 0; }
.pf4-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pf4-money div { padding: 16px 18px 2px 0; display: flex; flex-direction: column; gap: 4px; }
.pf4-money b { font-size: 14.5px; font-weight: 850; color: var(--mk); }
.pf4-money span { font-size: 14px; color: var(--tx-d); line-height: 1.6; }
.seg4-in.rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.seg4-in.rev .code pre.code-b { margin: 0; font-family: inherit; font-size: inherit; white-space: pre; word-break: normal; overflow-x: auto; }
.seg4-more .col-it a { display: inline-block; margin-top: 10px; font-weight: 800; font-size: 14.5px; }
@media (max-width: 960px) {
  .segnav { grid-template-columns: minmax(0, 1fr); }
  .seg4-in, .seg4-in.rev { grid-template-columns: minmax(0, 1fr); }
  .feat4 ul { grid-template-columns: minmax(0, 1fr); }
  .seg4-foot, .seg4-foot.two { grid-template-columns: minmax(0, 1fr); }
  .batch4-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .batch4 .bd { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pf4 { padding: 22px 18px; }
  .pf4-lane { grid-template-columns: minmax(0, 1fr); }
  .pf4-a { height: 28px; }
  .pf4-a::before { left: 50%; right: auto; top: 4px; bottom: 6px; border-top: 0; border-left: 2px dashed rgba(255, 255, 255, .3); }
  .pf4-a::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 2px; border: 5px solid transparent; border-top: 7px solid rgba(255, 255, 255, .5); border-bottom: 0; }
  .pf4-money { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vs4 > div { grid-template-columns: minmax(0, 1fr); }
  .vs4 p + p { border-left: 0; border-top: 1px dashed var(--hair); }
  .vs4-h { display: none !important; }
  .vs4 p:first-child::before { content: "지금 "; font-weight: 800; color: var(--faint); }
  .vs4 p + p::before { content: "AIMarker 뒤 "; font-weight: 800; color: var(--mk-d); }
  .board4 th, .board4 td { padding: 10px 4px; font-size: 13px; }
  .board4 .bar { display: none; }
}

@media (max-width: 640px) { .br-d { display: none; } }

/* ---------- 요금 쪽 ---------- */
.plans4-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plans4-h p { font-size: 14px; color: var(--mute); }
.plans4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; align-items: stretch; }
.pl4 { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 22px; padding: 28px 26px 24px; background: #fff; }
.pl4.best { background: linear-gradient(165deg, var(--n1), var(--n0)); border-color: var(--n1); color: #fff; box-shadow: 0 30px 70px rgba(14, 42, 107, .22); }
.pl4 .flag { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 820; color: #04221C; background: var(--mk); border-radius: 999px; padding: 3px 10px; }
.pl4 h2 { font-size: 24px; font-weight: 900; letter-spacing: -.03em; }
.pl4 header p { font-size: 14px; color: var(--mute); margin-top: 4px; }
.pl4.best h2 { color: #fff; }
.pl4.best header p { color: var(--tx-d); }
.pl4 .pr { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; }
.pl4 .pr b { font-size: 30px; font-weight: 900; letter-spacing: -.035em; color: var(--n2); }
.pl4 .pr span { font-size: 14px; font-weight: 700; color: var(--mute); }
.pl4.best .pr b { color: #fff; }
.pl4.best .pr span { color: var(--tx-d); }
.pl4 dl { margin: 18px 0 0; border-top: 1px solid var(--hair); }
.pl4 dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.pl4 dt { color: var(--mute); }
.pl4 dd { margin: 0; font-weight: 820; color: var(--ink); text-align: right; }
.pl4.best dl, .pl4.best dl div { border-color: rgba(255, 255, 255, .12); }
.pl4.best dt { color: var(--tx-d2); }
.pl4.best dd { color: #fff; }
.pl4 ul { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.pl4 li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.pl4 li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #E3F6F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A68' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; }
.pl4.best li { color: var(--tx-d); }
.pl4.best li::before { background-color: rgba(59, 214, 189, .2); }
.pl4 > .btn { width: 100%; }
.cmp4 { margin-top: 36px; background: #fff; }
.cmp4 .pt { min-width: 820px; }
.cmp4 .pt thead th em { font-size: 16px; }
.cmp4 .pt td { font-size: 14px; }
.cmp4 .pt tr.grp th { background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 850; padding: 10px 20px; }
.cmp4 .pt tbody th[scope="row"] { color: var(--ink-2); font-weight: 720; }
.cmp4 .pt tbody th[scope="row"], .cmp4 .pt thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.cmp4 .pt tr.grp th { position: sticky; left: 0; }
.rev4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; }
.rev4 > div { padding: 24px 24px 22px; border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.rev4 > div:nth-child(3n + 1) { border-left: 0; }
.rev4 > div:nth-child(-n + 3) { border-top: 0; }
.rev4 > div:first-child { background: #F3F6FF; }
.rev4-k { align-self: flex-start; font-size: 12px; font-weight: 820; color: var(--n2); background: #E8EEFF; border-radius: 999px; padding: 2px 10px; }
.rev4 b { font-size: 17.5px; font-weight: 870; letter-spacing: -.02em; margin-top: 4px; }
.rev4 p { font-size: 14.5px; color: var(--mute); line-height: 1.7; }
.faq4 { margin: 32px 0 0; }
@media (max-width: 960px) {
  .plans4 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .rev4 { grid-template-columns: minmax(0, 1fr); }
  .rev4 > div { border-left: 0 !important; border-top: 1px solid var(--hair) !important; }
  .rev4 > div:first-child { border-top: 0 !important; }
}
.swipe-hint { display: none; }
@media (max-width: 640px) {
  .swipe-hint { display: flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 13px; font-weight: 700; color: var(--faint); }
  .swipe-hint::after { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 4px 0 0 0 transparent; }
  .swipe-hint + .cmp4 { margin-top: 10px; }
  .cmp4 .pt { min-width: 700px; }
  .cmp4 .pt th, .cmp4 .pt td { padding: 12px 12px; }
  .cmp4 .pt tbody th[scope="row"] { width: 112px; font-size: 13px; }
}
.cmp4 .pt td.no { color: #A7B1C2; font-weight: 600; }