/* 알림 목록 — 팝업(index.html)·정식 페이지(notices.html)가 함께 쓴다.
 *
 * 기록 CSS 를 두 파일에 복사해 두었다가 한쪽만 고치고 잊은 일이 있었다.
 * 처음부터 한 곳에 둔다.
 */

  .notice{
    background:var(--paper-warm); border:1px solid var(--line-soft);
    border-left:3px solid var(--copper); border-radius:2px;
    margin-bottom:9px; overflow:hidden;
  }
  .notice summary{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding:14px 18px; cursor:pointer; list-style:none; transition:background .25s;
  }
  .notice summary::-webkit-details-marker{display:none;}
  .notice summary:hover{background:rgba(176,128,58,.05);}
  .notice summary b{
    font-family:var(--serif); font-weight:500; font-size:15px;
    color:var(--ink); letter-spacing:.3px; word-break:keep-all;
  }
  .notice summary time{font-size:11.5px; color:var(--ink-ghost); letter-spacing:.5px; margin-left:auto;}
  .nt-body{
    padding:0 18px 18px; font-family:var(--batang); font-size:14.5px;
    line-height:2.05; color:var(--ink-soft); white-space:pre-wrap; word-break:keep-all;
  }
  .nt-clip{
    font-size:11px; letter-spacing:.5px; color:var(--copper);
    background:rgba(176,128,58,.10); border-radius:100px; padding:2px 9px;
  }
  .nt-att{padding:0 18px 16px;}
  .nt-wait{
    text-align:center; padding:56px 20px; color:var(--ink-faint);
    font-family:var(--batang); font-size:15px; line-height:2;
  }
  .nt-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; margin-bottom:10px;}
  .nt-shot{
    display:block; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden;
    background:var(--paper); transition:transform .3s ease, border-color .3s ease;
  }
  .nt-shot:hover{transform:translateY(-2px); border-color:var(--copper);}
  .nt-shot img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
  .nt-file{
    display:flex; align-items:center; gap:10px; text-decoration:none;
    background:var(--paper); border:1px solid var(--line-soft); border-radius:2px;
    padding:11px 14px; margin-bottom:7px; transition:border-color .25s;
  }
  .nt-file:hover{border-color:var(--copper);}
  .nt-file .ic{
    flex:0 0 auto; width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(176,128,58,.12); color:var(--copper); font-size:12px;
  }
  .nt-file b{font-weight:400; font-size:13.5px; color:var(--ink-soft); word-break:break-all;}
  .nt-file em{font-style:normal; font-size:11px; color:var(--ink-ghost); margin-left:auto; white-space:nowrap;}
  @media(max-width:640px){
    .notice summary{padding:12px 14px;}
    .notice summary time{margin-left:0; width:100%;}
    .nt-body{padding:0 14px 15px; font-size:14px;}
    .nt-att{padding:0 14px 14px;}
    .nt-shots{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  }