/*
  정적 해설 페이지 전용.
  styles.css의 토큰(색·간격·서체)을 그대로 쓰고, 여기서는 문서형 레이아웃만 더한다.
  앱 화면은 폭 좁은 모바일 기준이지만 이 페이지들은 읽는 문서라 본문 폭을 넓게 잡는다.
*/

.guide-wrap{max-width:720px;margin:0 auto;padding:0 var(--s4) var(--s7)}

.guide-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);margin-bottom:var(--s5);
}
.logo-link{
  font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.22em;
  color:var(--fg);text-decoration:none;
}
.logo-link span{color:var(--seal)}
.try-link{font-size:14px;color:var(--seal);text-decoration:none;white-space:nowrap}
.try-link:hover{text-decoration:underline;text-underline-offset:3px}

.crumbs{font-size:13px;color:var(--fg-3);margin-bottom:var(--s4)}
.crumbs a{color:var(--fg-3);text-decoration:none}
.crumbs a:hover{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.crumbs span{margin:0 6px}

.guide-wrap h1{
  font-size:26px;font-weight:600;line-height:1.45;letter-spacing:-.02em;margin:0 0 var(--s3);
}
.updated{font-family:var(--mono);font-size:12px;color:var(--fg-3);margin:0 0 var(--s5)}

.guide-wrap h2{
  font-size:19px;font-weight:600;letter-spacing:-.01em;
  margin:var(--s6) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--rule);
}
.guide-wrap h3{font-size:16px;font-weight:600;margin:var(--s5) 0 var(--s2)}
.guide-wrap p{font-size:16px;line-height:1.95;color:var(--fg-2);margin:0 0 var(--s4)}
.guide-wrap p.lead{font-size:17px;line-height:2;color:var(--fg)}
.guide-wrap p.note{font-size:13px;line-height:1.85;color:var(--fg-3)}
.guide-wrap b{color:var(--fg)}
/*
  본문 링크만 인주색 밑줄로 둔다.
  .guide-wrap a로 잡으면 로고·빵부스러기·목록 카드까지 전부 밑줄이 붙어
  화면이 링크투성이가 된다. 범위를 본문(article)으로 좁히고,
  그 안에서도 카드·버튼 형태는 따로 되돌린다.
*/
article a{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
article a.cta-btn,.guide-index a{text-decoration:none}
.guide-index a{color:inherit}

/* 간지 한자는 앱 화면과 같은 명조 + 오행 색 */
.guide-wrap i{font-family:var(--serif);font-style:normal;font-size:1.12em}

.table-scroll{overflow-x:auto;margin:0 0 var(--s4);-webkit-overflow-scrolling:touch}
.guide-table{
  width:100%;border-collapse:collapse;font-size:15px;
  border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden;
}
.guide-table caption{
  caption-side:bottom;text-align:left;padding-top:var(--s2);
  font-size:12px;color:var(--fg-3);line-height:1.7;
}
.guide-table th,.guide-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--rule)}
.guide-table thead th{
  background:var(--ink-1);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-3);white-space:nowrap;
}
.guide-table tbody th{font-weight:600;color:var(--fg);white-space:nowrap}
.guide-table tbody tr:last-child th,.guide-table tbody tr:last-child td{border-bottom:none}
.guide-table small{font-size:12px;color:var(--fg-3);margin-left:3px}
.guide-table .count{
  font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
.guide-table .none{color:var(--fg-3)}

.badge{
  display:inline-block;padding:2px 8px;border-radius:var(--r1);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;white-space:nowrap;
}
.badge.pass{background:var(--verify-bg);color:var(--verify);border:1px solid var(--verify-line)}
.badge.informational{background:var(--ink-2);color:var(--warn);border:1px solid var(--rule-2)}
.badge.fail{background:var(--seal-bg);color:var(--seal);border:1px solid var(--seal-line)}

.stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r2);
  overflow:hidden;margin:0 0 var(--s5);
}
.stat-strip>div{background:var(--ink-1);padding:var(--s4) var(--s2);text-align:center}
.stat-strip b{
  display:block;font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;
  color:var(--verify);line-height:1.2;
}
.stat-strip span{display:block;font-size:12px;color:var(--fg-3);margin-top:4px}

.term-list{margin:0 0 var(--s4)}
.term-list dt{font-size:15px;font-weight:600;color:var(--fg);margin-top:var(--s3)}
.term-list dt small{font-family:var(--mono);font-size:12px;color:var(--fg-3);margin-left:6px;font-weight:400}
.term-list dd{margin:4px 0 0;font-size:15px;line-height:1.9;color:var(--fg-2)}

.plain-list{margin:0 0 var(--s4);padding-left:20px}
.plain-list li{font-size:15px;line-height:1.95;color:var(--fg-2);margin-bottom:6px}
.plain-list.caveat li{font-size:14px;color:var(--fg-3)}

.callout{
  margin:var(--s4) 0;padding:var(--s4);border-radius:var(--r2);
  background:var(--ink-1);border:1px solid var(--rule);border-left:2px solid var(--rule-2);
}
.callout.warn{border-left-color:var(--seal-line)}
.callout b{display:block;font-size:14px;margin-bottom:var(--s2)}
.callout p{font-size:14px;line-height:1.9;color:var(--fg-3);margin:0 0 var(--s2)}
.callout p:last-child{margin-bottom:0}

.guide-index{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.guide-index a{
  display:block;padding:var(--s4);border-radius:var(--r2);
  background:var(--ink-1);border:1px solid var(--rule);text-decoration:none;
}
.guide-index a:hover{border-color:var(--rule-2)}
.guide-index b{display:block;font-size:16px;font-weight:600;color:var(--fg);margin-bottom:5px}
.guide-index span{display:block;font-size:14px;line-height:1.8;color:var(--fg-3)}

.guide-cta{
  margin:var(--s6) 0 0;padding:var(--s5);border-radius:var(--r2);
  background:var(--ink-1);border:1px solid var(--rule);text-align:center;
}
.guide-cta h2{border:none;padding:0;margin:0 0 var(--s2);font-size:17px}
.guide-cta p{font-size:14px;color:var(--fg-3);margin:0 0 var(--s4)}
.cta-btn{
  display:inline-block;padding:14px 28px;border-radius:var(--r2);
  background:var(--seal);color:#fff;font-size:16px;font-weight:600;text-decoration:none;
  border:1px solid var(--seal);
}
.cta-btn:hover{background:var(--seal-hi);border-color:var(--seal-hi)}

.guide-more{margin-top:var(--s6)}
.guide-more h2{font-size:15px;color:var(--fg-3)}
.guide-more ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.guide-more a{font-size:15px;color:var(--fg-2);text-decoration:none;line-height:1.7}
.guide-more a:hover{color:var(--seal);text-decoration:underline;text-underline-offset:3px}

.guide-foot{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
}
.guide-foot p{font-size:12px;line-height:1.85;color:var(--fg-3);margin:0 0 var(--s2)}

@media (max-width:420px){
  .guide-wrap h1{font-size:24px}
  .stat-strip b{font-size:18px}
  .guide-table th,.guide-table td{padding:9px 9px;font-size:14px}
}