/* 그린퀵 이용가이드 — 2026-10-21 그린플래닛. 웹(휴대폰·PC)과 인쇄(A4 PDF)를 한 파일로 */
:root{
  --brand:#03d15f; --brand-ink:#00873f; --brand-deep:#036b34; --brand-soft:#e8faf0; --brand-tint:#f3fcf7; --lime:#98ec2d;
  --bg:#ffffff; --bg-2:#f9fafb; --bg-3:#f2f4f6; --line:#e5e8eb; --line-2:#eef0f2;
  --t1:#191f28; --t2:#4e5968; --t3:#6b7684; --t4:#a4adb7;
  --warn:#b25e00; --warn-soft:#fff6e8; --bad:#e5323f; --bad-soft:#ffeef0;
  --r-s:10px; --r:16px; --r-l:24px;
  --sh-1:0 1px 2px rgba(0,27,55,.05),0 2px 8px rgba(0,27,55,.05);
  --sh-2:0 6px 18px rgba(0,27,55,.07),0 18px 48px rgba(0,27,55,.09);
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg-3);color:var(--t1);font-family:var(--font);font-size:17px;line-height:1.65;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;display:block}
a{color:inherit}
b,strong{font-weight:700}
.btn-k{display:inline-block;padding:0 .4em;margin:0 .05em;border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;background:#fff;font-weight:700;font-size:.92em;color:var(--t1);white-space:nowrap;line-height:1.6}
.btn-k.g{background:var(--brand);border-color:#02b552;color:#fff}

/* 위 띠(웹만) */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.top .in{max-width:920px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:12px}
.top .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;color:var(--t1)}
.top .logo img{height:22px;width:auto}
.top .logo span{color:var(--t3);font-weight:600;font-size:15px}
.top .sp{flex:1}
.top .dl{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.top .dl svg{width:18px;height:18px}
.top .call{font-weight:700;font-size:15px;color:var(--brand-ink);text-decoration:none;white-space:nowrap}
@media (max-width:520px){.top .logo span,.top .call{display:none}.top .dl{padding:0 13px}}

/* 목차 칩(웹만) */
.chips{max-width:920px;margin:0 auto;padding:14px 16px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--t2);text-decoration:none}
.chips a:hover{border-color:var(--brand);color:var(--brand-ink)}

/* 쪽 */
.doc{max-width:920px;margin:0 auto;padding:16px 16px 64px}
.page{position:relative;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);padding:44px 44px 36px;margin:0 0 20px;overflow:hidden;counter-increment:pg}
.page .pfoot{display:none}
.page .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--brand-ink);letter-spacing:0}
.page .eyebrow i{font-style:normal;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:800}
.page h2{margin:10px 0 8px;font-size:34px;line-height:1.28;font-weight:800;letter-spacing:-.03em}
.page .lead{margin:0 0 26px;font-size:18px;color:var(--t2);max-width:34em}
.page .hicon{position:absolute;top:30px;right:36px;width:84px;height:84px;object-fit:contain}
.page .head{padding-right:104px}
.page .head.wide{padding-right:160px}
.page .hicon.wide{width:140px;height:64px}
.page h3{margin:26px 0 10px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.page p{margin:0 0 12px}

/* 단계 */
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps>li{position:relative;padding:0 0 18px 50px;counter-increment:st}
.steps>li::before{content:counter(st);position:absolute;left:0;top:-1px;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:16.5px;top:38px;bottom:4px;width:1px;background:var(--line)}
.steps>li b.t{display:block;font-size:18.5px;line-height:1.45;margin-bottom:2px}
.steps>li span.d{display:block;color:var(--t2);font-size:16.5px}

/* 두 칸(글 + 화면) */
.split{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:34px;align-items:start}
.split.wide{grid-template-columns:minmax(0,1fr) 330px}
.split.rev{grid-template-columns:268px minmax(0,1fr)}
@media (max-width:760px){.split,.split.wide,.split.rev{grid-template-columns:1fr;gap:22px}.split.rev>.shots{order:2}}

/* 휴대폰 틀 */
.phone{position:relative;border-radius:30px;padding:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);max-width:268px;margin:0 auto}
.phone .scr{aspect-ratio:390/780;overflow:hidden;border-radius:22px;border:1px solid var(--line-2);background:var(--bg-2)}
.phone .scr.short{aspect-ratio:390/560}
.phone .scr.tall{aspect-ratio:390/960}
.phone .scr>img{width:100%;height:100%;object-fit:cover;object-position:top}
.cap{margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--t3)}
.pc{border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden;background:#fff}
.pc .bar{height:26px;background:var(--bg-3);display:flex;align-items:center;gap:6px;padding:0 10px}
.pc .bar i{width:9px;height:9px;border-radius:50%;background:#d7dbe0;display:block}
.pc .pcs{aspect-ratio:16/9;overflow:hidden}
.pc .pcs img{width:100%;height:100%;object-fit:cover;object-position:top}
.shots{display:flex;flex-direction:column;gap:16px}
.shots.row{flex-direction:row;gap:16px}
.shots.row .phone{flex:1}

/* 상자 */
.tip{margin:18px 0 0;padding:16px 18px;border-radius:var(--r);background:var(--brand-tint);border:1px solid #d3f3e1}
.tip b.k{display:block;color:var(--brand-ink);font-size:15px;margin-bottom:4px}
.tip p{margin:0;font-size:16px;color:var(--t1)}
.tip ul{margin:4px 0 0;padding-left:1.1em}
.tip li{margin:2px 0;font-size:16px}
.tip.warn{background:var(--warn-soft);border-color:#ffe2b8}
.tip.warn b.k{color:var(--warn)}
.tip.gray{background:var(--bg-2);border-color:var(--line)}
.tip.gray b.k{color:var(--t2)}

/* 카드 묶음 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-2);padding:18px 18px 16px}
.card img{width:64px;height:64px;object-fit:contain;margin:0 0 8px}
.card b{display:block;font-size:17.5px;margin-bottom:4px}
.card>span,.card>div>span{display:block;font-size:15.5px;color:var(--t2);line-height:1.55}
@media (max-width:760px){.cards,.cards.two{grid-template-columns:1fr}}

/* 표 */
table.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tb th,.tb td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.tb tr:last-child td{border-bottom:0}
.tb th{background:var(--bg-2);font-weight:700;color:var(--t2);font-size:14.5px}
.tb td.money{font-weight:700;white-space:nowrap}
.tb td .s{display:block;color:var(--t3);font-size:14.5px}
.tnote{margin:8px 2px 0;font-size:15px;color:var(--t2)}
.tnote b{color:var(--brand-ink);margin-right:6px}

/* 시간 띠(밤) */
.timeline{display:grid;gap:12px}
.tl{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-2)}
.tl .when{font-weight:800;font-size:17px;line-height:1.35}
.tl .when small{display:block;font-weight:600;color:var(--t3);font-size:13.5px;margin-top:2px}
.tl .what b{display:block;font-size:17px;margin-bottom:2px}
.tl .what>span{display:block;color:var(--t2);font-size:15.5px}
.tl.day{background:var(--brand-tint);border-color:#d3f3e1}
.tl.day .when{color:var(--brand-ink)}
.tl.eve{background:#f4f6ff;border-color:#e1e6fb}
.tl.eve .when{color:#3b4fb8}
.tl.night{background:#f3f2f8;border-color:#e4e1ee}
.tl.night .when{color:#4c4475}
.tl.deep{background:#2b2f3a;border-color:#2b2f3a;color:#fff}
.tl.deep .when{color:#cfd3ff}.tl.deep .when small{color:#9aa0b8}.tl.deep .what>span{color:#c8ccda}
@media (max-width:560px){.tl{grid-template-columns:1fr;gap:4px}}

/* 흐름(1→2→3) */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:fl}
.flow .f{position:relative;padding:20px 18px 18px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-2);counter-increment:fl}
.flow .f::before{content:counter(fl);display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-weight:800;font-size:15px;margin-bottom:10px}
.flow .f b{display:block;font-size:18px;margin-bottom:4px}
.flow .f>span{display:block;color:var(--t2);font-size:15.5px;line-height:1.55}
@media (max-width:760px){.flow{grid-template-columns:1fr}}
.status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 0}
.status span{padding:6px 12px;border-radius:999px;background:var(--bg-3);font-weight:700;font-size:14.5px;color:var(--t2)}
.status span.on{background:var(--brand-soft);color:var(--brand-ink)}
.status i{font-style:normal;color:var(--t4)}

/* 표지 */
.cover{padding:0;background:linear-gradient(165deg,#f3fcf7 0%,#ffffff 55%);min-height:640px;display:flex;flex-direction:column}
.cover .ctop{display:flex;align-items:center;gap:10px;padding:40px 48px 0}
.cover .ctop img{height:26px;width:auto}
.cover .ctop span{font-weight:700;color:var(--t3);font-size:15px}
.cover .cbody{padding:36px 48px 0;flex:1}
.cover .kicker{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:14.5px}
.cover h1{margin:18px 0 14px;font-size:58px;line-height:1.14;font-weight:850;letter-spacing:-.045em}
.cover h1 em{font-style:normal;color:var(--brand)}
.cover .sub{font-size:20px;color:var(--t2);margin:0;max-width:24em}
.cover .art{margin:10px auto 0;width:min(86%,560px)}
.cover .cfoot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:22px 48px 36px;border-top:1px solid var(--line-2);font-size:15px;color:var(--t2)}
.cover .cfoot b{color:var(--t1)}
@media (max-width:560px){.cover .ctop,.cover .cbody,.cover .cfoot{padding-left:22px;padding-right:22px}.cover h1{font-size:40px}.cover .sub{font-size:17px}}

/* 목차 */
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px}
.toc li a{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-2);text-decoration:none}
.toc li a img{width:34px;height:34px;object-fit:contain;flex:none}
.toc li a b{flex:1;font-size:16.5px;font-weight:700}
.toc li a em{font-style:normal;color:var(--t4);font-weight:700;font-size:14px}
@media (max-width:760px){.toc{grid-template-columns:1fr}}

/* 끝 쪽 */
.back{background:linear-gradient(160deg,#03d15f 0%,#00a84c 100%);color:#fff}
.back h2{color:#fff}
.back .lead{color:rgba(255,255,255,.88)}
.back .big{font-size:52px;font-weight:850;letter-spacing:-.03em;margin:4px 0 0;line-height:1.1}
.back .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.back .bx{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);padding:18px}
.back .bx b{display:block;font-size:17px;margin-bottom:4px}
.back .bx>span{display:block;font-size:15.5px;color:rgba(255,255,255,.9)}
.back .bx a{color:#fff;font-weight:700}
@media (max-width:760px){.back .row2{grid-template-columns:1fr}.back .big{font-size:40px}}

.foot{max-width:920px;margin:0 auto;padding:8px 16px 40px;color:var(--t3);font-size:13.5px;text-align:center}
.foot a{color:var(--t2)}

/* 휴대폰 폭 */
@media (max-width:760px){
  body{font-size:16.5px}
  .page{padding:28px 20px 26px;border-radius:20px}
  .page h2{font-size:27px}
  .page .lead{font-size:16.5px;margin-bottom:20px}
  .page .hicon{width:58px;height:58px;top:22px;right:16px}
  .page .head{padding-right:66px}
  .page .head.wide{padding-right:0;padding-top:46px}
  .page .hicon.wide{width:104px;height:46px}
  .phone{max-width:300px}
  table.tb.stack,.tb.stack tbody,.tb.stack tr,.tb.stack td{display:block;width:auto!important}
  .tb.stack tr:first-child{display:none}
  .tb.stack tr{padding:10px 14px;border-bottom:1px solid var(--line-2)}
  .tb.stack tr:last-child{border-bottom:0}
  .tb.stack td{padding:3px 0;border:0}
  .tb.stack td::before{content:attr(data-l);display:block;font-size:12.5px;font-weight:700;color:var(--t3)}
}

/* ───── 인쇄(A4) ───── */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  body{font-size:15.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top,.chips,.foot,.noprint{display:none!important}
  .doc{max-width:none;margin:0;padding:0}
  .page{width:210mm;height:297mm;margin:0;border-radius:0;box-shadow:none;padding:16mm 15mm 18mm;page-break-after:always;break-after:page;break-inside:avoid}
  .page:last-child{page-break-after:auto;break-after:auto}
  .page .pfoot{display:flex;position:absolute;left:15mm;right:15mm;bottom:9mm;justify-content:space-between;align-items:center;font-size:9.5pt;color:var(--t4);font-weight:600}
  .page .pfoot::after{content:counter(pg)}
  .cover .pfoot,.back .pfoot{display:none}
  .page h2{font-size:30pt;margin-top:6pt}
  .page .lead{font-size:15.5pt;margin-bottom:18pt}
  .page h3{font-size:18pt;margin:18pt 0 9pt}
  .page .hicon{width:21mm;height:21mm;top:14mm;right:15mm}
  .page .head{padding-right:26mm}
  .page .head.wide{padding-right:42mm}
  .page .hicon.wide{width:38mm;height:17mm}
  .page .eyebrow{font-size:11pt}
  .steps>li{padding:0 0 14pt 42pt}
  .steps>li::before{width:28pt;height:28pt;font-size:13.5pt}
  .steps>li:not(:last-child)::after{left:13.5pt;top:31pt}
  .steps>li b.t{font-size:16pt}
  .steps>li span.d{font-size:14pt}
  .split{grid-template-columns:minmax(0,1fr) 72mm;gap:9mm}
  .split.wide{grid-template-columns:minmax(0,1fr) 92mm}
  .split.rev{grid-template-columns:72mm minmax(0,1fr)}
  .phone{max-width:72mm;border-radius:7mm;padding:2mm;box-shadow:0 2mm 7mm rgba(0,27,55,.12)}
  .phone .scr{border-radius:5mm}
  .split.wide .phone{max-width:92mm}
  .cap{font-size:11pt}
  .tip{padding:10pt 12pt;margin-top:12pt}
  .tip b.k{font-size:12.5pt}
  .tip p,.tip li{font-size:13.5pt}
  .card{padding:12pt}
  .card b{font-size:15pt}
  .card>span,.card>div>span{font-size:13pt}
  .card img{width:16mm;height:16mm}
  table.tb{font-size:13.5pt}
  .tb th{font-size:12pt}
  .tb td .s{font-size:12pt}
  .tnote{font-size:12.5pt;margin-top:5pt}
  .tb th,.tb td{padding:8pt 10pt}
  .tl{grid-template-columns:34mm minmax(0,1fr);padding:10pt 12pt;gap:10pt}
  .tl .when{font-size:14.5pt}.tl .when small{font-size:11pt}
  .tl .what b{font-size:14.5pt}.tl .what>span{font-size:13.5pt}
  .flow .f{padding:12pt}
  .flow .f b{font-size:15pt}.flow .f>span{font-size:13pt}
  .cover{min-height:0}
  .cover .ctop{padding:16mm 16mm 0}
  .cover .cbody{padding:14mm 16mm 0}
  .cover h1{font-size:46pt}
  .cover .sub{font-size:16pt}
  .cover .art{width:150mm;margin-top:8mm}
  .cover .cfoot{position:absolute;left:0;right:0;bottom:0;padding:9mm 16mm 12mm;font-size:12pt}
  .toc li a{padding:7pt 2pt}
  .toc li a b{font-size:14pt}
  .toc li a img{width:10mm;height:10mm}
  .back .big{font-size:40pt}
  .back .bx b{font-size:14.5pt}.back .bx>span{font-size:13pt}
  .tb.compact th,.tb.compact td{padding-top:6.5pt;padding-bottom:6.5pt}
  #cancel .tb.compact th,#cancel .tb.compact td{padding-top:4.5pt;padding-bottom:4.5pt}
  .back img{filter:none!important}
  a{text-decoration:none}
}

/* 화면 예시(실제 화면 모양을 본뜬 그림 — 회사 설정 화면처럼 찍을 수 없는 곳) */
.mock{height:100%;background:#fff;font-size:11.5px;line-height:1.5;color:#222;display:flex;flex-direction:column;letter-spacing:-.02em}
.mock .mt{height:40px;flex:none;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #eee}
.mock .mt img{height:15px;width:auto}
.mock .mt::before{content:"";position:absolute;left:14px;top:14px;width:14px;height:2px;background:#555;box-shadow:0 5px 0 #555,0 10px 0 #555}
.mock .mb{flex:1;padding:14px 14px 10px;background:#f7f8fa;overflow:hidden}
.mock h5{margin:2px 0 10px;text-align:center;font-size:15px;font-weight:800}
.mock .sub{text-align:center;color:#666;margin:0 0 10px;font-size:11px}
.mock .bx{background:#fff;border:1px solid #e6e8eb;border-radius:10px;padding:10px 11px;margin:0 0 8px}
.mock .bx b{display:block;font-size:12px;margin-bottom:4px}
.mock .bx .r{display:flex;gap:8px;padding:4px 0;border-top:1px solid #f0f1f3;font-size:10.5px}
.mock .bx .r:first-of-type{border-top:0}
.mock .bx .r em{font-style:normal;font-weight:700;min-width:62px;color:#333}
.mock .bx .r span{color:#555}
.mock .opt{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.mock .opt span{padding:4px 8px;border-radius:7px;border:1px solid #dfe3e8;background:#fff;font-size:10.5px;font-weight:600;color:#444}
.mock .opt span.on{border-color:#03d15f;background:#e8faf0;color:#00873f}
.mock .btn{display:block;text-align:center;padding:9px 0;border-radius:9px;background:linear-gradient(107deg,#98ec2d -28%,#03d15f 100%);color:#fff;font-weight:800;font-size:12px;margin:8px 0 0}
.mock .btn.o{background:#fff;border:1px solid #03d15f;color:#00a84c}
.mock .chk{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e8faf0;color:#03d15f;font-size:24px;font-weight:900;margin:14px auto 8px}
.mock .ctr{text-align:center}
.mock .it{display:flex;gap:6px;align-items:center;padding:6px 0;border-top:1px solid #f0f1f3;font-size:10.5px}
.mock .it:first-of-type{border-top:0}
.mock .it i{font-style:normal;flex:1;padding:4px 7px;border:1px solid #e3e6ea;border-radius:6px;background:#fafbfc}
.mock .it u{text-decoration:none;padding:4px 7px;border:1px solid #e3e6ea;border-radius:6px;min-width:34px;text-align:center}
.mock .note{font-size:10px;color:#777;margin:6px 0 0}
@media print{.mock{font-size:8.6pt}.mock h5{font-size:11pt}.mock .bx b{font-size:9pt}.mock .bx .r,.mock .opt span,.mock .it{font-size:8pt}.mock .btn{font-size:9pt}}

/* 차례 — A·B 두 묶음(10/21 대표: 줄마다 3D 아이콘 → 빽빽함) */
.tocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.tocg{border-radius:var(--r-l);border:1px solid var(--line-2);background:var(--bg-2);padding:18px 18px 8px}
.tocg.a{background:var(--brand-tint);border-color:#d3f3e1}
.tocg .tg{display:flex;align-items:center;gap:12px;padding:0 2px 12px;border-bottom:1px solid var(--line)}
.tocg .tg img{width:44px;height:44px;object-fit:contain;flex:none}
.tocg .tg b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.tocg.a .tg b{color:var(--brand-ink)}
.tocg .tg span{display:block;font-size:14px;color:var(--t3)}
.toc2{list-style:none;margin:0;padding:0}
.toc2 li a{display:flex;align-items:center;gap:12px;padding:9px 2px;text-decoration:none;border-bottom:1px solid var(--line-2)}
.toc2 li:last-child a{border-bottom:0}
.toc2 li a i{font-style:normal;flex:none;min-width:30px;font-size:13px;font-weight:800;color:var(--t3)}
.tocg.a .toc2 li a i{color:var(--brand-ink)}
.toc2 li a b{flex:1;font-size:16px;font-weight:600}
.toc2 li a em{font-style:normal;font-size:14px;font-weight:700;color:var(--t4)}
@media (max-width:760px){.tocs{grid-template-columns:1fr}}

/* 처음 접수하기 길잡이 띠(A 쪽 아래) */
.path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:26px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-2)}
.path span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--t4);background:#fff;border:1px solid var(--line-2)}
.path span i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--bg-3);color:var(--t3);font-size:11px;font-weight:800}
.path span.done{color:var(--brand-ink);border-color:#d3f3e1;background:var(--brand-tint)}
.path span.done i{background:var(--brand-soft);color:var(--brand-ink)}
.path span.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.path span.on i{background:#fff;color:var(--brand-ink)}
.path em{font-style:normal;margin-left:auto;font-size:13px;font-weight:700;color:var(--brand-ink);white-space:nowrap}
@media print{
  .path{position:absolute;left:15mm;right:15mm;bottom:15mm;margin:0;padding:7pt 9pt;gap:4pt}
  .path span{font-size:9pt;padding:2pt 6pt 2pt 3pt}
  .path span i{width:12pt;height:12pt;font-size:7.5pt}
  .path em{font-size:9.5pt}
  .tocg{padding:12pt 12pt 4pt}
  .tocg .tg img{width:12mm;height:12mm}
  .tocg .tg b{font-size:15pt}.tocg .tg span{font-size:10.5pt}
  .toc2 li a{padding:6.5pt 2pt}
  .toc2 li a b{font-size:12.5pt}.toc2 li a i,.toc2 li a em{font-size:10.5pt}
}

/* 2026-10-26 고치기 — 차례 왼쪽 칸(A·C 묶음), 기업 관리자(C) 역할 표, 관리자 넘기기·한 문장 화면 예시 */
.tcol{display:flex;flex-direction:column;gap:16px}
.tb.roles th{text-align:center;vertical-align:bottom}.tb.roles th:first-child{text-align:left}
.tb.roles th .s{display:block;font-weight:500;font-size:.78em;color:var(--t3)}
.tb.roles td:not(:first-child){text-align:center}
.tb.roles td.ok{color:var(--brand-ink);font-weight:800}.tb.roles td.no{color:var(--t4)}
.mock .mill{width:70px;height:70px;object-fit:contain;display:block;margin:10px auto 6px}
.mock .mtabs{display:flex;gap:5px;margin:0 0 8px}
.mock .mtabs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:9px;border:1px solid #e3e6ea;background:#f7f8fa;font-size:10.5px;font-weight:700;color:#555}
.mock .mtabs span.on{border-color:#03d15f;color:#00873f;box-shadow:inset 0 0 0 1px #03d15f}
.mock .mtabs img{width:22px;height:22px;object-fit:contain}
.mock .msent{margin:4px 0 0;padding:7px 8px;border:1px solid #e3e6ea;border-radius:7px;background:#fafbfc;font-size:10.5px;color:#333}
.mock .pick{display:flex;align-items:center;gap:7px;padding:7px 8px;margin:5px 0 0;border:1px solid #e3e6ea;border-radius:8px;font-size:10.5px;font-weight:600}
.mock .pick i{width:10px;height:10px;border-radius:50%;border:1.5px solid #b8c0c8;flex:none}
.mock .pick u{margin-left:auto;text-decoration:none;color:#888;font-weight:500}
.mock .pick.on{border-color:#03d15f;background:#e8faf0}.mock .pick.on i{border:3px solid #03d15f}
.mock .mtake{display:flex;align-items:center}
.mock .bx.tk{width:100%;text-align:center;padding:16px 12px}
.mock .bx.tk img{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto 6px}
.mock .tkl{display:flex;flex-direction:column;gap:4px;margin:4px 0 6px;padding:8px 10px;border-radius:8px;background:#f5f7f8;text-align:left;font-size:10.5px}
.mock .tkl span::before{content:"✓ ";color:#03d15f;font-weight:900}
@media print{.mock .mtabs span,.mock .msent,.mock .pick,.mock .tkl{font-size:8pt}.tb.roles th .s{font-size:8pt}}
@media print{.toc2 li a{padding:5pt 2pt}.tcol{gap:10pt}}