/* 리포트 아카이브 목록 페이지와 분석 리포트가 함께 쓰는 스타일시트. * * 두 페이지는 디자인 토큰·상단바·본문 서식을 공유하지만 레이아웃이 다르다 * (목록은 900px 단칸, 리포트는 260px 목차 + 본문 2단 그리드). 겹치는 셀렉터는 * body 클래스로 갈라 둔다. * * 목록 application/views/reports/index.php * 리포트 reports/*.html (생성기가 찍어내는 산출물) * * 아래 "공용" 구역에 있는 규칙만 두 페이지에 함께 적용된다. 한쪽에만 필요한 * 규칙은 반드시 해당 구역에 넣을 것 — 공용으로 올리면 다른 쪽이 깨진다. */ /* ==================================================================== 공용 */ :root{ --bg:#ffffff; --bg-soft:#f7f8fa; --bg-sunken:#f1f3f6; --text:#1a1d21; --text-muted:#5c6570; --text-faint:#8b949e; --border:#e3e6ea; --border-strong:#d0d5db; --accent:#1f6feb; --accent-soft:#eaf1fd; --pos:#137a4b; --pos-soft:#e6f4ec; --neg:#b3261e; --neg-soft:#fdecea; --warn:#8a5a00; --warn-soft:#fdf4e3; /* 국내 증시 관행: 상승 빨강, 하락 파랑. 해외 종목은 --pos/--neg 를 쓴다. */ --krx-up:#d32f2f; --krx-down:#1565c0; /* 캔들 위에 겹쳐 그리는 지표선. 상승/하락 색(빨강·파랑·초록)과 겹치지 않는 색조라야 국내·해외 종목 어느 쪽에서도 캔들과 구분된다. */ --ind-1:#c2701c; --ind-2:#7c4dff; --ind-3:#0e8f8f; /* 볼린저 밴드. 캔들 뒤에 깔리는 면이라 채도가 낮아야 캔들을 방해하지 않고, 그러면서 이동평균선 셋과도 색이 겹치지 않아야 한다. */ --ind-band:#6f7c91; /* 차트 영역 구분선. 눈금선보다 확실히 진해야 칸이 갈린 것으로 읽힌다. */ --chart-sep:#555555; --sans:'Pretendard', Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --mono:"Cascadia Mono","Consolas","SFMono-Regular",Menlo,monospace; } @media (prefers-color-scheme: dark){ :root{ --bg:#101214; --bg-soft:#171a1d; --bg-sunken:#1d2126; --text:#e6e9ed; --text-muted:#a3acb8; --text-faint:#767f8b; --border:#282d33; --border-strong:#39404a; --accent:#5b9cff; --accent-soft:#16233a; --pos:#4cc38a; --pos-soft:#12291f; --neg:#f2776b; --neg-soft:#2b1614; --warn:#e0b050; --warn-soft:#2a2113; --krx-up:#ff6b6b; --krx-down:#5b9cff; --ind-1:#f0a95c; --ind-2:#a78bfa; --ind-3:#2fc4c4; --ind-band:#9aa7bc; /* 어두운 배경에서 #555 는 배경에 묻힌다. 밝은 테마의 #555 와 같은 무게로 보이도록 한 단계 밝힌 값을 쓴다. */ --chart-sep:#7c848f; } } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; } .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px; padding:0 24px; height:56px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border); } .brand{font-weight:700; letter-spacing:-.02em; font-size:15px;} .brand span{color:var(--accent);} .topbar .ticker{ font-family:var(--mono); font-size:13px; font-weight:600; padding:3px 9px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text-muted); } .topbar .spacer{flex:1;} .topbar .meta{font-size:13px; color:var(--text-faint);} main{padding-top:40px;} .eyebrow{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin-bottom:10px; } .hero h1{ font-size:38px; line-height:1.2; letter-spacing:-.028em; font-weight:800; margin:0 0 10px; } .hero .sub{color:var(--text-muted); font-size:15px;} .hero .sub b{color:var(--text); font-weight:600;} .sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:8px;} .sec-num{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.06em; } h2.sec-title{font-size:27px; font-weight:750; letter-spacing:-.024em; margin:0; line-height:1.3;} .sec-note{font-size:13px; color:var(--text-faint); margin:0 0 24px;} .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; } .stats div{background:var(--bg); padding:14px 16px;} .stats .k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin-bottom:4px; } .stats .v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;} .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;} table{border-collapse:collapse; width:100%; font-size:14px;} th,td{padding:11px 16px; text-align:left; line-height:1.6;} thead th{ background:var(--bg-sunken); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--text-muted); border-bottom:1px solid var(--border-strong); white-space:nowrap; } tbody tr{border-top:1px solid var(--border);} tbody tr:first-child{border-top:0;} tbody tr:nth-child(even){background:var(--bg-soft);} /* 목록의 페이지 이동. CI 페이지네이션이 와 현재 페이지 만 뱉으므로 둘을 같은 크기의 칸으로 맞춰야 줄이 흔들리지 않는다. */ .pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin:24px 0 0; font-size:13.5px; font-variant-numeric:tabular-nums; } .pagination a,.pagination strong{ display:inline-block; min-width:36px; padding:6px 11px; border:1px solid var(--border-strong); border-radius:8px; text-align:center; font-weight:650; line-height:1.5; } .pagination a{color:var(--text-muted); background:var(--bg); text-decoration:none;} .pagination a:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); text-decoration:none; } .pagination strong{color:#fff; background:var(--accent); border-color:var(--accent);} footer{ margin:0 auto; padding:32px 24px 64px; border-top:1px solid var(--border); color:var(--text-faint); font-size:12.5px; line-height:1.7; } footer b{color:var(--text-muted);} /* ==================================================== 목록 (.page-archive) */ /* .page-archive a{color:var(--accent); text-decoration:none;} .page-archive a:hover{color:var(--accent); text-decoration:underline;} .page-archive .layout{max-width:900px; margin:0 auto; padding:0 24px 96px;} .page-archive footer{max-width:900px;} .page-archive .hero{ .page-archive .hero .sub{margin:0;} .page-archive section{padding-top:24px;} .page-archive .stats{margin:26px 0 0;} .page-archive .table-wrap{margin:0;} .page-archive table{min-width:420px;} .page-archive tbody tr{cursor:pointer;} .page-archive tbody tr:hover{background:var(--accent-soft);} .page-archive th.when,.page-archive td.when{text-align:left; white-space:nowrap;} .page-archive td.when{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text-muted); font-size:13px;} .page-archive td.when .t{color:var(--text-faint);} .page-archive th.ago,.page-archive td.ago{text-align:left;; white-space:nowrap;} .page-archive td.ago{color:var(--text-faint); font-variant-numeric:tabular-nums; font-size:13px;} .page-archive td.symbol a{ color:var(--text); text-decoration:none; font-weight:650; letter-spacing:-.01em; } .page-archive td.symbol a:hover{color:var(--accent); text-decoration:underline;} .page-archive td.empty{color:var(--text-faint); text-align:center; padding:40px 16px;} */ /* --- 종목 분석 요청 -------------------------------------------------- */ /* 리포트 표지의 외부 링크 버튼과 같은 형태로 맞춘다. */ .btn-req{ font-family:inherit; font-size:12.5px; font-weight:650; line-height:1.5; padding:6px 13px; border-radius:8px; cursor:pointer; border:1px solid var(--border-strong); background:var(--bg); color:var(--text-muted); white-space:nowrap; } .btn-req:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);} #req-dialog{ width:min(440px, calc(100vw - 32px)); padding:26px 28px 22px; border:1px solid var(--border-strong); border-radius:14px; background:var(--bg); color:var(--text); font-family:var(--sans); box-shadow:0 18px 48px rgba(0,0,0,.22); } #req-dialog::backdrop{background:rgba(0,0,0,.45);} #req-dialog h2{font-size:20px; font-weight:750; letter-spacing:-.02em; margin:0 0 6px;} .req-note{font-size:13px; color:var(--text-faint); margin:0 0 16px;} .req-x{ float:right; margin:-8px -8px 0 0; border:0; background:none; cursor:pointer; font-size:22px; line-height:1; padding:4px 8px; color:var(--text-faint); border-radius:6px; } .req-x:hover{color:var(--text); background:var(--bg-soft);} .req-input{ width:100%; font-family:inherit; font-size:15px; padding:10px 13px; border:1px solid var(--border-strong); border-radius:9px; background:var(--bg-soft); color:var(--text); } .req-input:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--bg);} .req-label{ display:block; margin:16px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; } .req-label span{text-transform:none; letter-spacing:0; font-weight:600;} .req-textarea{font-size:14px; line-height:1.6; resize:vertical; min-height:64px;} /* 결과가 없을 때는 높이를 차지하지 않아 다이얼로그가 훌쩍 커지지 않는다. */ .req-results:not(:empty){ margin-top:12px; max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:9px; } .req-item{ display:flex; align-items:baseline; gap:9px; width:100%; padding:9px 13px; border:0; border-top:1px solid var(--border); background:none; color:inherit; font-family:inherit; font-size:14px; text-align:left; cursor:pointer; } .req-item:first-child{border-top:0;} .req-item:hover{background:var(--bg-soft);} .req-item[aria-selected="true"]{background:var(--accent-soft);} .req-item .nm{font-weight:650; letter-spacing:-.01em;} .req-item .tk{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--text-muted); } .req-item .mk{margin-left:auto; font-size:11.5px; color:var(--text-faint); white-space:nowrap;} .req-status{font-size:13px; color:var(--text-faint); margin-top:12px; min-height:20px;} .req-status.err{color:var(--neg,#b3261e);} .req-status.done{color:var(--accent);} .req-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;} .btn-plain,.btn-primary{ font-family:inherit; font-size:13.5px; font-weight:650; line-height:1.5; padding:8px 16px; border-radius:9px; cursor:pointer; } .btn-plain{border:1px solid var(--border-strong); background:var(--bg); color:var(--text-muted);} .btn-plain:hover{color:var(--text); background:var(--bg-soft);} .btn-primary{border:1px solid var(--accent); background:var(--accent); color:#fff;} .btn-primary:hover:not(:disabled){filter:brightness(1.08);} .btn-primary:disabled{opacity:.45; cursor:not-allowed;} /* ==================================================== 리포트 (.page-report) */ /* 리포트 본문은 링크 색을 따로 두지 않는다. 아래의 .toc a / .links a / .backtop a / footer a 는 모두 이 규칙보다 셀렉터가 구체적이라 덮어쓴다. */ a{ text-decoration: none; color: inherit; } .layout{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; max-width:1200px; margin:0 auto; padding:0 24px 96px; } footer{max-width:1200px;} footer a{color:var(--accent); text-decoration:none;} footer a:hover{color:var(--accent); text-decoration:underline;} .toc{ position:sticky; top:56px; align-self:start; max-height:calc(100vh - 56px); overflow-y:auto; padding:40px 0 40px; font-size:13.5px; } .toc h2{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin:0 0 14px; } .toc ol{list-style:none; margin:0; padding:0;} .toc li{margin:0;} .toc a{ display:block; padding:5px 12px; margin-left:-12px; color:var(--text-muted); text-decoration:none; border-left:2px solid transparent; border-radius:0 4px 4px 0; line-height:1.5; } .toc a:hover{color:var(--accent); background:var(--bg-soft); border-left-color:var(--accent);} .toc .sub a{padding-left:26px; font-size:13px; color:var(--text-faint);} .toc .lead a{color:var(--text); font-weight:600;} main{min-width:0;} .hero{padding-bottom:32px; border-bottom:1px solid var(--border);} .hero .sub{margin:0 0 24px;} .titlerow{display:flex; align-items:center; gap:16px; flex-wrap:wrap;} .titlerow h1{margin:0;} .links{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto;} .links a{ display:inline-block; padding:5px 11px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg); color:var(--text-muted); text-decoration:none; font-size:12.5px; font-weight:650; white-space:nowrap; line-height:1.5; } .links a:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .links a.yahoo:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .links a.naver:hover{ color:black; border-color:#00d355; background:#00d355; } .links a.toss:hover{ color:white; border-color:#3182f6; background:#3182f6; } .pricebar{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px;} .pricebar .px{ font-size:31px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; } .pricebar .cur{font-size:14px; font-weight:600; color:var(--text-muted);} .pricebar .chg{font-size:15px; font-weight:650; font-variant-numeric:tabular-nums;} .pricebar .asof{font-size:12.5px; color:var(--text-faint); margin-left:auto;} .chart{ border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); padding:10px 12px; margin:0 0 26px; overflow-x:auto; } .chart svg{display:block; width:100%; height:auto; min-width:520px;} .chart .grid{stroke:var(--border); stroke-width:1;} /* 캔들 / 거래량 / RSI / MACD 영역을 가르는 선. 눈금선보다 진하게, 영역마다 하나씩만 긋는다. crispEdges 는 가로선이 반 픽셀에 걸려 흐려지는 것을 막는다. */ .chart .sep{stroke:var(--chart-sep); stroke-width:1; shape-rendering:crispEdges;} .chart .axis{fill:var(--text-faint); font-size:10px; font-family:var(--mono);} .chart .c-up{fill:var(--pos); stroke:var(--pos);} .chart .c-down{fill:var(--neg); stroke:var(--neg);} /* 코스피/코스닥 종목은 국내 관행대로 상승 빨강 / 하락 파랑으로 뒤집는다. */ .chart.krx .c-up{fill:var(--krx-up); stroke:var(--krx-up);} .chart.krx .c-down{fill:var(--krx-down); stroke:var(--krx-down);} /* 거래량 막대와 MACD 히스토그램은 캔들과 같은 밝기로 그린다. 예전에는 opacity 로 눌러 뒀는데, 색만 흐려질 뿐 읽기 쉬워지지는 않았다. */ .chart .cap{fill:var(--text-faint); font-size:10px;} .chart .ind{fill:none; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;} .chart .ind-ma1{stroke:var(--ind-1);} .chart .ind-ma2{stroke:var(--ind-2);} .chart .ind-ma3{stroke:var(--ind-3);} .chart .ind-bb{stroke:var(--ind-band);} /* 볼린저 밴드: 상·하단 사이를 옅게 채운 면 하나로 읽혀야 한다. 캔들보다 먼저 그려 뒤에 깔리고, 채도를 낮춰 봉과 이동평균선을 가리지 않는다. */ .chart .band{fill:var(--ind-band); fill-opacity:.13; stroke:none;} /* 테두리는 면의 경계를 알려 줄 만큼만. 진하게 두면 어두운 테마에서 밴드가 캔들보다 앞으로 튀어나와 보인다. */ .chart .band-edge{stroke-width:1; opacity:.75;} /* 중심선(20일 이동평균)은 밴드의 기준선이지 별개의 지표선이 아니라서 같은 색 점선으로 둔다 — 위의 이동평균선 셋과 헷갈리지 않게. */ .chart .band-mid{stroke-width:1; stroke-dasharray:4 3; opacity:.8;} /* 오실레이터 칸의 판정 기준선(RSI 30/70, MACD 0선) */ .chart .guide{stroke:var(--border-strong); stroke-width:1; stroke-dasharray:2 3;} .chart .ind-t-ma1{fill:var(--ind-1);} .chart .ind-t-ma2{fill:var(--ind-2);} .chart .ind-t-ma3{fill:var(--ind-3);} .chart .legend{ display:flex; flex-wrap:wrap; gap:4px 14px; padding:2px 2px 8px; font-size:11.5px; font-family:var(--mono); color:var(--text-faint); } .chart .legend span{display:inline-flex; align-items:center; gap:5px;} .chart .legend span::before{ content:""; width:13px; height:2px; border-radius:1px; background:currentColor; } /* 밴드 범례는 선이 아니라 면이므로 칩도 띠 모양으로 — 위아래 테두리와 옅은 속면이 그림 위의 밴드와 같은 형태로 보이게 한다. */ .chart .legend span.band-chip::before{ height:9px; border-radius:2px; background:color-mix(in srgb, currentColor 16%, transparent); border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; } .chart .lg-ma1{color:var(--ind-1);} .chart .lg-ma2{color:var(--ind-2);} .chart .lg-ma3{color:var(--ind-3);} .chart .lg-bb{color:var(--ind-band);} .verdict{ display:flex; flex-wrap:wrap; align-items:stretch; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; } .verdict > div{background:var(--bg); padding:16px 20px; flex:1 1 150px;} .verdict .label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin-bottom:6px; } .verdict .value{ font-size:21px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.3; } .verdict .value small{font-size:13px; font-weight:600; color:var(--text-muted); margin-left:4px;} .verdict .delta{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;} .up{color:var(--pos);} .down{color:var(--neg);} .badge{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.01em; } .badge-buy{background:var(--pos-soft); color:var(--pos);} .badge-hold{background:var(--warn-soft); color:var(--warn);} .badge-sell{background:var(--neg-soft); color:var(--neg);} section{padding-top:56px; scroll-margin-top:72px;} .sec-num{padding-top:6px;} .rule{height:1px; background:var(--border); margin:14px 0 28px;} /* 결론('최종 분석 의견')이 맨 위로 올라가 있어(_reorder_sections 참고) 끝까지 읽고 나면 화면 밖으로 한참 밀려 있다. 마지막 섹션 끝에 돌아갈 길을 둔다. 생김새는 제목 줄의 외부 링크 버튼(.links a)과 같은 계열로 맞추되, 단독 행동 유도라 여백을 키웠다. 화면용 보조 장치라 인쇄에서는 뺀다. */ .backtop{ display:flex; justify-content:center; margin-top:34px; padding-top:30px; } .backtop a{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg); color:var(--text-muted); text-decoration:none; font-size:13px; font-weight:650; line-height:1.5; white-space:nowrap; } .backtop a:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .backtop .arrow{font-size:15px; line-height:1;} .card{ border:1px solid var(--border); border-radius:12px; padding:26px 30px; margin-bottom:22px; background:var(--bg); scroll-margin-top:72px; } .card.pm{border-color:var(--border-strong); background:var(--bg-soft);} .card.bull{border-left:3px solid var(--pos);} .card.bear{border-left:3px solid var(--neg);} .card.neutral{border-left:3px solid var(--text-faint);} .card.aggressive{border-left:3px solid var(--warn);} .card-kicker{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 18px; } .agent{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--text-faint); } .card h1{font-size:21px; font-weight:750; letter-spacing:-.02em; margin:0 0 14px; line-height:1.35;} .card h2{font-size:18px; font-weight:700; margin:30px 0 10px; letter-spacing:-.014em;} .card h3{font-size:16px; font-weight:700; margin:24px 0 8px;} .card h4{font-size:15px; font-weight:650; margin:20px 0 8px;} .card h5,.card h6{font-size:14.5px; font-weight:650; margin:18px 0 6px; color:var(--text-muted);} .card > h1:first-child,.card > h2:first-child,.card > h3:first-child{margin-top:0;} /* 리포트 본문(마크다운 변환 결과)의 기본 서식. 목록 페이지의 footer 문단 여백까지 바꿔 버리므로 공용으로 올리지 않는다. */ p{margin:0 0 14px;} ul,ol{margin:0 0 16px; padding-left:22px;} li{margin-bottom:7px;} li > ul, li > ol{margin-top:7px;} strong{font-weight:670; color:var(--text);} code{ font-family:var(--mono); font-size:.9em; background:var(--bg-sunken); padding:1px 5px; border-radius:4px; } pre{ background:var(--bg-sunken); padding:14px 16px; border-radius:8px; overflow-x:auto; font-size:13px; } pre code{background:none; padding:0;} hr{border:0; border-top:1px solid var(--border); margin:26px 0;} blockquote{ margin:0 0 16px; padding:2px 18px; border-left:3px solid var(--border-strong); color:var(--text-muted); } .stats{margin:0 0 24px;} .stats .v.sm{font-size:14px; font-weight:600; line-height:1.4;} .callout{ border-left:3px solid var(--accent); background:var(--accent-soft); padding:16px 20px; border-radius:0 8px 8px 0; margin:0 0 20px; } .callout p:last-child, .callout ol:last-child, .callout ul:last-child{margin-bottom:0;} .proposal{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-faint); border:1px dashed var(--border-strong); border-radius:8px; padding:8px 14px; margin:6px 0 0; } .table-wrap{margin:0 0 24px;} table{min-width:560px;} th,td{vertical-align:top;} td[style*="right"],th[style*="right"]{font-variant-numeric:tabular-nums; white-space:nowrap;} table.report-list tr:hover td { background:var(--accent-soft); cursor: pointer; } /* ================================================================ 반응형 */ @media (max-width:1000px){ .hero h1{font-size:30px;} .page-archive .layout{padding:0 20px 72px;} .layout{grid-template-columns:1fr; gap:0; padding:0 20px 72px;} .toc{position:static; max-height:none; padding:28px 0 0; border-bottom:1px solid var(--border);} .toc ol{columns:2; column-gap:24px;} main{padding-top:16px;} .card{padding:20px 20px;} } @media print{ .links{display:none;} .topbar,.toc,.backtop{display:none;} .layout{display:block; max-width:none; padding:0;} .card{break-inside:avoid;} section{padding-top:28px;} }