/* 글 아래에 붙는 첨부파일 목록.

   기본은 접힘이다. 본문을 읽으러 온 사람에게 파일 목록이 먼저 눈에 들어올
   까닭이 없기 때문이다. 필요한 사람만 펼쳐서 내려받는다. */

.gp-attach{max-width:var(--gp-measure);margin:40px auto 0;padding:0 var(--gp-gut)}

.gp-attach-box{border:1px solid var(--gp-line);border-radius:var(--gp-radius);background:#fff}

.gp-attach-summary{display:flex;align-items:center;gap:10px;padding:14px 16px;
                   cursor:pointer;list-style:none;user-select:none}
.gp-attach-summary::-webkit-details-marker{display:none}
.gp-attach-summary:hover{background:#fafaf7}

.gp-attach-label{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--gp-ink)}
.gp-attach-count{font-size:12px;color:var(--gp-ink-faint)}

/* 펼침 표시. 접혔을 때는 아래를, 펼쳤을 때는 위를 가리킨다. */
.gp-attach-caret{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--gp-ink-faint);
                 border-bottom:1.5px solid var(--gp-ink-faint);transform:rotate(45deg) translate(-2px,-2px);
                 transition:transform .15s ease}
.gp-attach-box[open] .gp-attach-caret{transform:rotate(-135deg) translate(-2px,-2px)}

.gp-attach-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--gp-line)}
.gp-attach-list li + li{border-top:1px solid var(--gp-line);margin:0}
.gp-attach-list a{display:flex;align-items:center;gap:12px;padding:12px 16px;
                  text-decoration:none;color:var(--gp-ink)}
.gp-attach-list a:hover{background:#fafaf7;text-decoration:none}

.gp-attach-ext{flex:0 0 auto;min-width:46px;text-align:center;font-size:10px;font-weight:800;
               letter-spacing:.06em;color:#fff;background:var(--gp-accent-2);
               border-radius:2px;padding:4px 6px}
.gp-attach-name{flex:1 1 auto;min-width:0;font-size:14px;word-break:break-all}
.gp-attach-size{flex:0 0 auto;font-size:12px;color:var(--gp-ink-faint);white-space:nowrap}

.gp-attach-help{margin:0;padding:10px 16px 14px;font-size:12px;color:var(--gp-ink-faint);
                border-top:1px solid var(--gp-line)}

@media (max-width:640px){
  .gp-attach-list a{padding:12px}
  .gp-attach-name{font-size:13px}
}

/* 이 목록은 the_content 끝에 붙으므로 .gp-content 안에 들어간다. 테마가 본문의
   ul·ol·li·a 에 걸어 둔 규칙이 그대로 먹으므로, 같은 무게로 되돌려 놓는다. */
.gp-content .gp-attach{margin:40px auto 0;padding:0 var(--gp-gut)}
.gp-content .gp-attach-list{margin:0;padding:0;list-style:none}
.gp-content .gp-attach-list li + li{margin-top:0}
.gp-content .gp-attach-list a{text-decoration:none}
.gp-content .gp-attach-box > * + *{margin-top:0}
.gp-content .gp-attach-help{margin:0}