/* ============================================================ InsurDesignLab — studypaper.css 요약본 두 갈래의 공통 스타일 사용법 학습용 전달용 학습용(_s) 스크롤로 쭉 읽는 글. 누를 곳이 없습니다. 전달용(_d) A4 두 쪽. .sheet 하나가 한 쪽입니다. 색은 presentation.css 와 같은 눈금을 씁니다. 슬라이드가 없으므로 deck.js 는 넣지 않습니다. gate.js 는 그대로 넣습니다. ============================================================ */ /* ── 1. 눈금 ────────────────────────────────────────────── */ :root{ --ink: #14213d; --ink-2: #33506e; --ink-3: #6b7f95; --paper: #ffffff; --canvas: #e7eef4; --canvas-2: #f4f9fb; --line: #dae4ec; --line-soft: #edf2f6; --brand: #c96a3f; --brand-soft: #f7ece6; --blue: #2f6f96; --blue-bg: #eaf3f9; --green: #237a63; --green-bg: #e8f5f0; --amber: #b8801f; --amber-bg: #fbf2e0; --coral: #b95745; --coral-bg: #fbece8; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{ font-family:'Noto Sans KR',sans-serif; color:var(--ink-2); background:var(--canvas); word-break:keep-all; -webkit-text-size-adjust:100%; } /* gate.js 의 members 처리가 #stage 를 숨깁니다. 두 갈래 모두 본문을 #stage 로 감싸 주세요. */ #stage{display:block} img{max-width:100%;height:auto;display:block} /* ════════════════════════════════════════════════════════ 2. 학습용 — 스크롤로 읽는 글 ════════════════════════════════════════════════════════ */ body.study{background:var(--paper)} .study .doc{ max-width:800px; margin:0 auto; padding:78px 28px 120px; } /* ── 머리 ── */ .study .doc-head{padding-bottom:26px;border-bottom:2px solid var(--ink);margin-bottom:38px} .study .ey{ font-size:12.5px;font-weight:900;letter-spacing:.13em; color:var(--brand);text-transform:uppercase; } .study h1{ font-size:36px;font-weight:900;letter-spacing:-.04em;line-height:1.28; color:var(--ink);margin-top:10px; } .study .doc-head .sub{font-size:16px;color:var(--ink-3);line-height:1.75;margin-top:12px} .study .doc-head .meta{ display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px; font-size:12.5px;font-weight:700;color:var(--ink-3); } /* ── 글 ── */ .study h2{ font-size:25px;font-weight:900;letter-spacing:-.03em;line-height:1.4; color:var(--ink);margin:56px 0 4px; padding-left:14px;border-left:5px solid var(--brand); } .study h2 + .h2sub{font-size:14px;color:var(--ink-3);line-height:1.7;margin:0 0 18px 19px} .study h3{ font-size:18.5px;font-weight:900;color:var(--ink-2); margin:34px 0 10px;letter-spacing:-.02em; } .study h4{font-size:16px;font-weight:900;color:var(--ink-2);margin:22px 0 8px} .study p{font-size:16.5px;line-height:1.92;color:var(--ink-2);margin:14px 0} .study p.lead{font-size:18px;line-height:1.85;color:var(--ink-3);font-weight:500} .study .sm{font-size:14px;line-height:1.8;color:var(--ink-3)} .study strong{font-weight:900;color:var(--ink)} .study .hi{font-weight:900;color:var(--coral)} .study .hi-b{font-weight:900;color:var(--blue)} .study .hi-g{font-weight:900;color:var(--green)} .study .und{ font-weight:800;color:var(--ink); background:linear-gradient(transparent 62%,var(--amber-bg) 62%); } .study ul,.study ol{margin:14px 0 14px 4px;padding-left:22px} .study li{font-size:16.5px;line-height:1.88;color:var(--ink-2);margin:7px 0} .study li::marker{color:var(--brand)} .study ul.tight li,.study ol.tight li{margin:2px 0;line-height:1.75} /* ── 상자 ── */ .study .box{ border:1px solid var(--line);border-left:5px solid var(--blue); background:var(--canvas-2);border-radius:12px; padding:20px 24px;margin:26px 0; } .study .box h4{margin-top:0;color:var(--blue)} .study .box p:first-child{margin-top:0} .study .box p:last-child{margin-bottom:0} .study .box--green{border-left-color:var(--green);background:var(--green-bg)} .study .box--green h4{color:var(--green)} .study .box--amber{border-left-color:var(--amber);background:var(--amber-bg)} .study .box--amber h4{color:var(--amber)} .study .box--coral{border-left-color:var(--coral);background:var(--coral-bg)} .study .box--coral h4{color:var(--coral)} /* 한 줄 강조 */ .study .key{ border-radius:12px;padding:16px 20px;margin:24px 0; font-size:17px;line-height:1.72;font-weight:800; background:var(--blue-bg);color:var(--ink-2); } .study .key--green{background:var(--green-bg);color:var(--green)} .study .key--amber{background:var(--amber-bg);color:var(--amber)} .study .key--coral{background:var(--coral-bg);color:var(--coral)} /* 인용 */ .study blockquote{ margin:24px 0;padding:6px 0 6px 22px; border-left:3px solid var(--line); font-size:16px;line-height:1.85;color:var(--ink-3); } .study blockquote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;font-weight:700} /* 출처·각주 */ .study .src{ margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--ink-3); } .study .notes{ margin-top:60px;padding-top:20px;border-top:1px solid var(--line); font-size:12.5px;line-height:1.85;color:var(--ink-3); } .study .notes ol{margin-left:0;padding-left:18px} .study .notes li{font-size:12.5px;line-height:1.85;margin:5px 0} /* 표 */ .study table{ width:100%;border-collapse:collapse;margin:24px 0; border:1px solid var(--line);border-radius:12px;overflow:hidden; font-size:14.5px; } .study th,.study td{ padding:11px 13px;border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); text-align:center;line-height:1.6;color:var(--ink-3); } .study th:last-child,.study td:last-child{border-right:0} .study tr:last-child td{border-bottom:0} .study thead th{background:var(--ink-2);color:#fff;font-weight:900} .study tbody th{background:var(--canvas-2);color:var(--ink-2);font-weight:900} /* 문장이 들어가는 칸에만 붙입니다 */ .study td.tx,.study th.tx{text-align:left} /* 차례 매긴 단계 */ .study .steps{counter-reset:st;list-style:none;margin:24px 0;padding:0} .study .steps li{ position:relative;padding:0 0 0 46px;margin:18px 0; font-size:16.5px;line-height:1.85; } .study .steps li::before{ counter-increment:st;content:counter(st); position:absolute;left:0;top:2px; width:30px;height:30px;border-radius:50%; background:var(--blue-bg);color:var(--blue); font-size:14px;font-weight:900; display:flex;align-items:center;justify-content:center; } .study .steps li b{display:block;color:var(--ink);font-weight:900;margin-bottom:2px} /* 체크 목록 */ .study .check{list-style:none;margin:20px 0;padding:0} .study .check li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--line-soft)} .study .check li:last-child{border-bottom:0} .study .check li::before{content:'✓';position:absolute;left:2px;top:8px;color:var(--green);font-weight:900} /* 두 칸 */ .study .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0} .study .two > *{margin:0} /* 그림 */ .study figure{margin:28px 0} .study figure img{border:1px solid var(--line);border-radius:12px;margin:0 auto} .study figcaption{margin-top:9px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.7} /* 구분선 */ .study hr{border:0;border-top:1px solid var(--line);margin:48px 0} /* 고객용 자료 — 학습용 끝에 놓습니다 */ .study .sendrow{ display:inline-flex;align-items:center;gap:4px;margin-top:44px; padding:7px 10px 7px 18px; border:1px solid var(--line);border-radius:26px;background:var(--canvas-2); } .study .sendrow .ttl{ font-size:14.5px;font-weight:800;color:var(--ink-3);letter-spacing:-.01em; margin-right:8px;white-space:nowrap; } .study .sendrow a,.study .sendrow button{ display:inline-flex;align-items:center;height:36px;padding:0 16px; border-radius:18px;font:800 14px/1 'Noto Sans KR',sans-serif; text-decoration:none;cursor:pointer;white-space:nowrap; background:transparent;border:0;color:var(--ink-2); transition:background .15s,color .15s; } .study .sendrow a:hover,.study .sendrow button:hover{background:var(--brand-soft);color:var(--brand)} .study .sendrow .sep{width:1px;height:18px;background:var(--line)} @media print{.study .sendrow{display:none}} /* 맺음 */ .study .end{ margin-top:64px;background:var(--ink);color:#fff; border-radius:16px;padding:34px 34px 30px; } .study .end .ey{color:var(--brand)} .study .end h2{ border:0;padding:0;margin:12px 0 0;color:#fff;font-size:26px;line-height:1.5; } .study .end p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.9} .study .end strong{color:#fff} @media (max-width:640px){ .study .doc{padding:62px 20px 96px} .study h1{font-size:28px} .study h2{font-size:21px} .study p,.study li{font-size:16px} .study .two{grid-template-columns:1fr} .study table{font-size:13px} .study th,.study td{padding:9px 8px} } /* ════════════════════════════════════════════════════════ 3. 전달용 — A4 두 쪽 ════════════════════════════════════════════════════════ */ body.hand{background:var(--canvas);padding:34px 12px 60px} .hand .sheet{ position:relative; width:210mm;min-height:297mm; margin:0 auto 20px; background:var(--paper); padding:15mm 16mm 14mm; box-shadow:0 10px 40px rgba(20,33,61,.16); display:flex;flex-direction:column; } /* 머리 */ .hand .sh-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:14px; padding-bottom:9px;border-bottom:2.5px solid var(--ink); } .hand .ey{font-size:9.5pt;font-weight:900;letter-spacing:.12em;color:var(--brand);text-transform:uppercase} .hand h1{font-size:20pt;font-weight:900;letter-spacing:-.035em;line-height:1.3;color:var(--ink);margin-top:3px} .hand .sh-head .who{font-size:8.5pt;font-weight:700;color:var(--ink-3);text-align:right;line-height:1.6;white-space:nowrap} /* 이어지는 쪽 머리 */ .hand .sh-head--cont{border-bottom-width:1px} .hand .sh-head--cont h1{font-size:13pt} .hand .sh-lead{font-size:10.5pt;line-height:1.7;color:var(--ink-3);margin-top:11px} /* 글 */ .hand h2{ font-size:13pt;font-weight:900;color:var(--ink);letter-spacing:-.02em; margin:16px 0 6px;padding-left:9px;border-left:4px solid var(--brand);line-height:1.4; } .hand h3{font-size:11pt;font-weight:900;color:var(--ink-2);margin:12px 0 4px} .hand p{font-size:10.5pt;line-height:1.72;color:var(--ink-2);margin:6px 0} .hand .sm{font-size:9pt;line-height:1.65;color:var(--ink-3)} .hand strong{font-weight:900;color:var(--ink)} .hand .hi{font-weight:900;color:var(--coral)} .hand ul,.hand ol{margin:6px 0 6px 2px;padding-left:17px} .hand li{font-size:10.5pt;line-height:1.72;color:var(--ink-2);margin:3px 0} .hand li::marker{color:var(--brand)} /* 두 칸 · 세 칸 */ .hand .two{display:grid;grid-template-columns:1fr 1fr;gap:9mm;margin:10px 0} .hand .three{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin:10px 0} .hand .two > *,.hand .three > *{margin:0} /* 상자 */ .hand .box{ border:1px solid var(--line);border-left:4px solid var(--blue); background:var(--canvas-2);border-radius:8px;padding:11px 14px;margin:10px 0; } .hand .box h3{margin-top:0;color:var(--blue)} .hand .box p:last-child{margin-bottom:0} .hand .box--green{border-left-color:var(--green);background:var(--green-bg)} .hand .box--green h3{color:var(--green)} .hand .box--amber{border-left-color:var(--amber);background:var(--amber-bg)} .hand .box--amber h3{color:var(--amber)} .hand .box--coral{border-left-color:var(--coral);background:var(--coral-bg)} .hand .box--coral h3{color:var(--coral)} .hand .key{ border-radius:9px;padding:11px 15px;margin:11px 0; font-size:11.5pt;font-weight:800;line-height:1.6; background:var(--blue-bg);color:var(--ink-2); } .hand .key--green{background:var(--green-bg);color:var(--green)} .hand .key--amber{background:var(--amber-bg);color:var(--amber)} .hand .key--coral{background:var(--coral-bg);color:var(--coral)} /* 숫자 */ .hand .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin:11px 0} .hand .num{border:1px solid var(--line);border-radius:9px;padding:12px 8px;text-align:center} .hand .num .n{font-size:22pt;font-weight:900;color:var(--blue);line-height:1} .hand .num .t{font-size:9.5pt;font-weight:900;color:var(--ink-2);margin-top:5px} .hand .num .d{font-size:8pt;color:var(--ink-3);margin-top:2px;line-height:1.5} /* 표 */ .hand table{ width:100%;border-collapse:collapse;margin:10px 0; border:1px solid var(--line);font-size:9.5pt; } .hand th,.hand td{ padding:6px 8px;border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); text-align:center;line-height:1.55;color:var(--ink-3); } .hand th:last-child,.hand td:last-child{border-right:0} .hand tr:last-child td{border-bottom:0} .hand thead th{background:var(--ink-2);color:#fff;font-weight:900} .hand tbody th{background:var(--canvas-2);color:var(--ink-2);font-weight:900} .hand td.tx,.hand th.tx{text-align:left} /* 그림 */ .hand figure{margin:10px 0} .hand figure img{border:1px solid var(--line);border-radius:8px;margin:0 auto} .hand figcaption{margin-top:5px;font-size:8pt;color:var(--ink-3);text-align:center} /* 발 — 쪽 아래에 붙습니다 */ .hand .sh-foot{ margin-top:auto;padding-top:9px;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:flex-end;gap:12px; font-size:8pt;line-height:1.6;color:var(--ink-3); } .hand .sh-foot .card{text-align:right;white-space:nowrap} .hand .sh-foot .card b{display:block;font-size:9.5pt;color:var(--ink-2)} /* 보낸 사람 서명 — gate.js 가 .gate-sign 안에 그립니다 */ .hand .gate-sign{position:relative} .hand .gate-sign:empty{display:none} .hand .gate-sign .gateSig{ position:static;right:auto;bottom:auto; text-align:right;font-size:9pt;line-height:1.5;color:var(--ink-2); } .hand .gate-sign .gateSig .tel{font-weight:500;color:var(--ink-3)} @media (max-width:820px){ body.hand{padding:20px 0 40px} .hand .sheet{width:100%;min-height:0;padding:22px 20px 20px;box-shadow:none;margin-bottom:0;border-bottom:1px solid var(--line)} .hand .two,.hand .three,.hand .nums{grid-template-columns:1fr;gap:10px} } /* ════════════════════════════════════════════════════════ 4. 인쇄 ════════════════════════════════════════════════════════ */ @media print{ html,body{background:#fff} .backNav,#gateBar,#gateMark,#gateWall,#annoToggle,#annoBar,#annoCanvas{display:none !important} #gateTile{opacity:.06} .box,.key,.num,thead th,tbody th,.study .end,.study .und{ -webkit-print-color-adjust:exact;print-color-adjust:exact; } } /* 전달용은 A4 두 쪽 */ @media print{ body.hand{padding:0} .hand .sheet{ width:auto;min-height:0;margin:0;padding:0; box-shadow:none; break-after:page;page-break-after:always; break-inside:avoid;page-break-inside:avoid; } .hand .sheet:last-child{break-after:auto;page-break-after:auto} } @page{size:A4;margin:15mm 16mm 14mm} /* 학습용은 흐름대로 흘려보냅니다 */ @media print{ body.study{padding:0} .study .doc{max-width:none;padding:0} .study h2,.study h3{break-after:avoid;page-break-after:avoid} .study .box,.study .key,.study figure,.study table,.study blockquote{ break-inside:avoid;page-break-inside:avoid; } } /* ── 접근성 ── */ :where(button,a):focus-visible{outline:2px solid var(--brand);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important;animation-duration:.01ms !important} }