@charset "utf-8";
/* ==========================================================================
   골든디아망 Q&A — qa.html   2026-10-19
   main.css → sub.css → events.css → column.css → 이 파일 순으로 로드한다.
   검색창·분류 칩·건수는 칼럼과 같은 마크업(.gd-col-*)이라 column.css 를 그대로 쓰고,
   여기서는 «문항 아코디언»만 얹는다. 문항은 _i18n/qa.php 가 렌더 때 채운다.

   ⚠ 아랍어(RTL) — left/right 를 쓰지 않는다. 논리 속성만(margin-inline·padding-inline·text-align:start…).
   ⚠ 셀렉터는 body.gd-qa 로 시작한다.

   블록  01 WRAP   02 GROUP   03 ITEM   04 ANSWER   05 NOTE   06 RESPONSIVE
   ========================================================================== */

/* --- 01. WRAP — 글 읽는 폭으로 좁힌다(칼럼 목록은 3열 카드라 넓다) -------------- */
body.gd-qa .gd-qa-wrap{max-width:min(100%,1040px)}

/* --- 02. GROUP — 분류 제목 + 문항 수 -------------------------------------- */
body.gd-qa .gd-qa-group{margin-top:clamp(40px,3.6vw,68px);scroll-margin-top:calc(var(--gd-hdr) + 16px)}
body.gd-qa .gd-qa-group:first-of-type{margin-top:0}
body.gd-qa .gd-qa-gh{
  display:flex;align-items:baseline;gap:10px;margin:0 0 clamp(12px,1.05vw,20px);
  padding-bottom:clamp(10px,.83vw,16px);border-bottom:2px solid var(--gd-ink);
  font-size:clamp(19px,1.46vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--gd-ink);
}
body.gd-qa .gd-qa-gn{
  font-family:var(--gd-serif);font-size:.72em;font-weight:500;color:var(--gd-brown);font-variant-numeric:tabular-nums;
}

/* --- 03. ITEM — <details>/<summary> 아코디언 ------------------------------- */
body.gd-qa .gd-qa-item{
  border-bottom:1px solid var(--gd-line);background:transparent;
  scroll-margin-top:calc(var(--gd-hdr) + 16px);
}
body.gd-qa .gd-qa-item summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(12px,1.05vw,20px);
  padding:clamp(18px,1.46vw,26px) 4px;cursor:pointer;list-style:none;
}
body.gd-qa .gd-qa-item summary::-webkit-details-marker{display:none}
body.gd-qa .gd-qa-item summary:focus-visible{outline:2px solid var(--gd-brown);outline-offset:2px;border-radius:6px}
body.gd-qa .gd-qa-mark{
  font-family:var(--gd-serif);font-style:italic;font-size:clamp(20px,1.46vw,26px);line-height:1.2;color:var(--gd-brown);
  min-width:1.1em;
}
body.gd-qa .gd-qa-q{
  font-size:clamp(15.5px,1.04vw,19px);font-weight:600;line-height:1.6;letter-spacing:-.015em;color:var(--gd-ink);
  word-break:keep-all;overflow-wrap:anywhere;
  transition:color .3s var(--gd-ease);
}
body.gd-qa .gd-qa-item summary:hover .gd-qa-q{color:var(--gd-brown)}
body.gd-qa .gd-qa-chev{
  width:20px;height:20px;margin-top:4px;fill:none;stroke:var(--gd-ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--gd-ease);
}
body.gd-qa .gd-qa-item[open] .gd-qa-chev{transform:rotate(180deg)}
body.gd-qa .gd-qa-item[open] .gd-qa-q{color:var(--gd-brown-dp)}

/* --- 04. ANSWER — 흰 판 위에 A 표시 + 본문 + 관련 페이지 ------------------- */
body.gd-qa .gd-qa-a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.05vw,20px);
  margin:0 0 clamp(18px,1.46vw,26px);padding:clamp(18px,1.67vw,30px) clamp(16px,1.46vw,28px);
  background:#fff;border-radius:var(--gd-r,14px);
}
body.gd-qa .gd-qa-a p{
  margin:0;font-size:clamp(14.5px,.94vw,17px);line-height:1.85;letter-spacing:-.01em;color:var(--gd-ink-2);
  word-break:keep-all;overflow-wrap:anywhere;text-align:start;
}
body.gd-qa .gd-qa-more{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(12px,1.05vw,18px);
  padding-bottom:2px;border-bottom:1px solid var(--gd-line);
  font-size:clamp(13px,.83vw,15px);font-weight:500;color:var(--gd-ink);
  transition:color .3s var(--gd-ease),border-color .3s var(--gd-ease);
}
body.gd-qa .gd-qa-more svg{width:22px;height:8px;fill:none;stroke:currentColor;stroke-width:1.2}
body.gd-qa .gd-qa-more:hover{color:var(--gd-brown);border-color:var(--gd-brown)}
[dir="rtl"] body.gd-qa .gd-qa-more svg{transform:scaleX(-1)}

/* --- 05. NOTE — 사이트 공통 부작용 고지(.gd-snote) 여백만 ------------------- */
body.gd-qa .gd-qa-note{margin-top:clamp(36px,3.1vw,60px)}

/* --- 06. RESPONSIVE ------------------------------------------------------- */
@media (max-width:768px){
  body.gd-qa .gd-qa-item summary{padding-inline:0}
  body.gd-qa .gd-qa-a{grid-template-columns:minmax(0,1fr)}
  body.gd-qa .gd-qa-a > .gd-qa-mark{display:none}
}
@media (prefers-reduced-motion:reduce){
  body.gd-qa .gd-qa-chev,body.gd-qa .gd-qa-q,body.gd-qa .gd-qa-more{transition:none}
}