/* manuscript-samples.html — 원고 예시 페이지에만 있는 것: 분야 탭 · 원고 요약 줄 · 두 채널 원고 카드 · 카드 안 요약 · 표 · 상담 안내 · 문답 · 수정 표 칸 너비.
   배너 · 장면 · 표 · 주석은 law-partner.css, 장면 틀은 frame.css · home-shift.css 것을 그대로 쓴다. */

/* 로톡 공식 협력(#partner): 왼쪽 로앤컴퍼니 카드(.cc-spotlight, home-clients.css 그대로), 오른쪽 사실 세 줄 */
.ms-partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:stretch}
.ms-partner .cc-spotlight{min-height:260px;border-radius:18px;background:#0d0f14}
.ms-partner-list{display:grid;margin:0;padding:0;list-style:none;border:1px solid #e3e5e9;border-radius:18px;background:#fff}
.ms-partner-list li{display:grid;gap:6px;align-content:center;padding:22px 28px}
.ms-partner-list li+li{border-top:1px solid #eceef1}
.ms-partner-list b{font-size:19px;font-weight:700;letter-spacing:-.03em;color:#151a23}
.ms-partner-list span{font-size:15px;line-height:1.6;color:#5b6070;word-break:keep-all}

/* 원고를 고치는 사람들(#team): company.css 의 세 칸 줄을 대표 포함 네 칸으로(폰은 company.css 한 칸 그대로). 이 페이지에서는 흰 장면이라 이름 · 소개 · 직함(사일삼 파랑) 색을 밝은 배경용으로, 사진은 각지게 */
@media(min-width:901px){#team .co-team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
#team .co-member-role{color:#2e6bff}
#team .co-member h3{color:#151a23}
#team .co-member-desc{color:#5b6070}
#team .co-member-art{background:#eef0f4}
#team .co-member-art{border-radius:0}
#team .co-member-desc{text-align:justify;text-align-last:left;word-break:normal}

/* 운영 흐름(#workflow): 동그라미 일곱이 가는 선으로 이어지고(::before), 아래 되돌아가는 고리가 마지막 동그라미에서 첫 동그라미로 돌아온다.
   동그라미 중심 = 칸 가운데라 고리의 양 끝은 첫 · 마지막 칸 가운데(100% / 칸 수 / 2)에 맞춘다. 칸 수는 --n 한 곳 */
.ms-loop{--dot:72px;--n:7;position:relative;padding-bottom:64px}
.ms-loop-steps{--n:7;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ms-loop-steps::before{content:'';position:absolute;top:calc(var(--dot) / 2);left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);height:2px;background:linear-gradient(90deg,#b8d4ff,#2e6bff)}
.ms-loop-steps li{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.ms-loop-dot{display:grid;place-items:center;width:var(--dot);height:var(--dot);border:2px solid #2e6bff;border-radius:50%;background:#fff;font-size:20px;font-weight:700;letter-spacing:.02em;color:#2e6bff;box-shadow:0 0 0 8px #fff}
.ms-loop-steps li:last-child .ms-loop-dot{background:#2e6bff;color:#fff}
.ms-loop-steps h3{margin:16px 0 6px;font-size:18px;font-weight:700;letter-spacing:-.03em;color:#151a23}
.ms-loop-steps p{margin:0;padding:0 4px;font-size:14px;line-height:1.6;color:#5b6070;word-break:keep-all}
.ms-loop-back{position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);bottom:0;height:40px;margin:0;border:2px dashed #b8d4ff;border-top:0;border-radius:0 0 22px 22px}
.ms-loop-back::before{content:'';position:absolute;left:-7px;top:-6px;border:6px solid transparent;border-bottom:9px solid #2e6bff;border-top:0}
.ms-loop-back span{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);padding:2px 14px;border-radius:999px;background:#eaf1ff;font-size:13.5px;font-weight:700;color:#1b53e5;white-space:nowrap}
@media(max-width:900px){
  .ms-loop{padding-bottom:0}
  .ms-loop-steps{grid-template-columns:minmax(0,1fr);gap:22px}
  .ms-loop-steps::before{top:0;bottom:0;left:calc(var(--dot) / 2 - 1px);right:auto;width:2px;height:auto}
  .ms-loop-steps li{display:grid;grid-template-columns:var(--dot) minmax(0,1fr);column-gap:16px;align-items:center;text-align:left}
  .ms-loop-dot{grid-row:span 2}
  .ms-loop-steps h3{margin:0}
  .ms-loop-back{position:static;height:auto;margin-top:18px;border:0}
  .ms-loop-back::before{display:none}
  .ms-loop-back span{position:static;display:inline-block;transform:none;white-space:normal}
}

/* 매월 보고 · 로파트너 화면(#report): 예전 홈 #dashboard(home.css a578ee0 이전 .hs-product-*)의 맥북 화면을 두 칸씩 두 줄로.
   맥북 틀(macbook-pro-16-silver.png) 위에 화면 캡처를 얹고 틀의 화면 부분은 마스크(macbook-pro-16-screen-mask.svg)로 비운다. 화면 위치 비율은 예전 값 그대로 */
.ms-dash{--line:#e0e1e3;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
/* 구분선은 바깥 끝으로 갈수록 옅어진다(위 가로선 양 끝 · 아래 가로선 바깥 끝 · 가운데 세로선 위아래 끝). 칸끼리 만나는 곳은 진하게 이어진다 */
.ms-dash::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.ms-dash article{position:relative;min-width:0;padding:40px 44px 0;overflow:hidden}
.ms-dash article::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 35%)}
.ms-dash article:nth-child(even)::after{background:linear-gradient(90deg,var(--line) 65%,transparent)}
.ms-dash article:nth-child(even)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.ms-dash article:nth-child(2)::before{background:linear-gradient(180deg,transparent,var(--line) 30%)}
.ms-dash article:nth-last-child(1):nth-child(even)::before{background:linear-gradient(180deg,var(--line) 70%,transparent)}
.ms-dash h3{margin:0 0 12px;font-size:22px;font-weight:600;letter-spacing:-.025em;color:#151a23;word-break:keep-all}
.ms-dash p{margin:0;min-height:3.5em;font-size:15.5px;line-height:1.75;color:#666b73;word-break:keep-all}
.ms-dash-shot{position:relative;margin:26px -44px 0;aspect-ratio:1.9;overflow:hidden}
/* 맥북 틀 · 화면(.hs-device)은 home-shift.css 가 소유 — 여기서는 칸 아래에 잘리게 크게 놓기만 */
.ms-dash-shot .hs-device{position:absolute;top:24px;left:calc(24px - 13.0435%);width:140%}

/* 상담 권유(#cta): 제목 두 줄 · 설명 한 줄 · 버튼 둘을 가운데로, 장면 줄 하나만 */
.ms-cta h2{font-size:clamp(28px,3.4vw,46px);line-height:1.35}
.ms-cta .lp-actions{margin-top:6px}
/* 42곳 기준일: 제목 바로 아래 작게 · 흐리게(유저 2026-10-14 「2026년 10월 01일 기준」) */
.ms-cta-basis{display:block;margin-top:10px;font-size:13px;line-height:1.5;letter-spacing:0;color:#ffffff8c}

/* 원고 시스템(#process): 왼쪽 단계 목록은 붙어 있고, 단계마다 왼쪽 회색 틀 안 작업 화면 모형 + 오른쪽 번호 · 제목 · 설명
   (레퍼런스: golddoctors.co.kr/service). 카드가 화면에 들어오면(.is-in, 페이지 끝 스크립트) 모형이 「일하는 모습」으로 움직인다 —
   글자 쳐짐(data-type) · 숫자 올라감(data-count)은 스크립트, 나머지(나타남 · 줄 긋기 · 체크 · 막대 · 일치도)는 아래 CSS. 움직임 줄이기면 완성된 모습 그대로 */
/* 입력 키워드 → 여섯 단계 → 두 채널 원고: 전부 알약(유저 2026-10-13). 키워드는 흰 바탕 파란 테두리 + 작은 이름표, 결과 둘은 옅은 파랑 */
.ms-flow-input{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin:0 0 40px}
.ms-flow-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:#f1f3f6;font-size:15px;font-weight:600;letter-spacing:-.02em;color:#30343b;white-space:nowrap}
.ms-flow-pill.is-key{border:1.5px solid #2e6bff;background:#fff;font-size:17px;font-weight:700;color:#151a23}
.ms-flow-pill.is-key i{font-size:12.5px;font-style:normal;font-weight:600;color:#8a8f99}
.ms-flow-pill.is-out{background:#eaf1ff;color:#1b53e5}
.ms-flow-arrow{font-size:16px;color:#b6bcc6}
/* 폰 채널 알약(.ms-chan): PC 는 두 원고를 나란히 보여 숨김. 폰은 화면 아래 가운데 떠서 네이버 블로그 / 인블로그 칼럼 중 하나만 보이게 —
   원고 구간(.ms-panels)이 화면에 있을 때만 올라오고(.is-on), 벗어나면 아래로 스르륵 내려간다(유저 2026-10-13) */
.ms-chan{display:none}
@media(max-width:900px){
  .ms-chan{position:fixed;z-index:30;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:4px;padding:4px;border-radius:999px;background:#151a23e6;box-shadow:0 10px 30px #0e121b40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate(-50%,calc(100% + 40px));transition:transform .35s ease}
  .ms-chan.is-on{transform:translate(-50%,0)}
  .ms-chan button{height:40px;padding:0 18px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:700;color:#ffffffb3;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
  .ms-chan button[aria-pressed="true"]{background:#fff;color:#151a23}
  #samples[data-chan="blog"] .ms-doc--column,#samples[data-chan="column"] .ms-doc--blog{display:none}
  /* 키워드 알약 줄: 폰에서는 작게 — 키워드 · 여섯 단계 한 줄, 두 원고 한 줄. 줄 끝에 홀로 남는 마지막 화살표(.is-last)는 숨긴다 */
  .ms-flow-input{gap:8px}
  .ms-flow-pill{height:36px;padding:0 13px;font-size:13.5px}
  .ms-flow-pill.is-key{font-size:15px}
  .ms-flow-pill.is-key i{font-size:11px}
  .ms-flow-arrow{font-size:13px}
  .ms-flow-arrow.is-last{display:none}
}
.ms-steps{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.ms-steps-nav{position:sticky;top:calc(var(--hs-nav-clearance,85px) + 24px);display:grid;gap:4px;margin:0;padding:0;list-style:none}
.ms-steps-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:10px;font-size:16px;font-weight:600;color:#5b6070;transition:background .25s,color .25s}
.ms-steps-nav a span{order:2;font-size:13px;font-weight:600;color:#9aa0aa}
.ms-steps-nav a:hover{color:#151a23}
.ms-steps-nav a.is-on{background:#151a23;color:#fff}
.ms-steps-nav a.is-on span{color:#ffffffb3}
.ms-steps-body{display:grid;gap:36px;min-width:0}
.ms-step{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;scroll-margin-top:calc(var(--hs-nav-clearance,85px) + 24px)}
.ms-step-no{display:inline-block;margin:0 0 14px;padding:3px 9px;border-radius:6px;background:#eef0f4;font-size:13px;font-weight:600;color:#5b6070}
.ms-step h3{margin:0 0 14px;font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.04em;color:#151a23}
.ms-step-text p:last-child{margin:0;font-size:16.5px;line-height:1.75;color:#5b6070;word-break:keep-all}

/* 모형: 회색 틀 안에 위가 둥근 흰 화면, 아래는 틀에 잘린 것처럼. 체크는 글자 기호 대신 공용 선 아이콘 --icon-check(main.css, 색은 currentColor) */
.ms-mock-frame{height:360px;padding:30px 30px 0;border-radius:20px;background:#eef0f4;overflow:hidden}
.ms-mock{--ms-check-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  height:100%;padding:26px 24px;border-radius:22px 22px 0 0;background:#fff}
.ms-mock--split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ms-mock-title{display:flex;align-items:baseline;gap:8px;margin:0 0 16px;font-size:16px;font-weight:700;color:#151a23}
.ms-mock-title small{font-size:13px;font-weight:500;color:#8a8f99}
.ms-mock-title small b{font-weight:700;color:#2e6bff;font-variant-numeric:tabular-nums}
:is(.ms-tag.is-on,.ms-mock-pass em,.ms-mock-foot)::before{content:'';display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.15em;background:currentColor;-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}

.ms-mock-input{display:flex;align-items:center;gap:2px;min-height:48px;margin:0 0 16px;padding:12px 14px;border:1.5px solid #2e6bff;border-radius:10px;font-size:15px;font-weight:600;color:#151a23}
.ms-mock-input i{width:2px;height:18px;background:#2e6bff;animation:ms-caret 1s steps(1) infinite}
.ms-mock-status{display:none;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;font-style:normal;font-weight:600;color:#2e6bff}
.ms-anim .ms-mock-status{display:flex;opacity:0}
.ms-dots{display:inline-flex;gap:3px}
.ms-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:ms-dot 1s ease-in-out infinite}
.ms-dots i:nth-child(2){animation-delay:.15s}.ms-dots i:nth-child(3){animation-delay:.3s}
.ms-mock-rows{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.ms-mock-rows li{display:flex;gap:14px;font-size:14px;color:#2b303b}
.ms-mock-rows b{flex:0 0 36px;font-weight:600;color:#8a8f99}
.ms-mock-tags{display:flex;flex-wrap:wrap;gap:8px}
.ms-tag{position:relative;padding:6px 12px;border-radius:8px;font-size:13.5px;font-weight:600}
.ms-tag.is-on{background:#2e6bff;color:#fff}
.ms-tag.is-off{background:#f2f3f6;color:#9aa0aa}
.ms-tag.is-off::after{content:'';position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:#9aa0aa;transform-origin:left}

.ms-mock-check,.ms-mock-docs,.ms-mock-cases,.ms-mock-pass{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ms-mock-check li{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #e6e8ec;border-radius:10px;font-size:14.5px;color:#8a8f99}
.ms-mock-check li::before{content:'';flex:0 0 18px;height:18px;border:1.5px solid #c9cdd5;border-radius:50%}
.ms-mock-check li.is-pick{border-color:#2e6bff;background:#eaf1ff;color:#151a23;font-weight:600}
.ms-mock-check li.is-pick::before{border-color:#2e6bff;background:#2e6bff var(--ms-check-white) center/12px no-repeat}

.ms-mock-docs li,.ms-mock-cases li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid transparent;border-radius:9px;background:#f6f7f9;font-size:13.5px;color:#5b6070;overflow:hidden}
.ms-mock-cases li{padding:13px 14px 15px}
.ms-mock-docs b,.ms-mock-cases b{font-weight:700;color:#151a23;white-space:nowrap}
.ms-mock-docs span,.ms-mock-cases span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ms-mock-docs em,.ms-mock-cases em{padding:3px 8px;border-radius:6px;background:#2e6bff;font-size:12px;font-style:normal;font-weight:700;color:#fff}
.ms-mock-docs li.is-out,.ms-mock-cases li.is-out{border:1px dashed #d6d9df;background:none}
.ms-mock-docs li.is-out :is(b,span),.ms-mock-cases li.is-out :is(b,span){color:#a8adb6;text-decoration:line-through}
.ms-mock-docs li.is-out em,.ms-mock-cases li.is-out em{background:#e6e8ec;color:#8a8f99}
/* 판례 일치도: 칸 아래 얇은 막대가 --m 만큼 */
.ms-mock-cases li::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:var(--m);background:#2e6bff}
.ms-mock-cases li.is-out::after{background:#c9cdd5}
.ms-mock-foot{margin:14px 0 0;font-size:13.5px;font-weight:600;color:#2e6bff}
.ms-mock-foot b{font-variant-numeric:tabular-nums}

.ms-outline{display:grid;align-content:start;gap:9px;min-width:0}
.ms-bar{display:block;width:var(--w);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-outline.is-blog .ms-bar{background:#e7f7ee;color:#037a39}
.ms-outline.is-column .ms-bar{background:#eaf1ff;color:#1b53e5}

.ms-mock-diff{display:grid;gap:8px;min-height:96px;margin:0 0 14px;padding:14px 16px;border-radius:10px;background:#f6f7f9;font-size:14px;line-height:1.6}
.ms-mock-diff s{color:#a8adb6;text-decoration:none;background:linear-gradient(#e5484d,#e5484d) left 55%/100% 1.5px no-repeat}
.ms-mock-diff span{font-weight:600;color:#151a23}
.ms-mock-pass li{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid #e6e8ec;border-radius:10px;font-size:14px;color:#2b303b}
.ms-mock-pass em{font-style:normal;font-weight:700;color:#03a94d}

/* ── 움직임: 스크립트가 .ms-steps 에 .ms-anim 을 붙였을 때만(자바스크립트 꺼짐 · 움직임 줄이기면 위의 완성된 모습 그대로) 카드가 .is-in 이 되면 시작. 시간 = 부모의 시작(--b) + 순서(--i) × 0.07초 ── */
@keyframes ms-caret{50%{opacity:0}}
@keyframes ms-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes ms-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ms-slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes ms-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes ms-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ms-grow{from{width:0;opacity:.3}to{width:var(--w);opacity:1}}
@keyframes ms-meter{from{width:0}to{width:var(--m)}}
@keyframes ms-scan{0%,100%{background:#fff;border-color:#e6e8ec}40%{background:#f3f6fd;border-color:#b8d4ff}}
@keyframes ms-pick{from{background:#fff;border-color:#e6e8ec;color:#8a8f99}to{background:#eaf1ff;border-color:#2e6bff;color:#151a23}}
@keyframes ms-pick-dot{from{background-color:transparent;border-color:#c9cdd5;background-size:0}to{background-color:#2e6bff;border-color:#2e6bff;background-size:12px}}
@keyframes ms-turn-on{from{background:#f2f3f6;color:#9aa0aa}to{background:#2e6bff;color:#fff}}
@keyframes ms-strike{from{background-size:0 1.5px}to{background-size:100% 1.5px}}
@keyframes ms-out{from{opacity:1}to{opacity:0}}

.ms-a:nth-child(2){--i:1}.ms-a:nth-child(3){--i:2}.ms-a:nth-child(4){--i:3}.ms-a:nth-child(5){--i:4}.ms-a:nth-child(6){--i:5}
.ms-mock .ms-a{--t:calc(var(--b,0s) + var(--i,0) * .07s)}
.ms-anim .ms-step:not(.is-in) .ms-mock .ms-a{opacity:0}
.ms-anim .ms-step.is-in .ms-mock .ms-a{animation:ms-in 0.33s cubic-bezier(.16,1,.3,1) var(--t) both}

/* 01 키워드 해석: 글자가 쳐지고 → 「해석 중」 점이 뛰다 사라지고 → 해석 줄 → 형사처벌 칩에 줄이 그어지고 면허 구제 칩이 파랗게 켜진다 */
.ms-anim .ms-step.is-in .ms-mock-status{animation:ms-in 0.2s 0.7s both,ms-out 0.2s 1.1s forwards}
.ms-anim .ms-step.is-in .ms-tag.is-off::after{animation:ms-draw 0.23s ease-out calc(var(--t) + 0.25s) both}
.ms-anim .ms-step:not(.is-in) .ms-tag.is-off::after{transform:scaleX(0)}
.ms-anim .ms-step.is-in .ms-tag.is-on{animation:ms-in 0.33s cubic-bezier(.16,1,.3,1) var(--t) both,ms-turn-on 0.23s calc(var(--t) + 0.25s) both}
.ms-anim .ms-step.is-in .ms-tag.is-on::before{animation:ms-pop 0.26s calc(var(--t) + 0.3s) both}
/* 02 질문 선정: 숫자가 올라가고 → 질문 넷이 나온 뒤 위에서부터 한 줄씩 훑고 → 고른 질문이 체크된다 */
.ms-anim .ms-step.is-in .ms-mock-check li.ms-a{animation:ms-in 0.33s cubic-bezier(.16,1,.3,1) var(--t) both,ms-scan 0.3s calc(0.65s + var(--i,0) * 0.15s) both}
.ms-anim .ms-step:not(.is-in) .ms-mock-check li.is-pick{background:#fff;border-color:#e6e8ec;color:#8a8f99;font-weight:400}
.ms-anim .ms-step:not(.is-in) .ms-mock-check li.is-pick::before{background-color:transparent;border-color:#c9cdd5;background-size:0}
.ms-anim .ms-step.is-in .ms-mock-check li.is-pick{animation:ms-in 0.33s cubic-bezier(.16,1,.3,1) var(--t) both,ms-pick 0.26s 1.25s both}
.ms-anim .ms-step.is-in .ms-mock-check li.is-pick::before{animation:ms-pick-dot 0.23s 1.3s both}
/* 03 법령 선택: 원문이 오른쪽에서 밀려 들어오고 → 「사용」 표시가 톡 붙고 → 처벌 조항은 줄이 그어진다 → 대조 숫자 */
.ms-anim .ms-step.is-in .ms-mock-docs li.ms-a,.ms-anim .ms-step.is-in .ms-mock-cases li.ms-a{animation:ms-slide 0.33s cubic-bezier(.16,1,.3,1) var(--t) both}
.ms-anim .ms-step.is-in :is(.ms-mock-docs,.ms-mock-cases) em{animation:ms-pop 0.26s calc(var(--t) + 0.17s) both}
.ms-anim .ms-step.is-in :is(.ms-mock-docs,.ms-mock-cases) li.is-out :is(b,span){animation:ms-in 0.13s calc(var(--t) + 0.25s) both}
/* 04 판례 선택: 칸이 들어오고 → 일치도 막대가 찬다(제외는 짧게) */
.ms-anim .ms-step:not(.is-in) .ms-mock-cases li::after{width:0}
.ms-anim .ms-step.is-in .ms-mock-cases li::after{animation:ms-meter 0.59s cubic-bezier(.16,1,.3,1) calc(var(--t) + 0.15s) both}
/* 05 채널 설계: 블로그 골격이 먼저, 칼럼 골격이 뒤이어 자란다 */
.ms-anim .ms-step:not(.is-in) .ms-mock .ms-bar.ms-a{width:0}
.ms-anim .ms-step.is-in .ms-mock .ms-bar.ms-a{animation:ms-grow 0.46s cubic-bezier(.16,1,.3,1) var(--t) both}
/* 06 초안 · 수정 · 검사: 초안에 빨간 줄이 그어지고 → 고친 문장이 쳐지고 → 검사가 하나씩 통과 */
.ms-anim .ms-step:not(.is-in) .ms-mock-diff s{background-size:0 1.5px}
.ms-anim .ms-step.is-in .ms-mock-diff s{animation:ms-strike 0.4s ease-out 0.25s both}
.ms-anim .ms-step.is-in .ms-mock-pass em{animation:ms-pop 0.26s calc(var(--t) + 0.17s) both}

@media(prefers-reduced-motion:reduce){.ms-mock-input i,.ms-dots i{animation:none}}

/* 세 칸 줄(공개하는 이유) 설명은 양쪽 끝 맞춤 — 홈 성과 카드와 같은 결(유저 「양쪽 끝에 잘 정렬」) */
.lp-cite-stack p{text-align:justify}

/* 분야 탭 = 회색 트랙 세그먼트(레퍼런스: Apple · Stripe · Linear 설정 화면). 원고 영역 안에서는 메뉴 바로 아래에 붙어 따라오고(부모 .hs-frame-row 를 벗어나면 풀림),
   고른 칸에 흰 알약(::before)이 --i 칸으로 미끄러진다. */
.ms-tabs{position:sticky;top:var(--hs-nav-clearance,85px);z-index:5;margin:0 0 14px;padding:10px 0;background:#fff}
/* 탭이 든 칸은 장면 공통 위 여백(40px)을 줄여 제목 아래 빈 줄이 넓지 않게 */
.hs-frame-row:has(>.ms-tabs){padding-top:14px}
.ms-tabs-track{--gap:4px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);padding:5px;border-radius:14px;background:#eef0f4}
.ms-tabs-track::before{content:'';position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px - 5 * var(--gap)) / 6);border-radius:10px;background:#fff;box-shadow:0 1px 2px #1823341f,0 2px 8px #1823340f;transform:translateX(calc(var(--i,0) * (100% + var(--gap))));transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ms-tabs button{position:relative;z-index:1;min-width:0;padding:12px 8px;border:0;border-radius:10px;background:none;font-size:16px;font-weight:700;color:#6b7280;cursor:pointer;transition:color .2s}
.ms-tabs button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-tabs button:hover{color:#151a23}
.ms-tabs button[aria-selected="true"]{color:#151a23}
.ms-tabs button:focus-visible{outline:2px solid #2e6bff;outline-offset:-2px}

/* 패널 · 탭: 폰에서 안쪽 표(최소 640px)가 패널을 밀어 넓히지 않게 */
.ms-panel,.ms-tabs{min-width:0;max-width:100%}

/* 수행 사례는 본문 이야기로 쓰고, 예시 페이지에서만 소제목 옆에 가상 사건 표시 */
.ms-fict{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;background:#eef0f4;font-size:11.5px;font-weight:600;vertical-align:2px;color:#8a8f99;white-space:nowrap}

/* 수행 사례 이야기: 1 기초사실관계 · 2 사건의 쟁점 · 3 사무소의 조력과 결과. 핵심 구절은 형광펜(.ms-hl) */
.ms-story{margin:6px 0 10px}
.ms-doc .ms-story-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:16px;font-weight:700;color:#151a23}
.ms-story-h span{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:6px;background:#151a23;font-size:12.5px;color:#fff}
.ms-hl{font-weight:700;color:#151a23;background:linear-gradient(transparent 58%,#d7e6ff 58%)}

/* 두 채널 원고 카드: 같은 높이 기준선, 채널 색만 다르게 */
.ms-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ms-doc{min-width:0;padding:28px 30px 32px;border:1px solid #e3e5e9;border-radius:18px;background:#fff;color:#2b303b;font-size:15.5px;line-height:1.8;word-break:keep-all}
.ms-doc p{margin:0 0 12px}
.ms-doc .ms-doc-ch{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #eceef1;font-size:14px;font-weight:700;color:var(--ms-ch)}
.ms-doc-ch small{font-size:13px;font-weight:500;color:#5b6070}
.ms-doc--blog{--ms-ch:#03a94d}
.ms-doc--column{--ms-ch:#2e6bff}
.ms-quote{margin:4px 0 26px;padding:0;text-align:center}
.ms-quote::before,.ms-quote::after{content:'“';display:block;font:700 44px/1 Georgia,'Times New Roman',serif;color:#b5b9c1}
.ms-quote::after{content:'”';margin-top:10px}
.ms-doc .ms-quote p{margin:6px 0 12px;font-family:'Nanum Myeongjo','Noto Serif KR','Batang',serif;font-size:21px;font-style:italic;font-weight:600;line-height:1.6;color:#151a23}
/* 본문 중간 인용(의뢰인의 말): 따옴표 없이 가운데 명조 기울임 두 줄 — 바로 뒤 페르소나 문장이 그 마음을 받아 준다 */
.ms-quote--mid{margin:28px 0 6px}
.ms-quote--mid::before,.ms-quote--mid::after{display:none}
.ms-doc .ms-quote--mid p{margin:0;font-size:19px}
.ms-quote footer{font-size:14px;color:#6b7280;word-break:keep-all}
/* 원고 제목은 실제 블로그처럼 줄 끝까지 채운다 — main.css 의 제목 줄 고르기(text-wrap:balance)를 여기서만 끈다 */
.ms-doc-title{margin:0 0 18px;font-size:21px;font-weight:700;line-height:1.45;letter-spacing:-.03em;color:#151a23;text-wrap:wrap}
.ms-doc h4{margin:26px 0 12px;font-size:17.5px;font-weight:700;line-height:1.5;color:#151a23}
.ms-doc--blog h4{padding-left:12px;border-left:3px solid var(--ms-ch)}

/* 실무 시선 문장(E-E-A-T의 경험): 글은 본문 문단 안에 이어 쓰고, 홈페이지 예시에서만 그 문장을 점선 상자 + 위쪽 가운데 「페르소나 · E-E-A-T」 알약으로 짚어 보인다 */
.ms-doc .ms-voice{position:relative;display:block;margin:20px 0 4px;padding:20px 18px 14px;border:1.5px dashed #b4c3dd;border-radius:12px;color:#1b2a4a}
.ms-doc .ms-voice::before{content:'페르소나 · E-E-A-T';position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:3px 12px;border-radius:999px;background:#2e6bff;font-size:12px;font-weight:700;line-height:1.5;color:#fff;white-space:nowrap}
.ms-doc p>.ms-voice:first-child{margin-top:22px}
.ms-doc :is(ul,ol){margin:0 0 12px;padding-left:20px;list-style:disc}
.ms-doc ol{list-style:decimal}
.ms-doc li+li{margin-top:2px}
.ms-doc .ms-close{margin:26px 0 0}
.ms-doc .ms-close p:last-child{margin-bottom:0}

.ms-summary{margin:0 0 6px;padding:16px 18px;border-radius:12px;background:#f3f6fd}
.ms-doc .ms-summary p{margin:0}
.ms-doc .ms-summary-label{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ms-ch)}

.ms-mini-table{margin:0 0 12px;overflow-x:auto;border:1px solid #e6e8ec;border-radius:12px}
.ms-mini-table table{width:100%;min-width:420px;border-collapse:collapse;font-size:14px;line-height:1.6}
.ms-mini-table :is(th,td){padding:10px 14px;border-bottom:1px solid #eceef1;text-align:left;vertical-align:top}
.ms-mini-table th{background:#f6f7f9;font-weight:700;color:#151a23}
.ms-mini-table tbody tr:last-child td{border-bottom:0}
.ms-mini-table td:first-child{font-weight:600;white-space:nowrap;color:#151a23}

.ms-consult{margin:20px 0 0;padding:18px 20px;border:1px solid #d6efe0;border-radius:12px;background:#f3fbf6}
.ms-consult-head{font-weight:700;color:#151a23}
.ms-consult ol{margin:0;padding-left:20px;list-style:decimal}
.ms-consult li+li{margin-top:4px}

.ms-faq{margin:26px 0 0;padding-top:20px;border-top:1px solid #eceef1}
.ms-doc .ms-faq-head{margin:0 0 14px;font-size:17.5px;font-weight:700;color:#151a23}
.ms-doc .ms-faq-q{margin:0 0 6px;font-weight:700;color:#151a23}

@media(max-width:900px){
  .ms-pair,.ms-steps,.ms-partner,.ms-dash{grid-template-columns:minmax(0,1fr)}
  .ms-dash article{padding-inline:20px}
  .ms-dash article:nth-child(even)::before{display:none}
  .ms-dash article:nth-child(even)::after{background:linear-gradient(90deg,transparent,var(--line) 35%)}
  .ms-dash-shot{margin-inline:-20px}
  .ms-steps-nav{display:none}
  .ms-step{grid-template-columns:minmax(0,1fr);gap:20px}
  .ms-mock-frame{height:320px;padding:20px 16px 0}
  .ms-mock{padding:20px 16px}
}
@media(max-width:600px){
  .ms-tabs-track{display:flex;overflow-x:auto;scrollbar-width:none}
  .ms-tabs-track::before{display:none}
  .ms-tabs button{flex:0 0 auto;padding:10px 14px}
  .ms-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px #1823341f}
  .ms-doc{padding:22px 18px 24px;font-size:15px}
  .ms-doc-title{font-size:19px}
}