/* /step-by-step pages (page_files/skill_steps). Site blue #22659e, link blue #1f6fb2. */
.ss_page{ max-width:980px; margin:0 auto; padding:0 12px 40px; font-family:arial, sans-serif; color:#222; box-sizing:border-box; width:100%; }
.ss_page .ss_n{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:50%; background:#dbe8f3; color:#22659e; font-weight:bold; font-size:12px; }

.ss_toc{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:6px 0 22px; padding:0; list-style:none; }
.ss_toc a{ display:flex; align-items:center; gap:6px; padding:4px 11px 4px 4px; border:1px solid #c8d6e3; border-radius:18px; background:#fff; color:#1f6fb2; font-size:13px; text-decoration:none; }
.ss_toc a:hover{ border-color:#1f6fb2; background:#eef5fb; }

.ss_howto{ margin:0 0 26px; padding:12px 16px; background:#f5f9fc; border:1px solid #cfdde9; border-radius:6px; font-size:14.5px; line-height:1.55; }

.ss_step{ display:grid; grid-template-columns:minmax(0, 1fr) 190px; gap:24px; padding:22px 0; border-top:1px solid #e3e9ef; scroll-margin-top:70px; }
.ss_step h2{ display:flex; align-items:center; gap:10px; margin:0 0 6px; color:#22659e; font-size:20px; }
.ss_step h2 .ss_n{ width:30px; height:30px; background:#22659e; color:#fff; font-size:15px; }
.ss_what{ margin:0 0 10px; font-size:15px; line-height:1.55; }
.ss_ex{ margin:0 0 10px; padding:10px 14px; background:#fbfbf7; border:1px solid #e6e3d3; border-radius:6px; font-size:14.5px; line-height:1.6; overflow-x:auto; }
.ss_ex b{ display:block; margin-bottom:2px; color:#555; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.ss_ex pre{ margin:4px 0 0; font:16px/1.25 "Courier New", monospace; }
.ss_ex_text{ white-space:pre-wrap; }
.ss_watch{ margin:0; padding:6px 10px; background:#fff7e8; border-left:3px solid #e8a33d; border-radius:0 4px 4px 0; color:#8a4b00; font-size:14px; line-height:1.5; }

.ss_ws{ text-align:center; font-size:13px; }
.ss_ws img{ display:block; width:160px; height:auto; aspect-ratio:816/1056; margin:0 auto 6px; object-fit:cover; object-position:top; border:1px solid #bbb; background:#fff; }
.ss_ws .ss_ws_title{ display:block; margin-bottom:6px; color:#1f6fb2; font-weight:bold; text-decoration:none; }
.ss_btn{ display:inline-block; margin:2px; padding:5px 10px; border-radius:4px; color:#fff; font-size:12.5px; text-decoration:none; }
.ss_dl{ background:#22659e; } .ss_on{ background:#3a50e0; }
.ss_btn:hover{ filter:brightness(1.1); }
.ss_ws.ss_none{ align-self:start; padding:30px 10px; border:2px dashed #ccd6df; border-radius:6px; color:#888; }

.ss_whole_step{ grid-template-columns:minmax(0, 1fr); }
.ss_whole{ display:flex; flex-wrap:wrap; gap:18px; }
.ss_whole a{ width:150px; color:#1f6fb2; font-size:13px; font-weight:bold; text-align:center; text-decoration:none; }
.ss_whole img{ display:block; width:150px; height:auto; aspect-ratio:816/1056; margin-bottom:6px; object-fit:cover; object-position:top; border:1px solid #bbb; background:#fff; }

.ss_list{ list-style:none; margin:10px 0; padding:0; }
.ss_list li{ margin:0 0 12px; font-size:15px; line-height:1.5; }
.ss_list a{ display:block; color:#22659e; font-weight:bold; font-size:17px; text-decoration:none; }
.ss_list a:hover{ text-decoration:underline; }
.ss_list span{ color:#555; }

@media (max-width:600px){
	.ss_step{ grid-template-columns:minmax(0, 1fr); gap:12px; }
	.ss_ws{ display:grid; grid-template-columns:110px 1fr; grid-auto-rows:min-content; gap:6px 12px; align-items:start; text-align:left; }
	.ss_ws > a:first-child{ grid-row:span 3; }	/* the thumbnail's link is the grid item, not the img */
	.ss_ws img{ width:110px; margin:0; }
	.ss_ws .ss_btn{ justify-self:start; margin:0; }
	.ss_ws.ss_none{ display:block; padding:14px; text-align:center; }
	.ss_whole a, .ss_whole img{ width:120px; }
}