/* A2W 본문 표현 — 사이트에 한 번만 넣는다.
 *
 * 어디에 넣나
 *   WordPress 관리자 → 외모 → 사용자 정의하기 → 추가 CSS  (또는 테마의 스타일 파일)
 *   글마다 <style> 을 복사해 넣지 않는다. 글에는 클래스만 들어간다.
 *
 * 무엇을 하나
 *   글의 어느 부분이 무슨 역할인지(요약 · 주의 · 지금 할 일 …)를 눈에 보이게 한다.
 *   꾸미는 것이 목적이 아니다 — 긴 글에서 **어디를 읽어야 하는지** 가 보이게 하는 것이다.
 *
 * 원칙
 *   · JavaScript 없이 읽힌다. 이 파일이 없어도 글은 그대로 읽힌다 (상자가 평범한 문단이 될 뿐)
 *   · 색은 왼쪽 띠와 옅은 바탕까지만. 글자색을 바꾸지 않는다 (대비 · 다크모드 안전)
 *   · 상자 이름은 heading 이 아니다. 글의 목차(h2 · h3) 를 건드리지 않는다
 *   · 모바일에서 먼저 읽힌다. 고정 폭 · 가로 스크롤을 만들지 않는다
 */

.a2w-box {
  margin: 1.6em 0;
  padding: 1em 1.1em;
  border-left: 4px solid #c9ced6;
  border-radius: 6px;
  background: #f7f8fa;
}

.a2w-box > :first-child { margin-top: 0; }
.a2w-box > :last-child { margin-bottom: 0; }

/* 상자 이름 — 작고 조용하게. 제목처럼 크게 만들지 않는다 */
.a2w-box__label {
  margin: 0 0 .5em;
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: .75;
}

.a2w-box p { margin: .5em 0; }
.a2w-box ul,
.a2w-box ol { margin: .5em 0; padding-left: 1.3em; }
.a2w-box li { margin: .25em 0; }

/* 역할별 — 띠 색과 바탕만 바꾼다 */
.a2w-box--summary    { border-left-color: #3b6ea8; background: #f2f6fb; }
.a2w-box--answer     { border-left-color: #2f7d5b; background: #f1f8f4; }
.a2w-box--info       { border-left-color: #6b7280; background: #f6f7f9; }
.a2w-box--tip        { border-left-color: #7a6bb5; background: #f6f4fb; }
.a2w-box--warning    { border-left-color: #b5762f; background: #fdf6ec; }
.a2w-box--action     { border-left-color: #2f7d5b; background: #f1f8f4; }
.a2w-box--comparison { border-left-color: #3b6ea8; background: #f7f8fa; }
.a2w-box--source     { border-left-color: #9aa1ab; background: #f7f8fa; font-size: .95em; }
.a2w-box--faq        { border-left-color: #6b7280; background: #f7f8fa; }
.a2w-box--update     { border-left-color: #b5762f; background: #fbf8f3; }

/* 표 — 비교 · 요금 · 조건처럼 나란히 봐야 할 때만 쓴다.
   좁은 화면에서는 표만 가로로 밀린다. 글 전체가 밀리지 않는다 */
.a2w-table { margin: 1.6em 0; overflow-x: auto; }
.a2w-table table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-size: .96em;
}
.a2w-table th,
.a2w-table td {
  padding: .55em .7em;
  border: 1px solid #dfe3e8;
  text-align: left;
  vertical-align: top;
}
.a2w-table thead th { background: #f2f4f7; font-weight: 700; }

/* PATCH-69 — 그대로 복사해 쓰는 문장 (프롬프트 · 템플릿 · 코드).
   상자 하나가 복사 범위다. 줄바꿈 · 빈 줄을 그대로 보여 주되, 긴 줄은 화면 안에서 접는다 (가로 스크롤 없음) */
.a2w-copy {
  position: relative;
  margin: 1.2em 0;
  padding: 1em 1.1em;
  border: 1px solid #dfe3e8;
  border-left: 4px solid #3b6ea8;
  border-radius: 6px;
  background: #f7f9fc;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: .95em;
  line-height: 1.65;
}
.a2w-copy code { font-family: inherit; background: none; padding: 0; white-space: inherit; }
/* 복사 버튼 — 사이트 스크립트(a2w-copy.js)가 붙인다. 스크립트가 없으면 버튼도 없다 */
.a2w-copy__button {
  position: absolute;
  top: .5em;
  right: .5em;
  padding: .2em .7em;
  border: 1px solid #c9ced6;
  border-radius: 4px;
  background: #fff;
  font-size: .82em;
  cursor: pointer;
}
.a2w-copy--has-button { padding-top: 2.4em; }

/* 어두운 화면에서도 글자가 묻히지 않게 — 바탕만 낮추고 글자색은 테마에 맡긴다 */
@media (prefers-color-scheme: dark) {
  .a2w-copy { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
  .a2w-copy__button { background: transparent; }
  .a2w-box { background: rgba(255, 255, 255, .04); }
  .a2w-box--summary { background: rgba(59, 110, 168, .10); }
  .a2w-box--answer,
  .a2w-box--action { background: rgba(47, 125, 91, .10); }
  .a2w-box--warning,
  .a2w-box--update { background: rgba(181, 118, 47, .10); }
  .a2w-box--tip { background: rgba(122, 107, 181, .10); }
  .a2w-table th,
  .a2w-table td { border-color: rgba(255, 255, 255, .18); }
  .a2w-table thead th { background: rgba(255, 255, 255, .06); }
}

@media (max-width: 480px) {
  .a2w-box { padding: .85em .9em; margin: 1.3em 0; }
}