/* ── PYRO NEWS · 공통 스타일 ── */
@font-face{
  font-family:'PuradakGentleGothic';
  src:local('Puradak Gentle Gothic OTF'),local('Puradak Gentle Gothic'),local('PuradakGentleGothic'),
      url('./PuradakGentleGothic.otf') format('opentype'),
      url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.1/PuradakGentleGothicR.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  --bg:#030309;--bg2:#07070f;--white:#f4f4f8;
  --dim:rgba(244,244,248,.55);--dim2:rgba(244,244,248,.32);
  --line:rgba(255,255,255,.10);
  --brand:#7B029D;--ember:#b45ce8;
  --grad:linear-gradient(100deg,#d9a4ff 0%,#b45ce8 40%,#7B029D 78%,#8b7dff 100%);
  --font-b:'Pretendard',sans-serif;
  --font-h:'PuradakGentleGothic','Pretendard',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--font-b);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
::selection{background:var(--brand);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.pt{color:var(--ember)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header (전 페이지 공통) */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,48px);transition:background .4s}
header.scrolled{background:rgba(3,3,9,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo img{height:26px;width:auto;display:block}
nav.gnb{display:flex;gap:clamp(18px,3vw,40px)}
nav.gnb a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);transition:color .3s;position:relative}
nav.gnb a:hover,nav.gnb a.on{color:var(--white)}
nav.gnb a.on::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--grad)}
.contact-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:9px 5px 9px 18px;overflow:hidden;max-width:170px;background:rgba(255,255,255,.03);transition:border-color .3s}
.contact-pill:hover{border-color:var(--ember)}
.contact-pill .mq{overflow:hidden;width:96px}
.contact-pill .mq span{display:inline-block;font-size:11px;letter-spacing:.24em;white-space:nowrap;animation:mq 8s linear infinite}
.contact-pill .dot-btn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* layout */
.wrap{max-width:1020px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.page-head{padding:clamp(120px,16vw,190px) 0 clamp(34px,5vw,56px);border-bottom:1px solid var(--line);text-align:center}
.page-head .crumb{display:block;font-size:11px;letter-spacing:.22em;color:var(--dim2);text-transform:uppercase}
.page-head .crumb a{transition:color .3s}
.page-head .crumb a:hover{color:var(--ember)}
.page-head h1{margin-top:18px;font-family:var(--font-h);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.35;word-break:keep-all}
.page-head p{margin-top:16px;color:var(--dim);font-weight:300;font-size:clamp(13px,1.5vw,15px);word-break:keep-all}

/* 게시판 리스트 */
.board{padding:clamp(20px,3vw,40px) 0 clamp(70px,10vw,120px)}
.board .thead{display:grid;grid-template-columns:110px 1fr 120px;gap:24px;padding:16px 6px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.board a.item{display:grid;grid-template-columns:110px 1fr 120px;gap:24px;align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .3s}
.board a.item:hover{background:rgba(255,255,255,.025)}
.board a.item:hover .t{color:var(--ember)}
.board .cat{font-size:11px;letter-spacing:.16em;color:var(--ember);text-transform:uppercase}
.board .t{font-size:clamp(14.5px,1.8vw,17px);font-weight:600;line-height:1.6;word-break:keep-all;transition:color .3s}
.board .t em{display:block;margin-top:7px;font-style:normal;font-size:12.5px;font-weight:300;color:var(--dim2);line-height:1.85}
.board .d{font-size:12px;color:var(--dim2);text-align:right}

/* 상세 */
.article{padding:clamp(40px,6vw,70px) 0 clamp(70px,10vw,120px)}
.article .meta{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;padding-bottom:clamp(30px,4vw,46px);border-bottom:1px solid var(--line);font-size:12px;color:var(--dim2)}
.article .meta b{font-weight:500;color:var(--dim);margin-right:6px}
.article .body{padding-top:clamp(32px,5vw,52px);font-size:clamp(14px,1.6vw,15.5px);font-weight:300;color:rgba(244,244,248,.78);line-height:2.1;word-break:keep-all}
.article .body p{margin-bottom:1.7em}
.article .body p.lead{font-size:clamp(15px,1.9vw,18px);font-weight:500;color:var(--white);line-height:1.9}
.article .body h2{margin:2.4em 0 1em;font-family:var(--font-h);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--white);line-height:1.5}
.article .body blockquote{margin:2.2em 0;padding:22px 26px;border-left:2px solid var(--ember);background:rgba(255,255,255,.03);border-radius:0 12px 12px 0;font-size:14px;line-height:2;color:rgba(244,244,248,.8)}
.article figure{margin:2.4em 0}
.article figure .ph{border:1px solid var(--line);border-radius:14px;aspect-ratio:16/9.4;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.22em;color:var(--dim2);background:radial-gradient(ellipse at 35% 25%,rgba(180,92,232,.18),transparent 60%),var(--bg2)}
.article figure img{border-radius:14px;border:1px solid var(--line);width:100%}
.article figcaption{margin-top:12px;font-size:12px;color:var(--dim2);text-align:center}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(34px,5vw,52px)}
.tags span{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:11px;color:var(--dim)}

/* prev/next */
.pager{margin-top:clamp(40px,6vw,70px);border-top:1px solid var(--line)}
.pager a,.pager span.none{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:baseline;padding:22px 6px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim);transition:background .3s}
.pager a:hover{background:rgba(255,255,255,.025);color:var(--white)}
.pager i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.btn-list{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(32px,4vw,48px);border:1px solid var(--line);border-radius:999px;padding:12px 24px;font-size:12.5px;transition:.3s}
.btn-list:hover{background:var(--white);color:#000;border-color:var(--white)}
.center{text-align:center}

/* footer */
footer{border-top:1px solid var(--line);padding:44px clamp(20px,4vw,48px) 56px}
.ft-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.ft-logo img{height:clamp(34px,5vw,52px);width:auto}
.ft-meta{text-align:right;color:var(--dim2);font-size:12px;font-weight:300;line-height:2}
.ft-meta a:hover{color:var(--white)}

@media (max-width:720px){
  .contact-pill{display:none}
  nav.gnb{gap:14px}
  nav.gnb a{font-size:10.5px;letter-spacing:.14em}
  .board .thead{display:none}
  .board a.item{grid-template-columns:1fr;gap:8px;padding:22px 4px}
  .board .d{text-align:left}
  .ft-meta{text-align:left}
}