/* 정결 v3 — 참고: lineaprompt.com 의 구성(떠 있는 메뉴, 큰 왼쪽 제목, 오른쪽 실제 제품 화면, 단계 목록, 어두운 기록 구역, 3단 가격) */
:root {
  --page: #FFFFFF; --bg: #F2F5F9; --grid: rgba(20, 41, 75, .035); --card: #FFFFFF; --ink: #14294B; --text: #1F2A37; --muted: #5B6878; --line: #E1E7EE;
  --navy: #14294B; --navy-2: #1E3A66; --navy-3: #0D1C35; --teal: #1F6FA8; --mint: #5AA9DC; --mint-bg: #E6F1FA; --tint: #E8EEF6;
  --red: #B23A30; --red-bg: #FBE9E7; --amber: #9A6200; --amber-bg: #FFF3DC;
  --r: 16px; --r-s: 10px; --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 2px 8px rgba(17, 24, 39, .05); --shadow-lg: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .08);
  --w: 1200px; --nav-h: 61px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--text); background: var(--page);
  font-size: 17px; line-height: 1.6; word-break: keep-all; font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--w); margin-inline: auto; padding-inline: 24px; }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.12; font-weight: 800; }
.lead { font-size: 1.1875rem; color: var(--muted); max-width: 34em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* 떠 있는 메뉴 */
.nav { position: sticky; top: 0; z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.nav .in { display: flex; align-items: center; gap: 4px; max-width: var(--w); margin: 0 auto; padding: 10px 24px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; color: var(--ink); font-size: 1.05rem; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.logo i { width: 22px; height: 22px; border-radius: 7px; background: var(--navy); display: grid; place-items: center; }
.logo i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mint); }
.nav .menu { display: flex; gap: 2px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }  /* 늘 한 줄: 다 안 들어가면 메뉴만 옆으로 밀어 봄 */
.nav .menu::-webkit-scrollbar { display: none; }
.nav .logo, .nav .login-link, .nav .cta { flex-shrink: 0; }
.nav a.m { padding: 6px clamp(5px, .7vw, 10px); border-radius: 8px; font-size: clamp(.8rem, .5rem + .5vw, .95rem); color: var(--muted); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.nav a.m:hover { background: var(--bg); color: var(--ink); }
.nav .menu a.m { position: relative; color: #6B7785; }  /* 메뉴 글자: 한 단계 밝게(흰 바탕 대비 약 4.6:1 유지) */
.nav .menu a.m + a.m::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background: #7E899C; transform: translateY(-50%); }  /* 메뉴 사이 구분선: 남색 #14294B 에 흰색 45% (흰 바탕 대비 3.5:1) */
.nav .menu a.m:hover, .nav .menu a.m:focus-visible { background: #EEF6FC; color: var(--teal); }  /* 마우스 올림: 밝은 하늘 파스텔 */
.nav .cta { background: var(--navy); color: #fff; font-weight: 700; padding: 8px 16px; border-radius: 10px; font-size: .95rem; margin-left: auto; white-space: nowrap; transition: background .15s; }
.nav .cta:hover { background: var(--navy-2); }
@media (max-width: 900px) { .nav .menu { gap: 0; } .nav a.m { padding-inline: 3px; font-size: .75rem; } .logo { padding-right: 8px; } .nav .cta { padding: 7px 12px; font-size: .88rem; } }
@media (max-width: 760px) { .nav .menu { padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }  /* 다 안 들어가는 폭: 오른쪽 흐림으로 더 있음을 알림 */
@media (max-width: 560px) { .nav .in { padding-inline: 16px; } }

/* 공통 조각 */
.btn { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 22px; border-radius: 12px; font-weight: 800; transition: transform .15s, background .15s, box-shadow .15s; }
.btn small { font-size: .72rem; font-weight: 700; opacity: .78; }
.btn.p { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.btn.p:hover { background: var(--navy-2); transform: translateY(-1px); }
.btn.s { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.s:hover { border-color: #B9C6D3; }
.btn:active { transform: scale(.98); }
.under { position: relative; white-space: nowrap; isolation: isolate; }
.under::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .13em; height: .32em; border-radius: 3px; background: #C9E3F5; }   /* 파스텔 하늘색 형광펜 (표와 같은 계열) */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.facts li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: .875rem; color: var(--text); }
.note { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.tag { display: inline-block; font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.tag.ok { background: var(--mint-bg); color: var(--teal); } .tag.diff { background: #FFFFFF; color: #A3322A; box-shadow: inset 0 0 0 1px #DCC3BF; } .tag.wait, .tag.doc { background: var(--tint); color: #1E3A66; }

/* 제품 창 */
.win { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.win-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.win-top b { color: var(--ink); font-size: .9375rem; }
.win-body { padding: 14px; }
.row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.row + .row { margin-top: 8px; }
.row .ic { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C4CFDA; }
.row.done .ic { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px #fff; }
.row b { display: block; color: var(--ink); font-size: .98rem; }
.row span.s { font-size: .82rem; color: var(--muted); }
.row.sel { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 2px 6px rgba(17, 24, 39, .14); }
.row.sel b { color: #fff; } .row.sel span.s { color: #C9D6EA; } .row.sel .ic { border-color: var(--mint); }
.row.sel .go { background: var(--mint); color: var(--navy); font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 8px; }
.row .go2 { border: 1px solid var(--navy); color: var(--navy); background: #FFFFFF; font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 8px; white-space: nowrap; transition: background .15s; }  /* 결산 맡기기: 테두리 버튼 */
.row .go2:hover { background: #EEF6FC; }
#est-mt { display: block; margin-top: 6px; font-weight: 700; }  /* 매달 맡기기: 대표세무사 참고·한 달 총액 줄 */
#est [hidden] { display: none; }
.meter { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-top: 6px; } .meter i { display: block; height: 100%; background: var(--mint); border-radius: 99px; }
.win-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.win-foot span { font-size: .8rem; background: var(--bg); color: var(--muted); padding: 5px 10px; border-radius: 8px; }
.seals { position: absolute; top: -54px; right: 22px; display: flex; gap: 10px; z-index: 2; }
.seals span { width: 58px; height: 58px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(17, 24, 39, .08), inset 0 -2px 0 #E5E9EF;
  display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: var(--teal); transform: rotate(var(--rot, 0deg)); }
.seals span:nth-child(1) { --rot: -6deg; } .seals span:nth-child(3) { --rot: 7deg; color: var(--muted); border-style: dashed; }

/* 첫 화면 */
.hero { padding: 64px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1.04; font-weight: 800; }
.hero .lead { margin-top: 24px; }
.hero .act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.stage { position: relative; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; gap: 64px; } .hero { padding-top: 40px; } }

/* 구역 공통 */
.sec { padding: 120px 0; }
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.split.rev > :first-child { order: 2; }
.checks { margin-top: 26px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.checks li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; background: var(--mint-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231F6FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.checks b { color: var(--ink); }
.sec p.lead { margin-top: 18px; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 40px; } .split.rev > :first-child { order: 0; } .sec { padding: 88px 0; } }

/* 단계 목록 */
.steps { padding: 8px; }
.steps li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; padding: 16px 14px; border-radius: 12px; align-items: start; }
.steps li + li { border-top: 1px dashed var(--line); }
.steps .n { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--ink); font-weight: 800; display: grid; place-items: center; font-size: .9rem; border: 1px solid var(--line); }
.steps li.on { background: var(--mint-bg); } .steps li.on .n { background: var(--teal); color: #fff; border-color: var(--teal); }
.steps b { color: var(--ink); font-size: 1.05rem; } .steps p { font-size: .92rem; color: var(--muted); margin-top: 2px; }
.steps .t { font-size: .78rem; color: var(--muted); font-weight: 700; white-space: nowrap; padding-top: 6px; }
.result { margin: 6px 8px 8px; background: var(--navy-3); color: #CFE3F0; border-radius: 12px; padding: 14px 16px; font-size: .9rem; }
.result b { color: var(--mint); display: block; margin-bottom: 4px; }

/* 업무 목록 창 */
.lib { display: grid; grid-template-columns: 170px 1fr; min-height: 420px; }
.lib nav { border-right: 1px solid var(--line); padding: 12px; background: #F7F9FB; }
.lib nav p { font-size: .75rem; color: var(--muted); font-weight: 800; margin: 6px 8px 8px; }
.lib nav button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: .92rem; font-weight: 600; color: var(--text); }
.lib nav button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.lib nav button:hover:not([aria-pressed="true"]) { background: var(--bg); }
.lib .list { padding: 12px; }
.lib .item { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.lib .item + .item { margin-top: 8px; }
.lib .item b { color: var(--ink); } .lib .item p { grid-column: 1; font-size: .86rem; color: var(--muted); }
.lib .item .tag { grid-row: 1; grid-column: 2; justify-self: end; }
.lib .sum { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-size: .92rem; }
.lib .sum b { font-size: 1.1rem; color: #fff; }
@media (max-width: 640px) { .lib { grid-template-columns: 1fr; } .lib nav { border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; } .lib nav p { width: 100%; } .lib nav button { width: auto; } }

.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kinds button { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: .9rem; font-weight: 700; color: var(--text); background: var(--card); }
.kinds button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
#est input[type=range] { margin-top: 8px; height: 24px; }
#diff tr.hide { display: none; }
#diff td:first-child { width: 112px; white-space: nowrap; }
.hero.dark h1 { font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.6rem); }
.dark .btn.p { background: var(--mint); color: var(--navy); box-shadow: none; } .dark .btn.p:hover { background: #7BBCE6; }
.dark .btn.s { background: rgba(255,255,255,.06); color: #fff; border-color: #3A5277; }
.dark .note, .dark .facts li { color: #B7C5D9; } .dark .facts li { background: rgba(255,255,255,.06); border-color: #23395C; }

/* 어두운 기록 구역 */
.dark { background: var(--navy-3); color: #C9D6EA; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; }
.dark h2 { color: #fff; } .dark .lead { color: #B7C5D9; } .dark .checks b { color: #fff; } .dark .checks li { color: #B7C5D9; } .dark .checks li::before { background-color: rgba(90, 169, 220, .18); }
.log { background: #0A1629; border: 1px solid #23395C; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.log .win-top { border-color: #23395C; color: #8FA3BF; } .log .win-top b { color: #fff; }
.log table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.log td { padding: 11px 16px; border-top: 1px solid #16294A; color: #D6E2F0; }
.log td:first-child { color: #7F93B0; width: 70px; } .log td.r { text-align: right; color: var(--mint); white-space: nowrap; }
.log td .who { color: #8FA3BF; font-size: .8rem; display: block; }
.log .tot { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid #23395C; color: #fff; font-weight: 700; }
.log .tot span { color: var(--mint); }

/* 비교 표 */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 40px; font-size: .95rem; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp tr:last-child > * { border-bottom: 0; }
.cmp thead th { background: #F7F9FB; color: var(--muted); font-size: .85rem; }
.cmp thead th.us { background: var(--navy); color: #fff; }
.cmp td.us { background: #F3FAF9; color: var(--ink); font-weight: 600; }
.cmp tbody th { color: var(--ink); width: 18%; }
.cmp-wrap { overflow-x: auto; }
.cmp-src { margin-top: 12px; font-size: .82rem; color: var(--muted); }

/* 클로저 */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.crew li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0 20px 20px; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
.crew img { width: calc(100% + 40px); max-width: none; margin: 0 -20px 12px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.crew b { color: var(--ink); font-size: 1.05rem; } .crew span { font-size: .88rem; color: var(--muted); }
.crew p { grid-column: 1 / -1; margin-top: 10px; font-size: .92rem; }
.crew .lv { justify-self: start; grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 860px) { .crew { grid-template-columns: 1fr; } }

/* 가격 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.plan .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan h3 { font-size: 1.15rem; }
.plan .won { font-size: 2.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.plan .won small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan .desc { font-size: .95rem; color: var(--muted); }
.plan ul { display: grid; gap: 8px; font-size: .95rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plan li::before { content: "✓"; color: var(--teal); font-weight: 900; }
.plan .btn { margin-top: auto; align-items: center; }
.plan.pick { border: 2px solid var(--navy); box-shadow: var(--shadow-lg); position: relative; }
.plan.pick .badge { background: var(--navy); color: #fff; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.price-note { margin-top: 18px; font-size: .9rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }

/* 자주 묻는 질문 */
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%235B6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); max-width: 62ch; }
.center { text-align: center; } .center .lead { margin-inline: auto; }

/* 클로저 모집 */
.join { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; box-shadow: var(--shadow); }
.join h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.join ol { display: grid; gap: 10px; counter-reset: j; }
.join ol li { counter-increment: j; background: var(--bg); border-radius: 12px; padding: 12px 14px 12px 48px; position: relative; font-size: .95rem; }
.join ol li::before { content: counter(j); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; }
.join .btn { margin-top: 22px; align-items: center; }
@media (max-width: 860px) { .join { grid-template-columns: 1fr; padding: 28px; } }

/* 바닥글 */
footer { margin-top: 120px; border-top: 1px solid var(--line); background: var(--card); }
footer .wrap { padding-block: 48px 36px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; font-size: .92rem; color: var(--muted); }
footer b { display: block; color: var(--ink); margin-bottom: 8px; }
footer a { display: block; padding: 3px 0; } footer a:hover { color: var(--ink); }
footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: .82rem; }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr 1fr; } }

/* 모바일 하단 고정 버튼 */
.sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: none; }
.sticky a { display: flex; justify-content: center; align-items: center; min-height: 54px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 800; box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { .sticky.show { display: block; } body { padding-bottom: 80px; } }

/* 등장 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.sel-rev { font: inherit; font-weight: 700; color: var(--navy); padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); min-height: 44px; }
.hero + .sec { padding-top: 40px; }
/* 신청서 */
.req { padding-top: 64px; }
.req h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.1; font-weight: 800; color: var(--ink); }
.req .lead { margin-top: 20px; }
:is(#req, #join-form, .acct) .f { margin-top: 14px; }
:is(#req, #join-form, .acct) label { display: block; font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 6px; }
:is(#req, #join-form, .acct) input:not([type=radio]):not([type=checkbox]), :is(#req, #join-form, .acct) select, :is(#req, #join-form, .acct) textarea { width: 100%; font: inherit; color: var(--text); padding: 11px 12px; min-height: 46px; border: 1px solid #C4CFDB; border-radius: 10px; background: var(--card); }
:is(#req, #join-form, .acct) input:focus, :is(#req, #join-form, .acct) select:focus, :is(#req, #join-form, .acct) textarea:focus { outline: 2px solid var(--teal-ink, var(--teal)); outline-offset: 1px; border-color: transparent; }
:is(#req, #join-form, .acct) .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
:is(#req, #join-form, .acct) .hint { font-size: .82rem; color: var(--muted); margin-top: 4px; }
:is(#req, #join-form, .acct) .err, #form-err { font-size: .85rem; color: #A3322A; font-weight: 700; margin-top: 4px; }
:is(#req, #join-form, .acct) .pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
:is(#req, #join-form, .acct) .pick label { position: relative; margin: 0; padding: 12px; border: 1px solid #C4CFDB; border-radius: 12px; cursor: pointer; }
:is(#req, #join-form, .acct) .pick input { position: absolute; opacity: 0; }
:is(#req, #join-form, .acct) .pick b { display: block; }
:is(#req, #join-form, .acct) .pick span { font-size: .82rem; font-weight: 600; color: var(--muted); }
:is(#req, #join-form, .acct) .pick label:has(input:checked) { border: 2px solid var(--ink); padding: 11px; background: #F4F7FB; }
:is(#req, #join-form, .acct) .pick label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
:is(#req, #join-form, .acct) .hp { position: absolute; left: -9999px; }
:is(#req, #join-form, .acct) .agree-box { margin-top: 18px; font-size: .88rem; color: var(--muted); }
:is(#req, #join-form, .acct) .agree-box summary { cursor: pointer; font-weight: 700; color: var(--text); }
:is(#req, #join-form, .acct) .agree-box p { margin-top: 8px; line-height: 1.7; }
:is(#req, #join-form, .acct) .agree { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
:is(#req, #join-form, .acct) .agree input { width: 20px; height: 20px; accent-color: var(--teal); }
.done h2 { font-size: 1.6rem; color: var(--ink); }
.done p { margin: 12px 0 20px; }
@media (max-width: 900px) { .req { padding-top: 48px; } }
@media (max-width: 560px) { :is(#req, #join-form, .acct) .two, :is(#req, #join-form, .acct) .pick { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .req .steps { display: none; } }
/* 자료 가져오기 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drop { display: grid; place-items: center; gap: 4px; text-align: center; padding: 28px 16px; border: 2px dashed #9FB0C3; border-radius: 14px; background: #F7F9FC; cursor: pointer; }
.drop b { color: var(--ink); }
.drop span { font-size: .88rem; color: var(--muted); }
.drop.over, .drop:focus-within { border-color: var(--teal); background: var(--mint-bg); }
#imp .row { grid-template-columns: 1fr auto; }
@media (max-width: 960px) { .crew img { aspect-ratio: 16 / 9; } }
/* 개인정보처리방침 */
.policy .wrap { max-width: 860px; }
.policy h2 { font-size: 1.2rem; color: var(--ink); margin: 32px 0 10px; }
.policy p { line-height: 1.75; }
.policy table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); }
.policy th, .policy td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.policy th { background: #F4F7FB; color: var(--ink); }
@media (max-width: 560px) { .policy table { font-size: .84rem; } .policy th, .policy td { padding: 8px; } }
/* AI 직원 */
.crew li { position: relative; }
.crew.ai img { aspect-ratio: 1 / 1; object-position: center 20%; }
.ai-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.crew.ai b small { font-weight: 600; color: var(--muted); }
.crew.ai .learn { font-size: .85rem; color: var(--muted); }
.crew.ai .learn b { font-size: .85rem; margin-right: 4px; }
.ai-rules { max-width: 860px; margin: 28px auto 0; }
@media (max-width: 960px) { .crew.ai img { aspect-ratio: 4 / 3; } }
:is(#req, #join-form, .acct) .pick { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* 맡기는 방식 고르기 */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(10px, 2vw, 16px); margin-top: 28px; }   /* 폭에 맞춰 2칸↔1칸 (2026-11-10) */
.mode-card { display: grid; gap: 8px; align-content: start; text-align: left; padding: 24px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.mode-card b { font-size: clamp(1.1rem, .95rem + .6vw, 1.3rem); color: var(--ink); }
.mode-card { padding: clamp(16px, 3vw, 24px); }
.mode-card p, .mode-card .sum { display: block; color: var(--muted); }
.mode-card .tag { justify-self: start; }
.mode-price { font-weight: 800; color: var(--ink); }
.mode-price small { font-weight: 600; color: var(--muted); }
.mode-card:hover { border-color: #9FB0C3; }
.mode-card[aria-pressed="true"] { border-color: var(--ink); background: #F4F7FB; }
.mode-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.guide h2 { font-size: 1.6rem; color: var(--ink); }
.guide h3 { font-size: 1.05rem; color: var(--ink); margin: 20px 0 8px; }
.guide .lead { margin-top: 12px; }
:is(#req, #join-form, .acct) .pick label[hidden], .guide[hidden], #req-area[hidden] { display: none; }
/* 클로저 지원서·소개·공개 정보창 */
.vis { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #EEF1F5; color: var(--muted); vertical-align: middle; }
.vis.pub { background: var(--mint-bg); color: var(--teal); }
.lbl { font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 6px; padding: 0; }
fieldset.f { border: 0; padding: 0; margin: 14px 0 0; }
.chk { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#req, #join-form, .acct) .chk label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid #C4CFDB; border-radius: 10px; font-weight: 600; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--teal); }
.chk label:has(input:checked) { border-color: var(--ink); background: #F4F7FB; }
.cl-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cl-act .btn { min-height: 44px; padding: 6px 14px; font-size: .9rem; }
.h-sm { font-size: 1.4rem; color: var(--ink); }
.checks.no li::before { background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23A3322A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
dialog#closer-dlg { margin: auto; border: 0; border-radius: 18px; padding: 28px; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); }
dialog#closer-dlg::backdrop { background: rgba(20, 41, 75, .45); }
dialog#closer-dlg h2 { color: var(--ink); font-size: 1.4rem; }
dialog#closer-dlg h2 small { font-size: .95rem; color: var(--muted); margin-left: 6px; }
dialog#closer-dlg .act { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.pub { display: grid; grid-template-columns: 9em 1fr; gap: 8px 12px; margin-top: 14px; font-size: .93rem; }
.pub dt { color: var(--muted); font-weight: 600; }
.pub dd { margin: 0; color: var(--text); }
.closer-info { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: #F4F7FB; font-size: .9rem; color: var(--muted); }
.closer-info b { color: var(--ink); }
[data-only][hidden] { display: none; }
@media (max-width: 560px) { .pub { grid-template-columns: 1fr; gap: 2px; } .pub dd { margin-bottom: 8px; } }
.crew .ai-badge { color: #fff; font-size: .8rem; }
/* 브라우저 기본 모양을 브랜드 색으로 */
::selection { background: #D6EAF8; color: var(--ink); }
html { scrollbar-color: #9FB0C3 transparent; accent-color: var(--teal); }
input, textarea { caret-color: var(--teal); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* 메인 첫 화면: 정결 한눈에 */
.glance dl { margin: 0; padding: 4px 20px 12px; }
.glance dl > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.glance dl > div:first-child { border-top: 0; }
.glance dt { font-weight: 800; color: var(--ink); font-size: .95rem; }
.glance dd { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text); }
.glance dd b { color: var(--ink); }
.glance dd a { margin-left: 4px; font-size: .82rem; font-weight: 700; color: var(--teal); white-space: nowrap; text-decoration: underline; }
#room .stage { margin-top: 54px; }
@media (max-width: 560px) { .glance dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* 첫 화면 사진 + 한눈에 표 */
.hero-stage { display: grid; }
.hero-photo { margin: 0; border-radius: 18px; overflow: hidden; position: relative; width: 100%; height: 170px; box-shadow: var(--shadow); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo figcaption { position: absolute; top: 10px; right: 10px; background: rgba(20, 41, 75, .78); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.hero-stage { gap: 12px; }
.hero-stage .glance { margin: 0; position: relative; }
@media (max-width: 960px) { .hero-photo { height: 180px; } }
/* 첫 화면 진행 순서 띠: 한 번만 차오름 */
.flow { position: relative; margin-top: 32px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.flow ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.flow li { display: grid; justify-items: center; text-align: center; gap: 4px; }
.flow li b { color: var(--ink); font-size: .98rem; margin-top: 6px; }
.flow li span:last-child { font-size: .82rem; color: var(--muted); }
.flow-dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--teal); color: var(--teal); position: relative; z-index: 1; }
.flow-track { position: absolute; left: calc(24px + 10%); right: calc(24px + 10%); top: 45px; height: 2px; background: var(--line); }
.flow-track i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .flow-track i { transform: scaleX(0); animation: flowFill 3.2s cubic-bezier(.16, 1, .3, 1) .5s forwards; }
  .flow-dot { border-color: #C4CFDB; color: #9FB0C3; animation: flowLit .45s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.5s + var(--i) * .7s); }
  .flow li b, .flow li span:last-child { opacity: .45; animation: flowText .45s ease-out forwards; animation-delay: calc(.5s + var(--i) * .7s); }
}
@keyframes flowFill { to { transform: scaleX(1); } }
@keyframes flowLit { to { border-color: var(--teal); color: #fff; background: var(--teal); } }
@keyframes flowText { to { opacity: 1; } }
@media (max-width: 760px) {
  .flow ol { grid-template-columns: 1fr; gap: 14px; }
  .flow li { grid-template-columns: 48px 1fr; justify-items: start; text-align: left; column-gap: 14px; }
  .flow li .flow-dot { grid-row: span 2; }
  .flow li b { margin-top: 2px; }
  .flow-track { left: 47px; right: auto; top: 46px; bottom: 46px; width: 2px; height: auto; }
  .flow-track i { transform-origin: top; }
  @media (prefers-reduced-motion: no-preference) { .flow-track i { transform: scaleY(0); animation-name: flowFillY; } }
}
@keyframes flowFillY { to { transform: scaleY(1); } }
.split > * { min-width: 0; } .sel-rev { max-width: 58vw; text-overflow: ellipsis; }
#req-area { align-items: start; }
@media (min-width: 961px) { #req-area > :first-child { position: sticky; top: calc(var(--nav-h) + 35px); } }  /* 신청서 화면 안에서만 안내가 따라옴 */
/* AI 직원 회계기준 담당 구분, 구분 기준 */
.ai-group { margin: 40px 0 0; }
.ai-group h3 { font-size: 1.25rem; color: var(--ink); }
.ai-group p { color: var(--muted); margin-top: 4px; }
.ai-group + .crew { margin-top: 16px; }
.std-guide h3 { font-size: 1.3rem; color: var(--ink); }
.std-rules { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 12px; }
.std-rules b { display: block; color: var(--ink); }
.std-rules small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
#std-check { align-items: stretch !important; } /* build.mjs 인라인 align-items:start 덮어씀 — 인라인을 지우면 !important 제거 */ #std-quiz { display: flex; flex-direction: column; } #std-quiz .win-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
#std-quiz .q { border: 0; padding: 0; margin: 0 0 12px; }
#std-quiz legend { font-weight: 700; color: var(--ink); font-size: 1em; margin-bottom: 6px; padding: 0; }
#std-quiz .q label { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 6px 12px; border: 1px solid #C4CFDB; border-radius: 10px; font-size: 1em; cursor: pointer; }
#std-quiz .q label:has(input:checked) { border-color: var(--ink); background: #F4F7FB; }
#std-quiz input { accent-color: var(--teal); }
@media (max-width: 400px) { #std-quiz .q label { padding: 5px 9px; margin-right: 4px; gap: 4px; } }
[id] { scroll-margin-top: calc(var(--nav-h) + 15px); }
/* 고른 방식 표시, 클로저 거르기 */
.mode-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 14px; background: #F4F7FB; }
.mode-picked span { color: var(--muted); font-size: .9rem; font-weight: 600; }
.mode-picked b { color: var(--ink); font-size: 1.15rem; }
.mode-picked .btn { margin-left: auto; min-height: 40px; padding: 4px 14px; font-size: .9rem; }
.modes[hidden], .mode-picked[hidden], #cl-list > li[hidden] { display: none; }
.cl-filter { display: grid; gap: 10px; margin-top: 24px; }
.cl-filter div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-filter span { width: 5em; font-weight: 700; color: var(--ink); font-size: .92rem; }
.cl-filter button { padding: 7px 12px; border-radius: 999px; border: 1px solid #C4CFDB; background: var(--card); font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); cursor: pointer; min-height: 40px; }
.cl-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.crew .cl-std { font-size: .85rem; color: var(--teal); font-weight: 700; }
.hero .flow-wrap { display: block; }
/* 흰 바탕: 격자는 첫 화면에만 옅게, 아래로 갈수록 사라짐 */
.hero:not(.dark) { position: relative; isolation: isolate; }
.hero:not(.dark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.win, .flow, .plan, .crew li, .mode-card, .faq details { border-color: var(--line); }
/* 첫 화면 표: 색이 섞이지 않은 순수 회색 테두리·그림자, 머리줄 옅은 회색 */
.hero-stage .glance { border-color: #E5E7EB; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06); }
.hero-stage .glance .win-top { background: #F7F8FA; border-bottom-color: #E5E7EB; }
.hero-stage .glance dl > div { border-top-color: #ECEEF1; }
.hero-photo { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06); }
.cmp th, .cmp td { text-align: center; vertical-align: middle; }   /* 비교표 글자 가운데 정렬 (2026-11-07 요청) */
.cmp thead th:not(.us) { background: #EAF4FB; color: #2D5675; }   /* 비교표 머리줄 파스텔 하늘색 */
/* 비교표 파스텔 하늘색 한 계열로 (머리줄 #EAF4FB · 강조 머리칸 #CFE5F6 · 강조 열 #F4F9FD · 가로줄 #DCE8F2) */
.cmp { border-color: #DCE8F2; }
.cmp th, .cmp td { border-bottom-color: #DCE8F2; }
.cmp thead th.us { background: #CFE5F6; color: #173E5E; font-weight: 800; }
.cmp td.us { background: #F4F9FD; color: #1A324A; }
/* 회원가입·로그인·워크룸 */
.nav a.login-link { margin-left: auto; }
.nav a.login-link + .cta { margin-left: 6px; }
@media (max-width: 820px) { .nav a.m.login-link { display: inline-block; } }
.acct .win-body { display: grid; gap: 2px; }
.acct select, .acct input:not([type=radio]):not([type=checkbox]) { width: 100%; }
.room-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.room-top .lead { margin-top: 6px; }
.room-list { display: grid; gap: 16px; margin-top: 16px; }
.jcard .jhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 20px 0; }
.jcard .jhead b { display: block; color: var(--ink); font-size: 1.1rem; }
.jcard .jhead span:not(.tag) { font-size: .88rem; color: var(--muted); }
.jstep { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; margin: 14px 20px 0; padding: 0; }
.jstep li { font-size: .78rem; text-align: center; padding: 6px 2px; border-radius: 8px; background: var(--bg); color: var(--muted); font-weight: 600; }
.jstep li.done { background: var(--mint-bg); color: var(--teal); }
.jstep li.now { background: var(--ink); color: #fff; }
.jmemo { background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.jfiles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.jfiles li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.jfiles a { color: var(--teal); font-weight: 700; text-decoration: underline; }
.jfiles small { color: var(--muted); }
.jlogs { margin-top: 10px; font-size: .9rem; }
.jlogs summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.jlogs ul { margin: 6px 0 0 1.2em; color: var(--muted); }
.jact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.jact input, .jact select { font: inherit; padding: 9px 12px; min-height: 44px; border: 1px solid #C4CFDB; border-radius: 10px; background: var(--card); }
.jact input[type=number] { width: 110px; }
.jact .btn { min-height: 44px; padding: 6px 16px; font-size: .92rem; }
.jup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; max-width: 100%; box-sizing: border-box; border: 2px dashed #9FB0C3; border-radius: 10px; font-weight: 700; color: var(--ink); cursor: pointer; }
.jup input { font-size: .85rem; max-width: 100%; min-width: 0; }
@media (max-width: 560px) { .jstep li { font-size: .7rem; } }
/* 업무 파트 고르기 */
.picker { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.pgroup { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 8px; background: var(--card); margin: 0; }
.pgroup legend { font-weight: 800; color: var(--ink); font-size: 1rem; padding: 0 6px; }
.pitem { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 9px 4px; border-top: 1px solid #EEF2F6; cursor: pointer; }
.pitem:first-of-type { border-top: 0; }
.pitem input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.pitem b { display: block; color: var(--ink); font-size: .95rem; }
.pitem small { display: block; color: var(--text); font-size: .84rem; line-height: 1.5; margin-top: 2px; }
.pitem em { display: block; font-style: normal; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.pitem:has(input:checked) { background: var(--mint-bg); border-radius: 10px; }
.psum { grid-column: 1 / -1; position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-lg); font-size: .98rem; }
.psum small { color: var(--muted); }
.psum .btn { min-height: 46px; }
.pick-parts { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.pick-parts summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.pick-parts .picker { grid-template-columns: 1fr; margin-top: 12px; }
.pick-parts .psum { position: static; box-shadow: none; }
.jparts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1100px) { .picker { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .picker { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .psum { bottom: 84px; padding: 10px 14px; font-size: .9rem; } }   /* 모바일 아래 고정 버튼 위로 */
/* 업종 선택: 추천 표시·업종별 파트 */
.pitem[hidden], .pgroup[hidden], .ind-note[hidden] { display: none; }
.pind { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pind select { min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.ind-note { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--mint-bg); color: var(--ink); font-size: .92rem; }
.pitem .rec { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; background: var(--teal); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
/* 신청서·워크룸 안 파트 칸: 폼 label 규칙(id 선택자)보다 우선 */
:is(#req, #join-form, .acct) .pitem { display: grid; font-weight: 400; font-size: inherit; margin-bottom: 0; }
:is(#req, #join-form, .acct) .pitem[hidden] { display: none; }
/* 진행 순서 반복 모션: 첫 채움(약 4초) 뒤, 서류 칩이 단계마다 멈추며 이동하고 도착한 단계 원이 퍼짐 (10초 반복) */
.flow-packet { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .flow-packet { display: grid; place-items: center; position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 9px; background: #fff; color: var(--teal); border: 1.5px solid var(--teal); box-shadow: 0 6px 16px rgba(20, 41, 75, .18); z-index: 2; opacity: 0; animation: flowPacket 10s cubic-bezier(.65, 0, .35, 1) 4s infinite; }
  .flow-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; animation: flowPing 10s ease-out infinite; animation-delay: calc(4.3s + var(--i) * 2s); }
  .flow li b { animation: flowText .45s ease-out forwards calc(.5s + var(--i) * .7s), flowNow 10s ease-out infinite calc(4.3s + var(--i) * 2s); }
}
@keyframes flowPacket {
  0% { left: 0; opacity: 0; } 4%, 8% { left: 0; opacity: 1; }
  20%, 28% { left: 25%; } 40%, 48% { left: 50%; } 60%, 68% { left: 75%; }
  80%, 90% { left: 100%; opacity: 1; background: #fff; } 84%, 90% { background: var(--mint-bg); }
  96%, 100% { left: 100%; opacity: 0; }
}
@keyframes flowPacketY {
  0% { top: 0; opacity: 0; } 4%, 8% { top: 0; opacity: 1; }
  20%, 28% { top: 25%; } 40%, 48% { top: 50%; } 60%, 68% { top: 75%; }
  80%, 90% { top: 100%; opacity: 1; } 96%, 100% { top: 100%; opacity: 0; }
}
@keyframes flowPing { 0% { transform: scale(1); opacity: .7; } 12% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }
@keyframes flowNow { 0% { color: var(--teal); } 14% { color: var(--teal); } 22%, 100% { color: var(--ink); } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .flow-packet { top: 0; left: 50%; margin: -15px 0 0 -15px; animation-name: flowPacketY; }
}
/* 예상 금액 계산: 좁은 화면에서는 항목 이름 위·선택칸 아래, 금액 아래 버튼을 한 줄씩 (인라인 grid 열 지정보다 우선) */
@media (max-width: 560px) {
  #est .kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #est .kinds button { padding-inline: 4px; white-space: nowrap; }
  #est .row { grid-template-columns: 1fr !important; gap: 8px; }
  #est .row select, #est .sel-rev { width: 100%; max-width: 100%; font-size: 1rem; }
  #est .row .go, #est .row .tag, #est .row .go2 { justify-self: stretch; text-align: center; padding-block: 10px; }
  #est .row b { word-break: keep-all; }
}
@media (max-width: 360px) { #est .kinds { grid-template-columns: repeat(2, 1fr); } }
/* 대사 화면 예시 스캔 모션: 줄마다 0.42초 간격으로 훑고, 일치 줄은 자리 잡고 차이 줄은 주황으로 깜빡, 초안 줄은 왼쪽에서 들어옴 */
.log { position: relative; }
.log .scanbar { position: absolute; left: 0; right: 0; height: 2px; background: var(--mint); box-shadow: 0 0 14px 3px rgba(90, 169, 220, .55); opacity: 0; pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .log.scan .scanbar { animation: scanMove calc(var(--n) * .42s) linear forwards; }
  .log.scan #diff tr { animation: rowSame .5s ease-out both; animation-delay: calc(var(--r) * .42s); }
  .log.scan #diff tr.d:not(.fix) { animation-name: rowDiff; animation-duration: .9s; }
  .log.scan #diff tr.fix { animation-name: rowFix; animation-duration: .55s; animation-delay: calc(var(--r) * .42s + .15s); }
  .log.scan .tot { animation: rowSame .6s ease-out both; animation-delay: calc(var(--n) * .42s + .2s); }
}
@keyframes scanMove { 0% { transform: translateY(0); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(var(--h)); opacity: 0; } }
@keyframes rowSame { from { opacity: .2; } to { opacity: 1; } }
@keyframes rowDiff { 0% { opacity: .2; background: transparent; } 35% { opacity: 1; background: rgba(242, 179, 91, .24); } 100% { opacity: 1; background: rgba(242, 179, 91, .06); } }
@keyframes rowFix { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
/* 첫 화면 배치 (2026-11-08 조정): 오른쪽 표가 줄바꿈으로 길어지던 것을 넓혀 두 칸 높이를 맞추고, 아래 진행 띠와 간격 확보 */
@media (min-width: 961px) {
  .hero .wrap:not(.flow-wrap) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; }
  .hero-photo { height: 150px; }
  .hero .flow-wrap .flow { margin-top: 48px; }
  .hero-stage .glance dl { padding: 2px 18px 8px; }
  .hero-stage .glance dl > div { grid-template-columns: 6.2em 1fr; gap: 10px; padding: 8px 0; }
  .hero-stage .glance dd { line-height: 1.5; }
}
/* 휴대폰 다듬기 (2026-11-08)
   ① 첫 제목: 문장 하나가 한 줄에 들어가도록 화면 폭에 맞춰 글자 크기 조절(4줄 → 2줄), 낱말 중간 줄바꿈 막음 */
.hero h1, h2 { word-break: keep-all; }
@media (max-width: 560px) { .hero h1 { font-size: clamp(1.6rem, 8.3vw, 2.5rem); line-height: 1.18; letter-spacing: -.01em; } }
/* ② 체크칸: 기본 회색 칸 대신 브랜드 색 칸 (파트 고르기·동의 칸 공통) */
.pitem input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid #A9B7C8; border-radius: 6px; background: #fff; display: grid; place-content: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pitem input[type=checkbox]::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.2px 2.2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease-out; }
.pitem input[type=checkbox]:checked { background: var(--teal); border-color: var(--teal); }
.pitem input[type=checkbox]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.pitem input[type=checkbox]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pitem:hover input[type=checkbox]:not(:checked) { border-color: var(--teal); }
/* ③ 바닥글: 휴대폰에서는 정결 소개를 한 줄 전체로, 링크 묶음만 두 칸 */
@media (max-width: 760px) {
  footer .wrap { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  footer .wrap > div:first-child { grid-column: 1 / -1; line-height: 1.65; }
  footer .wrap > div:last-of-type { grid-column: auto; }
  footer a { padding: 5px 0; }
}
@media (max-width: 360px) { footer .wrap { grid-template-columns: 1fr; } }
/* ④ 첫 화면 버튼: 휴대폰에서는 두 버튼 같은 폭으로 쌓음 */
@media (max-width: 560px) { .hero .act { display: grid; grid-template-columns: 1fr; } .hero .act .btn { justify-content: center; text-align: center; } }
/* 작성·검토·승인 도장 모션 (8초 한 타임라인): 0.6초 간격으로 찍히고 잉크 번짐 → '승인' 남색 확정 → 세 개가 함께 사라지고 1초 쉰 뒤 다시 '작성'부터 */
.seals span { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .seals span:nth-child(1) { animation: seal0 8s ease-out infinite; }
  .seals span:nth-child(2) { animation: seal1 8s ease-out infinite; }
  .seals span:nth-child(3) { animation: seal2 8s ease-out infinite, sealApprove 8s ease-out infinite; }
  .seals span::after { content: ""; position: absolute; inset: -3px; border-radius: 18px; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }
  .seals span:nth-child(1)::after { animation: ink0 8s ease-out infinite; }
  .seals span:nth-child(2)::after { animation: ink1 8s ease-out infinite; }
  .seals span:nth-child(3)::after { animation: ink2 8s ease-out infinite; }
}
@keyframes seal0 {
  0%, 0.0% { opacity: 0; transform: translateY(-16px) rotate(var(--rot, 0deg)) scale(1.3); }
  3.5% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(.92); }
  6.0% { transform: rotate(var(--rot, 0deg)) scale(1.03); }
  8.5%, 80% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-8px) rotate(var(--rot, 0deg)) scale(1.05); }
}
@keyframes ink0 { 0%, 3.0% { opacity: 0; transform: scale(.92); } 3.5% { opacity: .8; transform: scale(1); } 13.0%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes seal1 {
  0%, 7.5% { opacity: 0; transform: translateY(-16px) rotate(var(--rot, 0deg)) scale(1.3); }
  11.0% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(.92); }
  13.5% { transform: rotate(var(--rot, 0deg)) scale(1.03); }
  16.0%, 80% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-8px) rotate(var(--rot, 0deg)) scale(1.05); }
}
@keyframes ink1 { 0%, 10.5% { opacity: 0; transform: scale(.92); } 11.0% { opacity: .8; transform: scale(1); } 20.5%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes seal2 {
  0%, 15.0% { opacity: 0; transform: translateY(-16px) rotate(var(--rot, 0deg)) scale(1.3); }
  18.5% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(.92); }
  21.0% { transform: rotate(var(--rot, 0deg)) scale(1.03); }
  23.5%, 80% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-8px) rotate(var(--rot, 0deg)) scale(1.05); }
}
@keyframes ink2 { 0%, 18.0% { opacity: 0; transform: scale(.92); } 18.5% { opacity: .8; transform: scale(1); } 28.0%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes sealApprove {
  0%, 22% { background: var(--card); color: var(--muted); border-style: dashed; border-color: var(--line); box-shadow: 0 2px 6px rgba(17, 24, 39, .08); }
  27%, 82% { background: var(--ink); color: #fff; border-style: solid; border-color: var(--ink); box-shadow: 0 4px 10px rgba(20, 41, 75, .22); }
  88%, 100% { background: var(--card); color: var(--muted); border-style: dashed; border-color: var(--line); box-shadow: 0 2px 6px rgba(17, 24, 39, .08); }
}
/* 워크룸 예시 체크리스트 순차 진행 모션 (도장과 같은 8초 주기): 자료 올림 → 법인카드 대사 → 매입 3자 대사(막대 0→86%) → 승인할 파일 남색 활성·승인하기 깜빡임 → 함께 초기화.
   각 줄 모양을 원·꼬리표·막대·배경으로 나눠 keyframes 를 따로 줌. 움직임 줄이기 설정이면 원래 정지 화면 */
@media (prefers-reduced-motion: no-preference) {
  .seals + .win .row:nth-child(1) { animation: rowAct1 8s ease-out infinite; }
  .seals + .win .row:nth-child(1) .ic { animation: icDone1 8s ease-out infinite; }
  .seals + .win .row:nth-child(1) > .tag { animation: tagPop1 8s cubic-bezier(.2,.9,.3,1.3) infinite; }
  .seals + .win .row:nth-child(2) { animation: rowAct2 8s ease-out infinite; }
  .seals + .win .row:nth-child(2) .ic { animation: icDone2 8s ease-out infinite; }
  .seals + .win .row:nth-child(2) > .tag { animation: tagPop2 8s cubic-bezier(.2,.9,.3,1.3) infinite; }
  .seals + .win .row:nth-child(3) { animation: rowAct3 8s ease-out infinite; }
  .seals + .win .row:nth-child(3) .meter i { animation: meterFill 8s cubic-bezier(.4,0,.2,1) infinite; }
  .seals + .win .row:nth-child(3) > .tag { animation: tagPop3 8s ease-out infinite; }
  .seals + .win .row:nth-child(4) { animation: rowSel 8s ease-out infinite; }
  .seals + .win .row:nth-child(4) b { animation: selB 8s ease-out infinite; }
  .seals + .win .row:nth-child(4) span.s { animation: selS 8s ease-out infinite; }
  .seals + .win .row:nth-child(4) .go { animation: goPulse 8s ease-out infinite; }
}
@keyframes rowAct1 { 0%, 0% { background: var(--card); border-color: var(--line); } 1%, 8% { background: var(--mint-bg); border-color: var(--mint); } 12%, 100% { background: var(--card); border-color: var(--line); } }
@keyframes icDone1 { 0%, 7% { background: transparent; border-color: #C4CFDA; } 8%, 84% { background: var(--teal); border-color: var(--teal); } 90%, 100% { background: transparent; border-color: #C4CFDA; } }
@keyframes tagPop1 { 0%, 7% { opacity: 0; transform: scale(.6); } 10% { opacity: 1; transform: scale(1.12); } 12%, 84% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes rowAct2 { 0%, 10% { background: var(--card); border-color: var(--line); } 11%, 18% { background: var(--mint-bg); border-color: var(--mint); } 22%, 100% { background: var(--card); border-color: var(--line); } }
@keyframes icDone2 { 0%, 17% { background: transparent; border-color: #C4CFDA; } 18%, 84% { background: var(--teal); border-color: var(--teal); } 90%, 100% { background: transparent; border-color: #C4CFDA; } }
@keyframes tagPop2 { 0%, 17% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.12); } 22%, 84% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes rowAct3 { 0%, 20% { background: var(--card); border-color: var(--line); } 21%, 45% { background: var(--mint-bg); border-color: var(--mint); } 49%, 100% { background: var(--card); border-color: var(--line); } }
@keyframes meterFill { 0%, 21% { width: 0; } 44%, 84% { width: 86%; } 90%, 100% { width: 0; } }
@keyframes tagPop3 { 0%, 43% { opacity: 0; } 46%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes rowSel { 0%, 46% { background: var(--card); border-color: var(--line); box-shadow: none; } 50%, 84% { background: var(--navy); border-color: var(--navy); box-shadow: 0 2px 6px rgba(17, 24, 39, .14); } 90%, 100% { background: var(--card); border-color: var(--line); box-shadow: none; } }
@keyframes selB { 0%, 46% { color: var(--ink); } 50%, 84% { color: #fff; } 90%, 100% { color: var(--ink); } }
@keyframes selS { 0%, 46% { color: var(--muted); } 50%, 84% { color: #C9D6EA; } 90%, 100% { color: var(--muted); } }
@keyframes goPulse { 0%, 48% { opacity: 0; transform: scale(.8); box-shadow: 0 0 0 0 rgba(90, 169, 220, 0); } 52% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(90, 169, 220, .6); }
  60% { box-shadow: 0 0 0 10px rgba(90, 169, 220, 0); } 64% { box-shadow: 0 0 0 0 rgba(90, 169, 220, .6); } 72%, 84% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 10px rgba(90, 169, 220, 0); } 90%, 100% { opacity: 0; transform: scale(.8); } }

/* AI 직원 공통 담당 옆 업무 진행 화면 예시: 자료 받기 → 한 줄씩 맞추기(줄마다 훑고 일치·차이 꼬리표) → 클로저 확인 도장 → 결과 전달 (10초 한 주기) */
.crew .ai-flow { grid-column: span 2; padding: 0; display: flex; flex-direction: column; background: var(--card); }
.af-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #F7F9FC; }
.af-top b { font-size: .95rem; } .af-top span { font-size: .82rem; color: var(--muted); }
.af-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 4px; counter-reset: af; }
.af-steps li { counter-increment: af; text-align: center; font-size: .82rem; font-weight: 700; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--card); white-space: nowrap; }
.af-steps li::before { content: counter(af) ". "; }
.af-rows { position: relative; padding: 10px 18px; flex: 1; }
.af-row { display: grid; grid-template-columns: 1fr auto 104px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: .92rem; }
.af-row + .af-row { border-top: 1px dashed var(--line); }
.af-row .af-amt { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.af-row .tag { justify-self: center; }
.af-seal { position: absolute; right: 26px; bottom: 18px; width: 70px; height: 70px; border-radius: 50%; border: 2.5px solid var(--teal); color: var(--teal); display: grid; place-items: center; text-align: center; font-size: .78rem; font-weight: 800; line-height: 1.25; background: rgba(255,255,255,.92); transform: rotate(-12deg); opacity: 0; }
.af-meter { height: 6px; margin: 0 18px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.af-meter i { display: block; height: 100%; width: 100%; background: var(--mint); border-radius: 99px; }
.af-out { margin: 12px 18px 16px; padding: 10px 14px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .88rem; font-weight: 600; }
@media (max-width: 860px) { .crew .ai-flow { grid-column: auto; } }
@media (max-width: 480px) { .af-steps { grid-template-columns: repeat(2, 1fr); } .af-row { grid-template-columns: 1fr auto; } .af-row .tag { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: no-preference) {
.ai-flow .af-row:nth-child(1) { animation: afRow0 10s ease-out infinite; }
.ai-flow .af-row:nth-child(1) .tag { animation: afTag0 10s cubic-bezier(.2,.9,.3,1.3) infinite; }
.ai-flow .af-row:nth-child(2) { animation: afRow1 10s ease-out infinite; }
.ai-flow .af-row:nth-child(2) .tag { animation: afTag1 10s cubic-bezier(.2,.9,.3,1.3) infinite; }
.ai-flow .af-row:nth-child(3) { animation: afRow2 10s ease-out infinite; }
.ai-flow .af-row:nth-child(3) .tag { animation: afTag2 10s cubic-bezier(.2,.9,.3,1.3) infinite; }
.ai-flow .af-row:nth-child(4) { animation: afRow3 10s ease-out infinite; }
.ai-flow .af-row:nth-child(4) .tag { animation: afTag3 10s cubic-bezier(.2,.9,.3,1.3) infinite; }
.ai-flow .af-row:nth-child(5) { animation: afRow4 10s ease-out infinite; }
.ai-flow .af-row:nth-child(5) .tag { animation: afTag4 10s cubic-bezier(.2,.9,.3,1.3) infinite; }
.ai-flow .af-steps li:nth-child(1) { animation: afStep0 10s ease-out infinite; }
.ai-flow .af-steps li:nth-child(2) { animation: afStep1 10s ease-out infinite; }
.ai-flow .af-steps li:nth-child(3) { animation: afStep2 10s ease-out infinite; }
.ai-flow .af-steps li:nth-child(4) { animation: afStep3 10s ease-out infinite; }
.ai-flow .af-meter i { animation: afMeter 10s linear infinite; }
.ai-flow .af-seal { animation: afSeal 10s cubic-bezier(.2,.9,.3,1.2) infinite; }
.ai-flow .af-out { animation: afOut 10s ease-out infinite; }
}
@keyframes afRow0 { 0%, 12% { background: transparent; } 13%, 18% { background: var(--mint-bg); } 20%, 100% { background: transparent; } }
@keyframes afTag0 { 0%, 17% { opacity: 0; transform: scale(.6); } 19% { opacity: 1; transform: scale(1.12); } 21%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes afRow1 { 0%, 20% { background: transparent; } 21%, 26% { background: var(--mint-bg); } 28%, 100% { background: transparent; } }
@keyframes afTag1 { 0%, 25% { opacity: 0; transform: scale(.6); } 27% { opacity: 1; transform: scale(1.12); } 29%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes afRow2 { 0%, 28% { background: transparent; } 29%, 34% { background: var(--mint-bg); } 36%, 100% { background: transparent; } }
@keyframes afTag2 { 0%, 33% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.12); } 37%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes afRow3 { 0%, 36% { background: transparent; } 37%, 42% { background: var(--mint-bg); } 44%, 100% { background: transparent; } }
@keyframes afTag3 { 0%, 41% { opacity: 0; transform: scale(.6); } 43% { opacity: 1; transform: scale(1.12); } 45%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes afRow4 { 0%, 44% { background: transparent; } 45%, 50% { background: var(--mint-bg); } 52%, 100% { background: transparent; } }
@keyframes afTag4 { 0%, 49% { opacity: 0; transform: scale(.6); } 51% { opacity: 1; transform: scale(1.12); } 53%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes afStep0 { 0% { background: var(--card); color: var(--muted); border-color: var(--line); } 1%, 10% { background: var(--navy); color: #fff; border-color: var(--navy); } 11%, 92% { background: var(--mint-bg); color: var(--teal); border-color: var(--mint-bg); } 97%, 100% { background: var(--card); color: var(--muted); border-color: var(--line); } }
@keyframes afStep1 { 0%, 10% { background: var(--card); color: var(--muted); border-color: var(--line); } 11%, 55% { background: var(--navy); color: #fff; border-color: var(--navy); } 56%, 92% { background: var(--mint-bg); color: var(--teal); border-color: var(--mint-bg); } 97%, 100% { background: var(--card); color: var(--muted); border-color: var(--line); } }
@keyframes afStep2 { 0%, 55% { background: var(--card); color: var(--muted); border-color: var(--line); } 56%, 75% { background: var(--navy); color: #fff; border-color: var(--navy); } 76%, 92% { background: var(--mint-bg); color: var(--teal); border-color: var(--mint-bg); } 97%, 100% { background: var(--card); color: var(--muted); border-color: var(--line); } }
@keyframes afStep3 { 0%, 75% { background: var(--card); color: var(--muted); border-color: var(--line); } 76%, 92% { background: var(--navy); color: #fff; border-color: var(--navy); } 97%, 100% { background: var(--card); color: var(--muted); border-color: var(--line); } }
@keyframes afMeter { 0%, 10% { width: 0; } 54%, 92% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes afSeal { 0%, 58% { opacity: 0; transform: rotate(-12deg) scale(1.5); } 61% { opacity: 1; transform: rotate(-12deg) scale(.92); } 63%, 92% { opacity: 1; transform: rotate(-12deg) scale(1); } 97%, 100% { opacity: 0; transform: rotate(-12deg) scale(1.1); } }
@keyframes afOut { 0%, 75% { opacity: 0; transform: translateY(8px); } 79%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
.crew .af-steps li { display: block; padding: 8px 4px; border-radius: 10px; overflow: visible; }   /* .crew li 격자 규칙이 단계 탭에 번지지 않게 */
/* 좁은(1칸) 업무 진행 화면: 단계 탭 2×2, 줄은 이름·꼬리표 위아래로 */
.crew .ai-flow.af-narrow { grid-column: auto; }
.af-narrow .af-steps { grid-template-columns: repeat(2, 1fr); }
.af-narrow .af-row { grid-template-columns: 1fr auto; row-gap: 4px; }
.af-narrow .af-row .tag { grid-column: 1 / -1; justify-self: start; }
.af-narrow .af-row .af-amt { font-weight: 600; color: var(--muted); }
.af-narrow .af-seal { right: 18px; bottom: 12px; width: 62px; height: 62px; }

/* 대표 세무사·회계사 (experts.html, 2026-11-10) */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 28px; }
.ex-fee { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
.ex-fee th, .ex-fee td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.ex-fee th { color: var(--ink); font-weight: 700; width: 42%; }
.jhand { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--mint); border-radius: 12px; background: #FFFFFF; }
.jhand label { display: block; font-size: .92rem; margin-top: 6px; }
.jhand .pi { color: var(--amber); font-size: .8rem; margin-left: 4px; }

/* 이용 방법 4단계 흐름 모션 (2026-11-10): 한 주기 12초 keyframes 의 % 지점으로 순서 — 1→2→3→4 차례로 켜지고 선이 이어지며 마지막에 승인 결과가 올라옴 */
#how .steps li { position: relative; }
#how .steps li:not(:last-child)::before, #how .steps li:not(:last-child)::after { content: ""; position: absolute; left: 30px; top: 50px; bottom: -16px; width: 2px; background: var(--line); z-index: 0; }   /* 번호 아래 → 다음 번호 위 */
#how .steps .n { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  #how .steps li.on { background: transparent; }
  #how .steps li.on .n { background: var(--bg); color: var(--ink); border-color: var(--line); }
  #how .steps li:not(:last-child)::after { background: var(--teal); transform-origin: top; transform: scaleY(0); }
  #how .steps li:nth-child(1)::after { animation: howSeg1 12s ease-in-out infinite; } #how .steps li:nth-child(2)::after { animation: howSeg2 12s ease-in-out infinite; } #how .steps li:nth-child(3)::after { animation: howSeg3 12s ease-in-out infinite; }
  #how .steps li:nth-child(1) { animation: howLi1 12s ease-out infinite; } #how .steps li:nth-child(1) .n { animation: howN1 12s ease-out infinite; }
  #how .steps li:nth-child(2) { animation: howLi2 12s ease-out infinite; } #how .steps li:nth-child(2) .n { animation: howN2 12s ease-out infinite; }
  #how .steps li:nth-child(3) { animation: howLi3 12s ease-out infinite; } #how .steps li:nth-child(3) .n { animation: howN3 12s ease-out infinite; }
  #how .steps li:nth-child(4) { animation: howLi4 12s ease-out infinite; } #how .steps li:nth-child(4) .n { animation: howN4 12s ease-out infinite; }
  #how .result { animation: howOut 12s ease-out infinite; }
}
@keyframes howSeg1 { 0%, 17% { transform: scaleY(0); } 23%, 94% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes howSeg2 { 0%, 37% { transform: scaleY(0); } 43%, 94% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes howSeg3 { 0%, 57% { transform: scaleY(0); } 63%, 94% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes howLi1 { 0%, 3% { background: transparent; } 5%, 19% { background: var(--mint-bg); } 22%, 100% { background: transparent; } }
@keyframes howLi2 { 0%, 21% { background: transparent; } 24%, 39% { background: var(--mint-bg); } 42%, 100% { background: transparent; } }
@keyframes howLi3 { 0%, 41% { background: transparent; } 44%, 59% { background: var(--mint-bg); } 62%, 100% { background: transparent; } }
@keyframes howLi4 { 0%, 61% { background: transparent; } 64%, 79% { background: var(--mint-bg); } 82%, 100% { background: transparent; } }
@keyframes howN1 { 0%, 3% { background: var(--bg); color: var(--ink); border-color: var(--line); transform: none; } 5% { background: var(--teal); color: #fff; border-color: var(--teal); transform: scale(1.15); } 8%, 19% { background: var(--teal); color: #fff; border-color: var(--teal); transform: none; } 22%, 94% { background: #fff; color: var(--teal); border-color: var(--teal); } 98%, 100% { background: var(--bg); color: var(--ink); border-color: var(--line); } }
@keyframes howN2 { 0%, 21% { background: var(--bg); color: var(--ink); border-color: var(--line); transform: none; } 24% { background: var(--teal); color: #fff; border-color: var(--teal); transform: scale(1.15); } 27%, 39% { background: var(--teal); color: #fff; border-color: var(--teal); transform: none; } 42%, 94% { background: #fff; color: var(--teal); border-color: var(--teal); } 98%, 100% { background: var(--bg); color: var(--ink); border-color: var(--line); } }
@keyframes howN3 { 0%, 41% { background: var(--bg); color: var(--ink); border-color: var(--line); transform: none; } 44% { background: var(--teal); color: #fff; border-color: var(--teal); transform: scale(1.15); } 47%, 59% { background: var(--teal); color: #fff; border-color: var(--teal); transform: none; } 62%, 94% { background: #fff; color: var(--teal); border-color: var(--teal); } 98%, 100% { background: var(--bg); color: var(--ink); border-color: var(--line); } }
@keyframes howN4 { 0%, 61% { background: var(--bg); color: var(--ink); border-color: var(--line); transform: none; } 64% { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.15); } 67%, 94% { background: var(--navy); color: #fff; border-color: var(--navy); transform: none; } 98%, 100% { background: var(--bg); color: var(--ink); border-color: var(--line); } }
@keyframes howOut { 0%, 78% { opacity: 0; transform: translateY(10px); } 83%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(10px); } }
/* 개인정보처리방침 표: 좁은 화면에서 칸 안에서 줄바꿈 (2026-11-11 점검 C1, 320 폭 24px 넘침) */
@media (max-width: 480px) { .policy table { table-layout: fixed; font-size: .82rem; } .policy th, .policy td { padding: 8px 6px; word-break: break-all; overflow-wrap: anywhere; } }
/* 시안 B 어두운 바탕 버튼 작은 글자 대비 3.8→5.8 (2026-11-11 P5) */
.dark .btn.p small { opacity: 1; }
/* 워크룸 자료 보내기 칸: 접어 두고 제목을 누르면 펼침 (2026-11-11 P7) */
.jhand summary { font-weight: 700; color: var(--ink); cursor: pointer; }
.jhand[open] summary { margin-bottom: 4px; }